# Viewership UI

> Copy-in UI components for Astro. Server-rendered markup, vanilla TypeScript, themed with `--vs-*` tokens in one `foundation.css`. No React, no Tailwind, no runtime npm dependencies.

## How to use a component

1. Add `foundation.css` once (e.g. `src/styles/foundation.css`) and import it in your base layout.
2. Copy a component's folder into `src/components/viewership/<slug>/`, and each dependency into its own sibling folder.
3. Import the `.astro` file and use it. Scripts boot themselves.

Shortcut: `/components/<slug>.bundle.txt` has every file a component needs, each with its destination path.

Credits: ported from [Beautiful UI](https://www.beautifului.dev) (MIT, © 2026 Shane Levine).

## Sections

- [Hero Statement](https://viewership.ai/design/components/hero-statement.md): Centred headline and actions above a wide media panel.
- [Hero Split](https://viewership.ai/design/components/hero-split.md): Headline and actions beside a media panel; stacks when narrow, flips with one prop.
- [Hero Index](https://viewership.ai/design/components/hero-index.md): Oversized left-aligned headline over a ruled row of facts. Type-led, no media.
- [Hero Poster](https://viewership.ai/design/components/hero-poster.md): Full-bleed image or video with the headline set over it, bottom left, behind a soft scrim.
- [Feature Cards](https://viewership.ai/design/components/feature-cards.md): Features as a joined index grid: numbered cells sharing hairlines, display-face titles, optional tags and links.
- [Feature Rules](https://viewership.ai/design/components/feature-rules.md): Headline pinned left, numbered features ruled like an index on the right.
- [Feature Bento](https://viewership.ai/design/components/feature-bento.md): One large accent tile, three light tiles and a dark closer. Built for five features, with optional figures.
- [Feature Alternating](https://viewership.ai/design/components/feature-alternating.md): Image and copy rows that swap sides as you scroll, for features that each deserve a picture.
- [Testimonial Spotlight](https://viewership.ai/design/components/testimonial-spotlight.md): One customer quote set large in the display face, with up to three supporting quotes beneath.
- [Testimonial Cards](https://viewership.ai/design/components/testimonial-cards.md): Quotes as an even row of cards with optional star ratings and initials avatars.
- [Testimonial Wall](https://viewership.ai/design/components/testimonial-wall.md): Staggered columns of quotes in mixed tones. Takes quotes of any length.
- [Logo Row](https://viewership.ai/design/components/logo-row.md): A lead-in line and one wrapping row of client or press logos. Names become wordmarks when there is no image.
- [Logo Grid](https://viewership.ai/design/components/logo-grid.md): Logos in bordered cells beside a short statement, like a spec sheet.
- [Logo Marquee](https://viewership.ai/design/components/logo-marquee.md): Logos drifting in a slow loop with faded edges. Pauses on hover, static under reduced motion.
- [Stats Band](https://viewership.ai/design/components/stats-band.md): Headline figures on a dark band, each with a label, a footnote and a source line.
- [Pricing Columns](https://viewership.ai/design/components/pricing-columns.md): Plans side by side as cards, with the featured plan inverted onto ink.
- [Pricing Rows](https://viewership.ai/design/components/pricing-rows.md): One plan per ruled row with name, inclusions, price and action. Handles many plans and long lists.
- [Pricing Commission](https://viewership.ai/design/components/pricing-commission.md): One lead offer shown large with the other packages as a quiet list. For services that quote by appointment.
- [Pricing Toggle](https://viewership.ai/design/components/pricing-toggle.md): Plans with a monthly or yearly switch built from native radios and CSS. No JavaScript.
- [FAQ Accordion](https://viewership.ai/design/components/faq-accordion.md): A centred column of expandable question cards on native details, with FAQPage structured data.
- [FAQ Split](https://viewership.ai/design/components/faq-split.md): Headline and a contact link pinned left, numbered ruled questions on the right. FAQPage data included.
- [FAQ Open](https://viewership.ai/design/components/faq-open.md): Every answer visible in a two-column grid on a tinted ground. For short answers people skim.
- [CTA Band](https://viewership.ai/design/components/cta-band.md): The closing call to action on a full-width accent band, centred.
- [CTA Card](https://viewership.ai/design/components/cta-card.md): An inset card with copy beside the actions and an optional square image.
- [CTA Ink](https://viewership.ai/design/components/cta-ink.md): A dark band with an oversized headline and the actions tucked bottom right.
- [Newsletter](https://viewership.ai/design/components/newsletter.md): Email sign-up with a short pitch and privacy line. A plain HTML form you point at any provider.
- [Header Bar](https://viewership.ai/design/components/header-bar.md): Brand left, links and a call to action right. Folds into a native details menu when narrow. No JavaScript.
- [Header Centered](https://viewership.ai/design/components/header-centered.md): Brand in the middle, links split either side, optional announcement strip. Folds into a details menu.
- [Footer Columns](https://viewership.ai/design/components/footer-columns.md): Brand and tagline beside link columns, with a ruled legal line beneath.
- [Footer Minimal](https://viewership.ai/design/components/footer-minimal.md): One line with the brand, a few links and the legal note. For landing pages and small sites.
- [Footer Wordmark](https://viewership.ai/design/components/footer-wordmark.md): Link columns on a dark ground with the brand set across the full width beneath.

## Components

- [Loading State](https://viewership.ai/design/components/loading-state.md): Pixel-grid loader with a shimmering label and elapsed timer.
- [Thinking](https://viewership.ai/design/components/thinking-state.md): Expandable agent trace for steps, reasoning, search or tool calls.
- [Streaming Text](https://viewership.ai/design/components/streaming-text.md): Streamed answer with inline citations, sources, actions and follow-ups.
- [Approval Card](https://viewership.ai/design/components/approval-card.md): Questions an agent asks, one step at a time, before acting.
- [Tool Chips](https://viewership.ai/design/components/tool-chips.md): Agent run as expandable tool-call rows, then file-diff chips.
- [Task Rows](https://viewership.ai/design/components/task-rows.md): Live agent task status as expandable capsules or a list.
- [Chat](https://viewership.ai/design/components/chat-composer.md): Tabbed chat panel with reasoning replies and a growing composer.
- [Prompt Bar](https://viewership.ai/design/components/prompt-bar.md): Message composer with @ sources, / commands and a model picker.
- [Recommendation Card](https://viewership.ai/design/components/recommendation-card.md): Agent suggestion with a confidence meter and alternatives.
- [Context Cards](https://viewership.ai/design/components/context-cards.md): Retrieved knowledge chunks with sources, entering in sequence.
- [Diff Table](https://viewership.ai/design/components/diff-table.md): AI-proposed table edits you include or skip, then apply.
- [Records Table](https://viewership.ai/design/components/records-table.md): CRM-style AI spreadsheet with tags, sorting and configurable AI columns.
- [Filter Table](https://viewership.ai/design/components/filter-table.md): Status chips that filter a table in place.
- [Sidebar Nav](https://viewership.ai/design/components/sidebar-nav.md): Collapsible workspace and chat navigation with searchable history.
- [Search](https://viewership.ai/design/components/search.md): Command search with live filtering and an empty state.
- [Flowchart](https://viewership.ai/design/components/flowchart.md): Workflow trigger and condition cards on a dotted canvas with draggable steps.
- [Insight Cards](https://viewership.ai/design/components/insight-cards.md): Paged agent insights with scrubbable SVG charts and follow-up prompts.
- [Code Block](https://viewership.ai/design/components/code-block.md): Line-numbered code listing with copy, or a unified diff.
- [Fine-tune Card](https://viewership.ai/design/components/fine-tune-card.md): Compact inspector the agent adjusts, then hands back to you.
- [Selection Actions](https://viewership.ai/design/components/selection-actions.md): Select text and a floating toolbar rewrites it in place.
- [Agent Screen](https://viewership.ai/design/components/agent-screen.md): An agent's live screen with an expandable viewer and recording.

## Atoms

- [Button](https://viewership.ai/design/components/button.md): Pill-shaped action button in six variants and three sizes.
- [Glide Menu](https://viewership.ai/design/components/glide-menu.md): One highlight that glides to the hovered or focused row.
- [Entity Chip](https://viewership.ai/design/components/entity-chip.md): Inline reference to a client, person or record, as a monogram and name.
- [Value Pill](https://viewership.ai/design/components/value-pill.md): Inline badge that sets a value off from running text.
- [Shimmer](https://viewership.ai/design/components/shimmer.md): Label with a moving light sweep that shows the agent is working.
- [Stream Text](https://viewership.ai/design/components/stream-text.md): Text that streams in like model output, with a blurred edge and caret.
- [Chip](https://viewership.ai/design/components/chip.md): Monospace chip for code values and field names in text.
- [Status Pill](https://viewership.ai/design/components/status-pill.md): Tinted status label with a leading dot, in five tones.
- [Segmented Control](https://viewership.ai/design/components/segmented-control.md): Equal-width segments with a sliding thumb, as a radio group.
- [Switch](https://viewership.ai/design/components/switch.md): On/off toggle on a native checkbox, in two sizes and two tones.
- [Progress Ring](https://viewership.ai/design/components/progress-ring.md): Small progress ring with a count or glyph in the center.
- [Text Row](https://viewership.ai/design/components/text-row.md): Label on the left, value and optional meta on the right.
- [Overlay core](https://viewership.ai/design/components/overlay.md): Positioning, dismissal, focus-trap and roving-focus helpers for popovers, menus and dialogs.
- [Icon](https://viewership.ai/design/components/icon.md): Twenty Lucide glyphs as inline SVG, sized and labelled through props.