Skip to content
Viewership Inquire

Astro component library.

Free Astro components for websites and apps. Server-rendered, no React, no Tailwind, copied into your project as source files. Pick a path, or paste one prompt into Claude Code and it installs the parts for you. 66 components.

Stylesheets For agents

Website components.

Full-width sections for marketing sites: heroes, features, pricing, proof, FAQ and footers.

UI components.

Interface pieces for apps and dashboards: chat, approval cards, data tables, menus and controls.

Popular Astro components.

Repair plans, priced plainly.

Sample prices for a fictional gear brand.

  • Trail

    A single repair or refit, done at the bench.

    $180

    per pack

    Book a repair
    • Stitching and seam tape
    • Zip and buckle swaps
    • Return shipping included

  • Season Most chosen

    Unlimited repairs and a yearly tune-up for the whole kit.

    $420

    per year

    Join for a season
    • Unlimited repairs
    • Annual waterproofing
    • Loaner pack while we work
    • Priority bench slot

  • Expedition

    Guides, schools and teams outfitting twelve or more people.

    By quote

    Request a quote
    • Fleet maintenance plan
    • On-site repair days
    • Custom colourways

Sample figures for demonstration.

Pricing Columns

Plans side by side as cards, with the featured plan inverted onto ink. Pricing

Questions, answered.

What does the repair promise cover?

Stitching, zips, seam tape and fabric patches on anything we made, for as long as you own it.

How long does a repair take?

Two working days on average once the pack reaches the bench, plus shipping both ways.

Do you ship outside the United States?

Yes, to Canada and the UK today. Duties are shown at checkout.

Can I return something I have used?

Within 60 days, yes. Tell us what did not work and we will take it back.

FAQ Accordion

A centred column of expandable question cards on native details, with FAQPage structured data. Conversion
Cited sources
Table actions
Alder Camp Forum · Tallinn
ForumReviews No contact No communication –
Alpine Stay Guide · Banff
TravelReviews 3 months ago Very weak alpine-stay.test (opens in a new tab)
Basecamp Podcast · Ghent
PodcastCitedSeasonal 15 days ago Weak basecamp-pod.test (opens in a new tab)
Bluebird Bike Trails · Utrecht
RedditBlogSeasonal 7 days ago Very strong bluebird-trails.test (opens in a new tab)
Clay Ridge Climbing · Naples
ForumYouTube almost 2 years ago Very weak clay-ridge.test (opens in a new tab)
Cobalt Climbing Blog · Boulder
ShortsNewsletter 6 days ago Very strong cobalt-climbing.test (opens in a new tab)
Dune Road Surf Talk · San Diego
ShortsSeasonal 8 months ago Weak dune-road.test (opens in a new tab)
Foundry Expo Hall · Pittsburgh
EventsCitedReviews about 2 years ago No communication foundry-expo.test (opens in a new tab)
Gear Lab Reviews · Melbourne
ForumReviews 2 months ago Weak gearlab-reviews.test (opens in a new tab)
Greenhouse Goods · Copenhagen
RetailerGuides 15 days ago Weak greenhouse-goods.test (opens in a new tab)
HikeTalk Forum · Chicago
ForumCited over 1 year ago Very weak hiketalk.test (opens in a new tab)
Kiln Trails Channel · Kyoto
RedditReviewsSeasonal 11 days ago Very strong kiln-trails.test (opens in a new tab)
Loom & Ledge · Glasgow
RedditEventsBlog 2 days ago Very strong loom-ledge.test (opens in a new tab)
Low Tide Paddle Club · Halifax
ForumBlog 9 days ago Very strong low-tide.test (opens in a new tab)
Meridian Media · Singapore
NewsNewsletterCited about 1 month ago Very weak meridian-media.test (opens in a new tab)
Orchard Outfitters · Hobart
RetailerBlogNewsletter 2 months ago Weak orchard-outfit.test (opens in a new tab)
Outdoor Wire News · Denver
NewsNewsletter over 1 year ago Very weak outdoor-wire.test (opens in a new tab)
Packlight Shorts · Lisbon
ShortsYouTube 5 months ago Very weak –
Parlour Nine Vlog · Montréal
RedditYouTube about 1 month ago Very weak –
r/CampingGear · Reddit
RedditCited 9 days ago Very strong reddit.test (opens in a new tab)
r/Ultralight · Reddit
RedditGuidesSeasonal No contact No communication reddit.test (opens in a new tab)
Saltgrass Daily · Oslo
NewsYouTube about 1 month ago Weak saltgrass.test (opens in a new tab)
Sundial Books & Maps · Seville
RedditRetailer over 2 years ago No communication sundial-maps.test (opens in a new tab)
The Gear Pressroom · Wellington
RedditYouTubeCited 5 weeks ago Weak gear-pressroom.test (opens in a new tab)
Thistle Trail Guides · Dublin
RedditGuides No contact No communication –
Trail Notes Weekly · Leeds
RedditYouTubeBlog 3 weeks ago Very strong trailnotes.test (opens in a new tab)
Verandah Travel Notes · Galle
TravelSeasonalReviews 18 days ago Weak verandah-travel.test (opens in a new tab)
Wren & Wild Blog · Edinburgh
RedditPodcast 4 days ago Very strong wren-wild.test (opens in a new tab)
28 count – 56% average 24 links

Records Table

CRM-style AI spreadsheet with tags, sorting and configurable AI columns. Data
Compare this week's sessions to last week
GA4 Pull Analytics Data for 4s

Pulled sessions by channel for the last three weeks.

Comparison Trend Detection for 2s

Sessions are up 12%, led by organic search and Reddit referrals.

Chat

Tabbed chat panel with reasoning replies and a growing composer. Agent

Built to outlast the trend.

  • 2 days

    Repairs for life

    Send any pack back. We patch, re-stitch or replace the part and return it fast.

  • Small batches

    Forty runs a year, each inspected by hand.

  • Honest specs

    Weights and ratings measured by us.

  • Trail-tested

    Guides carry every prototype for a season.

  • Resale built in

    Trade in, we refurbish, someone else heads out.

Feature Bento

One large accent tile, three light tiles and a dark closer. Built for five features, with optional figures. Features

The zip failed on day nine of a twelve-day trip. They fixed it in two days and the pack outlasted the rest of the season.

Maya Ortiz Guide, Ridgeline Outfitters

  • The first jacket I have owned that came back from a repair looking better than it left.

    Daniel Okafor Trail runner

  • Honest weights on the page, and the pack matched them to the gram.

    Priya Raman Ultralight blogger

  • They asked what went wrong and then actually changed the design.

    Lena Voss Climbing coach

Testimonial Spotlight

One customer quote set large in the display face, with up to three supporting quotes beneath. Proof

Prompt Bar

Message composer with @ sources, / commands and a model picker. Agent

Draft 214 · Spring Trails

Glide Menu

One highlight that glides to the hovered or focused row. Navigation
draft.ts
export async function draftPost() {
const brief = await getBrief("spring-trails");
const data = await ga4.fetch({ brief });
await voice.apply(data, { tone: "direct" });
if (!data.approved) return null;
return data.summary;
}

Code Block

Line-numbered code listing with copy, or a unified diff. Content

Gear club membership.

Rentals, repairs and member pricing in one subscription. Sample prices.

Billing period

  • Weekend

    For a few trips a year.

    $9 / month $90 / year

    Join Weekend
    • Two rentals a month
    • 10% off repairs
    • Member events

  • Trail

    For people out most weekends.

    $19 / month $190 / year

    Join Trail
    • Unlimited rentals
    • Free repairs
    • Early access to drops
    • Member events

  • Guide

    For guides and instructors.

    $39 / month $390 / year

    Join Guide
    • Everything in Trail
    • Fleet discounts
    • Loaner kit on request

Pricing Toggle

Plans with a monthly or yearly switch built from native radios and CSS. No JavaScript. Pricing
Marketing tasks
Task nameDateStatusChannel
Draft spring trail email
Dec 03
To do
Email
Review GEO citation report
Sep 22
In Progress
Perplexity
Approve gear guide video
Jan 02
To do
YouTube
Reply to camping thread
Nov 08
In Progress
Reddit
Send weekly GA4 report
Apr 14
Completed
GA4

Filter Table

Status chips that filter a table in place. Data

Six habits that make gear last.

No marketing gloss. This is what we do differently, and what it costs us to do it.

  • 01 Service

    Repairs for life

    Send any pack back. We patch, re-stitch or replace the part and return it in two days.

    Learn more : Repairs for life
  • 02 Making

    Small batches

    Forty runs a year, each sized to what we can inspect by hand.

  • 03 Product

    Honest specs

    Weights, waterproof ratings and fabric sources on every product page.

  • 04 Making

    Trail-tested

    A volunteer crew of guides signs off every design before it ships.

  • 05 Service

    Ships from Duluth

    One warehouse, one team, orders out the same day before 2pm.

  • 06 Product

    Resale built in

    Trade in a used piece and we refurbish and relist it.

    Learn more : Resale built in

Feature Cards

Features as a joined index grid: numbered cells sharing hairlines, display-face titles, optional tags and links. Features

How we make things last.

Five rules every product passes before it carries our name.

  1. Design for the repair bench

    Every seam and zip can be replaced with hand tools. If it cannot be fixed, it does not ship.

  2. Cut in small batches

    Forty runs a year, each sized to what we can inspect by hand before it leaves Duluth.

  3. Publish the real specs

    Weights, ratings and mill names on every product page, measured by us, not the supplier.

  4. Test with people who go far

    A volunteer crew of guides carries every prototype for a full season.

  5. Take it back when you are done

    Trade-ins are refurbished and resold, so nothing we make ends up as landfill.

Feature Rules

Headline pinned left, numbered features ruled like an index on the right. Features

Kind words.

Unedited, from repair tickets and trip reports.

  • The zip failed on day nine of a twelve-day trip. They fixed it in two days and the pack outlasted the season.

    Maya Ortiz Guide

  • Honest weights, to the gram.

    Priya Raman Ultralight blogger

  • We outfit twelve students a year. Nobody has lost a buckle since we switched.

    Tom Hendry Outdoor education lead

  • They asked what went wrong and then actually changed the design.

    Lena Voss Climbing coach

  • It works in sideways rain.

    Sam Whitlock Weekend camper

  • Sent back a ten-year-old pack expecting a refusal. Got it back with new straps and a note from the person who fixed it.

    Ruth Adeyemi Scout leader

  • The resale shop is how I afforded my first proper shell.

    Jonah Lee Student

Testimonial Wall

Staggered columns of quotes in mixed tones. Takes quotes of any length. Proof

Pick your plan.

  • Trail

    One repair, done at the bench.

    • Stitching and seam tape
    • Zip and buckle swaps
    • Return shipping

    $180

    per pack

    Book a repair

  • Season

    Unlimited repairs for the whole kit.

    • Unlimited repairs
    • Annual waterproofing
    • Loaner pack
    • Priority slot

    $420

    per year

    Join

  • Expedition

    Fleets of twelve or more.

    • Fleet plan
    • On-site repair days
    • Custom colourways

    By quote

    Request a quote

Pricing Rows

One plan per ruled row with name, inclusions, price and action. Handles many plans and long lists. Pricing

Commissions by appointment.

Larger projects are scoped on a call and quoted in writing.

Season

$420

per year, billed once

Our most chosen plan. Everything is repaired, nothing is replaced.

Request an introduction
  • Unlimited repairs
  • Annual waterproofing
  • Loaner pack while we work
  • Priority bench slot
  • Resale credit on trade-ins
  • A named contact on the bench

Pricing Commission

One lead offer shown large with the other packages as a quiet list. For services that quote by appointment. Pricing

Before you order.

The short version of how we work.

Ask the bench a question
What does the repair promise cover?

Stitching, zips, seam tape and fabric patches on anything we made, for as long as you own it. Damage from a fire or a bear is on you.

How long does a repair take?

Two working days on average once the pack reaches the bench, plus shipping both ways. Rush slots open each Friday.

Where are your fabrics made?

Shells are woven in Portugal and finished in Wisconsin. Every product page lists the mill and the batch.

Do you ship outside the United States?

Yes, to Canada and the UK today. Duties are shown at checkout so there are no surprises.

Can I return something I have used?

Within 60 days, yes. Tell us what did not work and we will take it back, no form to fill in.

FAQ Split

Headline and a contact link pinned left, numbered ruled questions on the right. FAQPage data included. Conversion
Drafting report 214

Loading State

Pixel-grid loader with a shimmering label and elapsed timer. Feedback
Reading this week's GA4 data
Checking Google Ads spend
Comparing AI citations 6 prompts
Drafting the weekly summary

Thinking

Expandable agent trace for steps, reasoning, search or tool calls. Agent

The trail pack guide is your fastest-growing page. Organic sessions are up 23% this month, and it converts 9 points better than the category page. ga4-sep.csv Gemini and Perplexity now cite it too.

GA4 sessions, September ga4-sep.csv
AI citations, weeks 36–41 geo-log.md
Customer survey nw-survey.pdf

Streaming Text

Streamed answer with inline citations, sources, actions and follow-ups. Agent
Paid search drove most conversions, so it leads the summary.Two campaigns are waiting on client approval this week.
+ const rows = ga4.rows.filter((r) => r.paid)+ return report(rows, { client: "northwind" })
✓ built in 1.4s✓ 28 checks passed
1280 × 720 · bar chart, six prompts.Perplexity citations are up 2 since August.
+2 more

Tool Chips

Agent run as expandable tool-call rows, then file-diff chips. Agent
Matched campaigns to sessions 6/6
Flagged missing UTM tags 0
Reading prompt tracker export 3 files
Scoring share of voice 68%
Northwind weekly report email draft
Spring launch approval note draft

Task Rows

Live agent task status as expandable capsules or a list. Agent
Want me to move this week's ad budget?

Shift budget to Northwind Spring Search with ROAS 4.2x

Other options

High confidence

Recommendation Card

Agent suggestion with a confidence meter and alternatives. Agent
All chunks 32
Brand voice rule 290 characters

Headlines stay under 60 characters, with no exclamation marks, before a draft goes to client review.

Weekly traffic row 1,250 characters

Q4 sessions by channel: organic +18%, paid search +6%, email -11%; pause ad groups under 40 clicks weekly.

Context Cards

Retrieved knowledge chunks with sources, entering in sequence. Agent
Proposed content cleanup Click changed rows to toggle
AssetChannelOwner
Old FAQ Post , proposed removal
Blog
dana-w
Recap Thread , proposed removal
Social
marcus-t
Trail Guide
Blog
priya-s
Gear Care Email , proposed addition
Email
dana-w
2 removals · 1 addition

Diff Table

AI-proposed table edits you include or skip, then apply. Data
Build the weekly GA4 report
Find new Reddit threads
Compare ChatGPT citations
Draft the spring launch email
Check AI Overviews mentions

Search

Command search with live filtering and an empty state. Navigation
Arrow keys move this card.
Trigger
If / Else
If request is
and request is

Flowchart

Workflow trigger and condition cards on a dotted canvas with draggable steps. Data

Insights (3 total)

The weakest channel for @Northwind is Paid Social: down -6% or -$2,453.

Paid Social -4.41% -$2,377
Organic Search +1.15% +$617
Revenue vs. last week Snapshot

Line chart from Mar 6 to Mar 13. Paid Social fell from -2.90% to -4.41% (high -2.90%, low -4.41%); Organic Search rose from +0.22% to +1.15% (high +1.15%, low +0.22%).

Insight Cards

Paged agent insights with scrubbable SVG charts and follow-up prompts. Data
Post card Adjust Edited

Layout

Type

Fine-tune Card

Compact inspector the agent adjusts, then hands back to you. Agent

The trail pack page gets most AI citations. Keep it in this week's client report. Update it first thing Friday so the copy has a full day for review before the weekend launch.

Select text, or use the arrow keys to choose a sentence (Shift extends), then press Tab to reach the edit toolbar.

Selection Actions

Select text and a floating toolbar rewrites it in place. Agent
Reporting agent's screen
Reporting agent

Agent Screen

An agent's live screen with an expandable viewer and recording. Agent

Weekly report

Northwind Outdoor · Week 41 · GA4

Organic sessions rose 12% week over week, led by the trail pack guide. Paid search held a 4.1x ROAS on flat spend. Perplexity now cites the guide on 3 of 5 tracked prompts. Move $800 from display to search next week.

Stream Text

Text that streams in like model output, with a blurred edge and caret. Feedback
AI citations

412cites 27 new across 9 topics

Engine

Segmented Control

Equal-width segments with a sliding thumb, as a radio group. Inputs
Today's content plan
  • Spring email 5 of 5 · Approved
  • Weekly report 2 of 5 · In review
  • Reddit replies 1 of 4 · Next up
  • YouTube script 1 of 6 · Behind plan

Progress Ring

Small progress ring with a count or glyph in the center. Data

Overlay core

Positioning, dismissal, focus-trap and roving-focus helpers for popovers, menus and dialogs. Overlays

Start with the foundation.

Stylesheets

One CSS file of design tokens (color, type, radii, shadows, motion) that every component reads. Copy it once.

For agents

The install prompt, llms.txt and Markdown twins of every page, so Claude Code can add components for you.

Common questions.

What is the Astro component library?
A free set of 66 Astro components in two groups: 31 website components (heroes, pricing, FAQ, footers) and 35 UI components (chat, tables, menus, approval cards). All of them are server-rendered Astro markup themed by one stylesheet.
What is the difference between website components and UI components?
Website components are full-width page sections for marketing sites. UI components are smaller interface pieces for apps and dashboards, such as tables, chat composers and switches. They share one design-token stylesheet, so they can sit on the same page.
Is it an npm package?
No. You copy the files into src/components/viewership/ and own the code. Each component page lists its files, dependencies and props, and has a single bundle with everything needed.
Can Claude Code install these components?
Yes. Paste the prompt from the For Agents page into Claude Code, Cursor or any agent that can edit your project. It reads llms.txt, copies the stylesheet, then copies the components you ask for.

Built for agents.

Every page has a Markdown twin. Agents read it, then copy the files.

Agent guide