# Dowel

> Source-first React components for SaaS and AI products. 184 components and 51 blocks, installed as code you own rather than imported from a dependency. Built on Tailwind v4 and OKLCH design tokens, targeted at WCAG 2.2 AA.

Install: `npx @dowel-ui/cli add <name>` writes the component's source into your project.
Re-running is safe — files you have edited are never overwritten without `--overwrite`.

Generated from @dowel-ui/react@0.8.0.

## Start here

- [Everything, in one file](https://dowel-eight.vercel.app/llms-full.txt): the complete catalogue with descriptions, accessibility notes and conventions
- [Installation](https://dowel-eight.vercel.app/docs/installation)
- [CLI](https://dowel-eight.vercel.app/docs/cli)
- [Theming](https://dowel-eight.vercel.app/docs/themes)
- [Accessibility](https://dowel-eight.vercel.app/docs/accessibility)

## Foundation

- [button](https://dowel-eight.vercel.app/docs/components/button): Triggers an action or event, with variants for every level of emphasis.
- [direction](https://dowel-eight.vercel.app/docs/components/direction): Tells the component primitives which way the writing runs, so menus and sliders mirror with the rest of the page.

## Forms

- [animated-checklist](https://dowel-eight.vercel.app/docs/components/animated-checklist): A task list whose boxes fill with a bounce and whose done tasks fade and strike through, with an add row.
- [app-stack](https://dowel-eight.vercel.app/docs/components/app-stack): A pile of app icons that fans out on hover and opens into a multi-select picker whose icons fly to their tiles.
- [assignee-picker](https://dowel-eight.vercel.app/docs/components/assignee-picker): A pill of overlapping faces that opens a multi-select list of people; new faces fly into the stack.
- [calendar](https://dowel-eight.vercel.app/docs/components/calendar): A date grid for selecting a day, several days or a range.
- [checkbox](https://dowel-eight.vercel.app/docs/components/checkbox): A control for an on/off choice, with support for an indeterminate state.
- [combobox](https://dowel-eight.vercel.app/docs/components/combobox): A searchable single-select built on the ARIA combobox pattern.
- [confirm-typed](https://dowel-eight.vercel.app/docs/components/confirm-typed): Type the name to confirm — and be told, not ignored, when it does not match.
- [copy-button](https://dowel-eight.vercel.app/docs/components/copy-button): Copies a value to the clipboard and morphs its icon and label into a confirmation that reverts on its own.
- [cron-editor](https://dowel-eight.vercel.app/docs/components/cron-editor): A schedule as a cron expression, with a plain-language reading and the next runs.
- [date-picker](https://dowel-eight.vercel.app/docs/components/date-picker): A button that opens a calendar to pick a date or a date range.
- [dial](https://dowel-eight.vercel.app/docs/components/dial): A rotary dial input — a knob inside a filling arc with detent ticks — turned by drag, wheel or keys.
- [dot-morph-button](https://dowel-eight.vercel.app/docs/components/dot-morph-button): A pill button led by a dot that stretches into a bar on hover and keyboard focus.
- [drag-stepper](https://dowel-eight.vercel.app/docs/components/drag-stepper): A pill number stepper: tap − or + to step, or hold either one to stretch into a sweep and drag to scrub.
- [effect-button](https://dowel-eight.vercel.app/docs/components/effect-button): A Button with a hover and focus micro-interaction — slide-arrow, pulse, rotate, shake, glare, text reveal, expanding ring or clip corners.
- [expanding-search](https://dowel-eight.vercel.app/docs/components/expanding-search): A search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.
- [exposure-slider](https://dowel-eight.vercel.app/docs/components/exposure-slider): A camera-style exposure dial: a draggable ruler of notches under a fixed centre mark, with a value ring.
- [file-upload](https://dowel-eight.vercel.app/docs/components/file-upload): A dropzone over a real file input, plus the upload queue nobody ships.
- [form](https://dowel-eight.vercel.app/docs/components/form): Accessible field wiring that works with any form library, or none.
- [image-selector](https://dowel-eight.vercel.app/docs/components/image-selector): A photo grid with a Select mode: tick photos, see the count, share or delete them, and reset.
- [inline-confirm](https://dowel-eight.vercel.app/docs/components/inline-confirm): A destructive button that asks in place — it widens into Keep / Delete, then offers a timed Undo.
- [input](https://dowel-eight.vercel.app/docs/components/input): A single-line text field with size variants and native validation styling.
- [label](https://dowel-eight.vercel.app/docs/components/label): An accessible caption that associates text with a form control.
- [liquid-toggle](https://dowel-eight.vercel.app/docs/components/liquid-toggle): A switch whose knob squashes like a droplet as it travels, and can be dragged across.
- [magnetic-button](https://dowel-eight.vercel.app/docs/components/magnetic-button): A button that drifts toward the pointer — optionally with its label leaning further — and springs back when it leaves.
- [magnetic-select](https://dowel-eight.vercel.app/docs/components/magnetic-select): A honeycomb of round chips: choosing one grows it and magnetically shoves the rest apart, tilted, with a springy settle.
- [morph-button](https://dowel-eight.vercel.app/docs/components/morph-button): A button whose icon and label morph to an active state — toggles, transient confirmations and hover affordances.
- [notify-button](https://dowel-eight.vercel.app/docs/components/notify-button): A “notify me” toggle: the bell rings and the label grows elastically into the confirmation.
- [otp-input](https://dowel-eight.vercel.app/docs/components/otp-input): A one-time-code field drawn as a row of animated slots — paste, SMS autofill, masking and grouping included.
- [radio-group](https://dowel-eight.vercel.app/docs/components/radio-group): A set of mutually exclusive options.
- [range-dial](https://dowel-eight.vercel.app/docs/components/range-dial): A 24-hour circular two-thumb range — drag or key the start and end round a ticked clock face, with the duration in the middle.
- [reorder-list](https://dowel-eight.vercel.app/docs/components/reorder-list): A short list of people or things you put in order by dragging liquid pills, or with Space and the arrow keys.
- [scrubber](https://dowel-eight.vercel.app/docs/components/scrubber): A design-tool number field: drag across a labelled bar to scrub a value, step it from the keyboard, or type it.
- [secret-field](https://dowel-eight.vercel.app/docs/components/secret-field): An API key in its three states: shown once, hidden but revealable, and gone.
- [select](https://dowel-eight.vercel.app/docs/components/select): Picks one value from a short list of options.
- [selection-list](https://dowel-eight.vercel.app/docs/components/selection-list): A multi-select list of people with a liquid tick and an action that springs out from under it once someone is picked.
- [shortcut-recorder](https://dowel-eight.vercel.app/docs/components/shortcut-recorder): Press the keys you want: records a chord, platform-aware, and says when it clashes.
- [slide-to-confirm](https://dowel-eight.vercel.app/docs/components/slide-to-confirm): A track whose grip you slide to the end to confirm — bencho's wash-and-morph pill or SmoothUI's power-off slide — with a press-and-hold path.
- [slider](https://dowel-eight.vercel.app/docs/components/slider): Selects a value, or a range, from a continuous span.
- [slosh-slider](https://dowel-eight.vercel.app/docs/components/slosh-slider): A slider whose fill behaves like liquid: the knob jumps to the value while the fill springs after it, leaning as it moves.
- [social-selector](https://dowel-eight.vercel.app/docs/components/social-selector): Pick a social platform from a row of icons — a pill slides behind the choice and the caption links to the profile.
- [switch](https://dowel-eight.vercel.app/docs/components/switch): An immediate on/off toggle for settings that apply straight away.
- [tags-input](https://dowel-eight.vercel.app/docs/components/tags-input): A list of short values, where invalid entries stay visible instead of vanishing.
- [textarea](https://dowel-eight.vercel.app/docs/components/textarea): A multi-line text field, with optional auto-resize and a character count that knows when to stay quiet.
- [time-range-picker](https://dowel-eight.vercel.app/docs/components/time-range-picker): A time range whose value is an expression, so it stays relative across a reload.

## Overlays

- [account-menu](https://dowel-eight.vercel.app/docs/components/account-menu): An avatar that opens an account panel of collapsible sections — edit the profile, check recent orders.
- [context-menu](https://dowel-eight.vercel.app/docs/components/context-menu): A right-click menu that pops from the pointer with a spring and staggers its items in — same parts as Dropdown Menu.
- [dialog](https://dowel-eight.vercel.app/docs/components/dialog): A modal window that interrupts the user to gather a response.
- [drawer](https://dowel-eight.vercel.app/docs/components/drawer): A bottom sheet that can be dismissed by dragging it down.
- [dropdown-menu](https://dowel-eight.vercel.app/docs/components/dropdown-menu): A menu of actions revealed from a trigger, with submenus and selectable items.
- [gooey-popover](https://dowel-eight.vercel.app/docs/components/gooey-popover): A round trigger whose popover pours out of it, melted together by an SVG goo filter.
- [morph-surface](https://dowel-eight.vercel.app/docs/components/morph-surface): A dock that grows in place into a panel — a feedback form or a quick prompt — and shrinks back when done.
- [popover](https://dowel-eight.vercel.app/docs/components/popover): Rich floating content anchored to a trigger.
- [rich-popover](https://dowel-eight.vercel.app/docs/components/rich-popover): A popover card for an inline reference — heading or link, description, a meta chip and one call to action.
- [sheet](https://dowel-eight.vercel.app/docs/components/sheet): A panel that enters from an edge of the viewport for secondary content.
- [tooltip](https://dowel-eight.vercel.app/docs/components/tooltip): A short label revealed on hover or keyboard focus.

## Navigation

- [breadcrumb](https://dowel-eight.vercel.app/docs/components/breadcrumb): Where the current page sits in the hierarchy, and how to get back up it.
- [browser-tabs](https://dowel-eight.vercel.app/docs/components/browser-tabs): A miniature browser window whose tabs are a real tablist: a card-coloured leaf springs under the active tab, and tabs reorder by drag or keyboard.
- [canvas-toolbar](https://dowel-eight.vercel.app/docs/components/canvas-toolbar): A Figma-style tool rail: one active tool with a springy fill, a shape slot that swaps its tool from a flyout, and single-key shortcuts.
- [command](https://dowel-eight.vercel.app/docs/components/command): A searchable command palette, with groups and a ⌘K dialog variant.
- [create-menu](https://dowel-eight.vercel.app/docs/components/create-menu): A DropdownMenu with a morph flourish: a "+ Create" pill that grows in place into its menu panel.
- [focus-blur-links](https://dowel-eight.vercel.app/docs/components/focus-blur-links): A row of links where hovering or focusing one blurs and dims the rest, with an optional dashed bracket.
- [goo-tabs](https://dowel-eight.vercel.app/docs/components/goo-tabs): Dowel Tabs with a motion flourish: an icon bar whose pill stretches over the old and new tab, then snaps onto the new one, melted together by an SVG goo filter.
- [magnify-dock](https://dowel-eight.vercel.app/docs/components/magnify-dock): A macOS-style dock whose icons grow, lift and show a label as the pointer or keyboard focus passes over them.
- [pagination](https://dowel-eight.vercel.app/docs/components/pagination): Navigation between pages of a list.
- [radial-menu](https://dowel-eight.vercel.app/docs/components/radial-menu): A round button whose options fan out along an arc: press and drag onto one, click, or walk the ring with the keyboard.
- [sidebar](https://dowel-eight.vercel.app/docs/components/sidebar): The application's own navigation: a collapsible rail on a wide screen, an overlay on a narrow one.
- [stepper](https://dowel-eight.vercel.app/docs/components/stepper): A multi-step wizard's progress — connectors fill, finished steps draw a check, and each step's content slides in from the side it comes from.
- [tabs](https://dowel-eight.vercel.app/docs/components/tabs): Switches between panels of related content.

## Display

- [action-node](https://dowel-eight.vercel.app/docs/components/action-node): A workflow node card whose round action buttons spring out in an arc around its top-end corner on hover or from a More actions trigger.
- [aspect-morph](https://dowel-eight.vercel.app/docs/components/aspect-morph): A picture that smoothly reshapes between aspect ratios, picked from a segmented control with a sliding thumb.
- [avatar](https://dowel-eight.vercel.app/docs/components/avatar): An image representation of a user or entity with a graceful text fallback.
- [avatar-group](https://dowel-eight.vercel.app/docs/components/avatar-group): Overlapping avatars that spread apart on hover or keyboard focus, collapsing the rest into a "+N" count.
- [badge](https://dowel-eight.vercel.app/docs/components/badge): A compact marker for status, counts and categories.
- [book](https://dowel-eight.vercel.app/docs/components/book): A 3D book cover drawn in CSS that tilts, or swings open to reveal its first page, on hover and keyboard focus.
- [card](https://dowel-eight.vercel.app/docs/components/card): A surface that groups related content and actions into a single block.
- [card-spread](https://dowel-eight.vercel.app/docs/components/card-spread): A stack of cards that fans into an arc, row, corner fan, stamp arc, cascade, dealt hand or wheel on hover, focus or click.
- [card-stack](https://dowel-eight.vercel.app/docs/components/card-stack): A pile of cards you step through as a receding deck, or that fans out into an arc on hover and focus.
- [carousel-3d](https://dowel-eight.vercel.app/docs/components/carousel-3d): A 3D carousel of cards — a fanned arc or a CoverFlow path — with buttons, dots, arrow keys and swipe.
- [comment-bubble](https://dowel-eight.vercel.app/docs/components/comment-bubble): A canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.
- [expandable-cards](https://dowel-eight.vercel.app/docs/components/expandable-cards): Cards that open into a detail view — widening in place in a row, or growing out of a grid into a modal.
- [expandable-list](https://dowel-eight.vercel.app/docs/components/expandable-list): A list of compact rows — jobs, releases, people — each growing into a detail dialog out of its place in the list.
- [glow-card](https://dowel-eight.vercel.app/docs/components/glow-card): Card surfaces with a soft glow that follows the pointer, alone or continuously across a group.
- [image-accordion](https://dowel-eight.vercel.app/docs/components/image-accordion): Image panels in a row — the open one widens and shows its caption, the rest stand as narrow strips — opened by hover, focus or press.
- [image-metadata](https://dowel-eight.vercel.app/docs/components/image-metadata): An image with a row of actions and a details button that opens a metadata panel, lifting the image to make room.
- [invite-carousel](https://dowel-eight.vercel.app/docs/components/invite-carousel): Event invitations fanned out as tilted cards — the current one upright in front, its neighbours leaning behind — advancing on a timer or by hand.
- [island](https://dowel-eight.vercel.app/docs/components/island): A pill that morphs between views — idle, a call, a timer, a player — resizing around whatever it shows.
- [marquee](https://dowel-eight.vercel.app/docs/components/marquee): Scrolls its children in a seamless, endless loop — horizontal or vertical, at a set speed, pausing on hover and focus.
- [now-playing](https://dowel-eight.vercel.app/docs/components/now-playing): A compact music mini-player that expands in place, with a morphing play button, a like and a seek slider.
- [number-flow](https://dowel-eight.vercel.app/docs/components/number-flow): A number whose digits roll to each new value — counters, prices, percentages and compact figures, formatted by Intl.NumberFormat.
- [photo-stack](https://dowel-eight.vercel.app/docs/components/photo-stack): A pile of photos: flick the top one away and it springs to the back, or tap, key or button through them.
- [photo-tabs](https://dowel-eight.vercel.app/docs/components/photo-tabs): A photo with a floating bar of icon tabs; each tab swaps the photo.
- [pixel-avatar](https://dowel-eight.vercel.app/docs/components/pixel-avatar): A deterministic pixel avatar generated from a seed — crisp SVG, coloured from theme tokens, with a gentle shimmer.
- [product-card](https://dowel-eight.vercel.app/docs/components/product-card): A shop tile with image zoom, badge, half-star rating, discount pricing, a wishlist toggle and an add-to-cart confirmation.
- [reviews-carousel](https://dowel-eight.vercel.app/docs/components/reviews-carousel): Testimonials stacked in depth — the active review in front, the next ones receding behind — stepped through with buttons, indicators or arrow keys.
- [star-count](https://dowel-eight.vercel.app/docs/components/star-count): An animated star counter — plain or as a star button — with the stargazers' avatars beside it. The count is a prop; nothing is fetched.
- [swipe-carousel](https://dowel-eight.vercel.app/docs/components/swipe-carousel): Cards on a ring seen from the front — swipe, tap or step and the ring turns, so nothing ever leaves the frame.
- [switchboard-card](https://dowel-eight.vercel.app/docs/components/switchboard-card): A feature card illustrated by a grid of tiny lights — a lit pattern such as a word, or random flicker.
- [tilt-card](https://dowel-eight.vercel.app/docs/components/tilt-card): A card that tilts in 3D toward the pointer, with a glare that follows it and layers that float at their own depth, springing back flat on leave.
- [time-stack](https://dowel-eight.vercel.app/docs/components/time-stack): Cards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.
- [todo-tower](https://dowel-eight.vercel.app/docs/components/todo-tower): To-do cards stacked like bricks: tick one and it flicks away as the cards above drop; drag one and the stack sways.
- [tweet-card](https://dowel-eight.vercel.app/docs/components/tweet-card): A social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.

## Data

- [accordion](https://dowel-eight.vercel.app/docs/components/accordion): Vertically stacked sections that expand to reveal their content.
- [activity-feed](https://dowel-eight.vercel.app/docs/components/activity-feed): A chronological list of events, with a connecting timeline rail.
- [code-block](https://dowel-eight.vercel.app/docs/components/code-block): A block of code with a copy control, ready for any highlighter.
- [contribution-graph](https://dowel-eight.vercel.app/docs/components/contribution-graph): A GitHub-style year heatmap of daily counts — a keyboard-navigable grid with a tooltip per day.
- [data-table](https://dowel-eight.vercel.app/docs/components/data-table): Presentation for a TanStack Table instance: sorting, column visibility and pagination.
- [diff-viewer](https://dowel-eight.vercel.app/docs/components/diff-viewer): A diff you can style, and accept or reject hunk by hunk.
- [dither-area](https://dowel-eight.vercel.app/docs/components/dither-area): An area chart filled with dithered cells over a cell grid, with a date scrubber that swells the cells around it.
- [dither-bar](https://dowel-eight.vercel.app/docs/components/dither-bar): Stacked bars drawn in dithered cells that grow on change, with series highlighting on hover and a per-column readout.
- [dither-canvas](https://dowel-eight.vercel.app/docs/components/dither-canvas): The engine behind the dither charts: a DPR-capped, self-pausing canvas loop, token colours, a deterministic cell hash, springs, geometry and a keyboard scrubber.
- [dither-donut](https://dowel-eight.vercel.app/docs/components/dither-donut): A donut chart drawn in shimmering dithered cells, with wedges that pop out and sparkle on hover, focus or pin.
- [dither-funnel](https://dowel-eight.vercel.app/docs/components/dither-funnel): A conversion funnel of dithered stage bars that morph between periods, with overall and step conversion per stage.
- [dither-gauge](https://dowel-eight.vercel.app/docs/components/dither-gauge): A half-circle gauge drawn in dithered cells, one sweeping ring per metric, with a centre reading and metric switch.
- [dither-heatmap](https://dowel-eight.vercel.app/docs/components/dither-heatmap): A rows × columns intensity grid drawn in dithered tiles that morph between periods, with a keyboard-navigable cell readout.
- [dither-line](https://dowel-eight.vercel.app/docs/components/dither-line): A smooth monotone line over a drifting dithered gradient fill, with a keyboard-operable point scrubber.
- [dither-meter](https://dowel-eight.vercel.app/docs/components/dither-meter): A capacity bar drawn in dithered cells, split into categories that fill with a spring, with a category legend.
- [dither-scatter](https://dowel-eight.vercel.app/docs/components/dither-scatter): A bubble scatter drawn in dithered cells: floating bubbles sized by value that glide between data sets, with a per-point readout.
- [dns-record](https://dowel-eight.vercel.app/docs/components/dns-record): Add this record at your provider: parts copied separately, checked with what was found.
- [log-viewer](https://dowel-eight.vercel.app/docs/components/log-viewer): A streaming console with filtering, level facets and follow mode.
- [metric-delta](https://dowel-eight.vercel.app/docs/components/metric-delta): A headline number with a change indicator that knows which direction is good.
- [permission-matrix](https://dowel-eight.vercel.app/docs/components/permission-matrix): Roles across, permissions down, with inheritance, locked roles and one tab stop.
- [record-diff](https://dowel-eight.vercel.app/docs/components/record-diff): Field-level before and after, for audit entries, settings history and revisions.
- [table](https://dowel-eight.vercel.app/docs/components/table): Semantic table primitives for tabular data.
- [tick-progress](https://dowel-eight.vercel.app/docs/components/tick-progress): A percentage drawn as a row of waveform ticks under a big figure — a progress bar, or a slider with hover preview.
- [uptime-matrix](https://dowel-eight.vercel.app/docs/components/uptime-matrix): A day-by-day status history drawn in dithered tiles — operational, degraded, outage — with a keyboard-navigable readout and legend.

## Feedback

- [alert](https://dowel-eight.vercel.app/docs/components/alert): A callout that draws attention to an important message.
- [bar-loader](https://dowel-eight.vercel.app/docs/components/bar-loader): Indeterminate loading indicators made of bars — cascade, equalizer, wave physics, an indeterminate sweep and 17 more motions.
- [dots-loader](https://dowel-eight.vercel.app/docs/components/dots-loader): Indeterminate loading indicators made of dots — pulse, bounce, ripple, orbit and 21 more motions.
- [empty-state](https://dowel-eight.vercel.app/docs/components/empty-state): Shown where content would be, explaining why it is empty and what to do next.
- [grid-loader](https://dowel-eight.vercel.app/docs/components/grid-loader): Indeterminate loading indicators on a grid of cells — 48 patterns (and 17 SmoothUI alias names) that pulse or stagger, plus sequence, thinking and matrix.
- [meter](https://dowel-eight.vercel.app/docs/components/meter): A measurement against a capacity — quota, seats, spend — segmented by category.
- [notification-badge](https://dowel-eight.vercel.app/docs/components/notification-badge): A dot, rolling count or presence badge pinned to the corner of an icon, button or avatar.
- [progress](https://dowel-eight.vercel.app/docs/components/progress): Shows how far along a task is, or that one is running at all.
- [pull-to-refresh](https://dowel-eight.vercel.app/docs/components/pull-to-refresh): A sheet you pull down to refresh, with rubber-band resistance, a dot ring that fills as you pull and springs that carry the pull's velocity.
- [ring-loader](https://dowel-eight.vercel.app/docs/components/ring-loader): Indeterminate loading indicators made of rings and spinners — classic, sweep, radar, gears and 26 more motions.
- [session-expiry](https://dowel-eight.vercel.app/docs/components/session-expiry): The idle-timeout warning WCAG 2.2.1 asks for: warned, extendable, and not dismissable by accident.
- [shape-loader](https://dowel-eight.vercel.app/docs/components/shape-loader): Indeterminate loading indicators made of geometric shapes — flipping squares, hexagons, hourglasses, hearts and 31 more motions.
- [skeleton](https://dowel-eight.vercel.app/docs/components/skeleton): A shaped placeholder that holds layout while content loads.
- [spinner](https://dowel-eight.vercel.app/docs/components/spinner): An indeterminate loading indicator for buttons, panels and inline content.
- [sync-status](https://dowel-eight.vercel.app/docs/components/sync-status): Offline, saving, saved or failed — with the count of changes being held.
- [text-loader](https://dowel-eight.vercel.app/docs/components/text-loader): Indeterminate loading indicators made of words and interface shapes — shimmer, typing, skeleton, terminal and 15 more motions.
- [toast](https://dowel-eight.vercel.app/docs/components/toast): Brief, non-blocking messages with an imperative API callable from anywhere.

## Layout

- [collapsible](https://dowel-eight.vercel.app/docs/components/collapsible): A single section that opens and closes, without an accordion's set semantics.
- [separator](https://dowel-eight.vercel.app/docs/components/separator): A horizontal or vertical rule that divides content.

## AI

- [ai-action-ledger](https://dowel-eight.vercel.app/docs/components/ai-action-ledger): What an agent actually did, classified by what can be undone.
- [ai-agent-plan](https://dowel-eight.vercel.app/docs/components/ai-agent-plan): What an agent intends to do — including when it changes its mind mid-run.
- [ai-agent-status](https://dowel-eight.vercel.app/docs/components/ai-agent-status): A pill showing what an agent is doing, in words as well as colour.
- [ai-approval-request](https://dowel-eight.vercel.app/docs/components/ai-approval-request): Approve a tool call — after correcting the arguments the model got wrong.
- [ai-artifact](https://dowel-eight.vercel.app/docs/components/ai-artifact): A titled frame for something the model produced, with preview and code panes that slide along one axis and a copy action.
- [ai-branch](https://dowel-eight.vercel.app/docs/components/ai-branch): Alternative versions of a conversation turn — regenerated answers, edited prompts — with a wrapping pager between them.
- [ai-conversation](https://dowel-eight.vercel.app/docs/components/ai-conversation): The scrolling transcript container, with follow-on-new-content and a status region.
- [ai-disclosure](https://dowel-eight.vercel.app/docs/components/ai-disclosure): Tells a reader they are looking at AI, and what is actually known about it.
- [ai-extraction-review](https://dowel-eight.vercel.app/docs/components/ai-extraction-review): Check extracted fields against the document they came from, and decide each one.
- [ai-inline-completion](https://dowel-eight.vercel.app/docs/components/ai-inline-completion): Ghost-text suggestion inside a real textarea, accepted with Tab.
- [ai-loader](https://dowel-eight.vercel.app/docs/components/ai-loader): A labelled AI waiting indicator — thinking dots, an indeterminate bar or a thinking grid — with an optional elapsed-seconds counter.
- [ai-message](https://dowel-eight.vercel.app/docs/components/ai-message): One turn in a conversation, with role, avatar, actions and footer slots.
- [ai-model-selector](https://dowel-eight.vercel.app/docs/components/ai-model-selector): Picks the model a conversation runs on, with descriptions and availability.
- [ai-prompt-input](https://dowel-eight.vercel.app/docs/components/ai-prompt-input): The composer: auto-growing textarea, send-on-Enter, and a send/stop control.
- [ai-reasoning](https://dowel-eight.vercel.app/docs/components/ai-reasoning): A collapsible disclosure for the model's reasoning.
- [ai-response](https://dowel-eight.vercel.app/docs/components/ai-response): Assistant response text, with a streaming caret and a thinking indicator.
- [ai-sources](https://dowel-eight.vercel.app/docs/components/ai-sources): Inline citation markers and the source list they refer to.
- [ai-structured-output](https://dowel-eight.vercel.app/docs/components/ai-structured-output): An object arriving field by field from the model, without the layout jumping.
- [ai-suggested-value](https://dowel-eight.vercel.app/docs/components/ai-suggested-value): An AI-proposed value for any form control, pending until accepted and marked afterwards.
- [ai-suggestions](https://dowel-eight.vercel.app/docs/components/ai-suggestions): Prompt suggestion chips for a chat's empty state or follow-ups, arriving from the centre of the row outwards.
- [ai-token-usage](https://dowel-eight.vercel.app/docs/components/ai-token-usage): A gauge showing how much of the context window a conversation has used.
- [ai-tool](https://dowel-eight.vercel.app/docs/components/ai-tool): A collapsible record of a tool the model called, its arguments and its result.
- [command-bar](https://dowel-eight.vercel.app/docs/components/command-bar): A compact one-row prompt bar — auto-growing field, dictate toggle and send — composed from AI Prompt Input.
- [orb-face](https://dowel-eight.vercel.app/docs/components/orb-face): A cartoon assistant orb whose gaze follows the pointer, who blinks, and whose expression tells its state — listening, thinking, speaking, done or broken.

## Effects

- [cursor-follow](https://dowel-eight.vercel.app/docs/components/cursor-follow): A dot that trails the pointer on a spring inside a container and swells into a label over marked elements.
- [escape-button](https://dowel-eight.vercel.app/docs/components/escape-button): A novelty button that scoots away from an approaching mouse, then gives up after a few escapes.
- [folding-frame](https://dowel-eight.vercel.app/docs/components/folding-frame): A photo folded shut like a book in 3D — drag across it (or use the keys) to open the cover until it lies flat.
- [glass-bubble](https://dowel-eight.vercel.app/docs/components/glass-bubble): A draggable glass lens that refracts the content under it, with a specular highlight and chromatic fringing.
- [goo-ball](https://dowel-eight.vercel.app/docs/components/goo-ball): A decorative jelly ball you drag around a well: it stretches along its velocity and squashes against the walls.
- [gradient-orb](https://dowel-eight.vercel.app/docs/components/gradient-orb): An animated gradient orb — a rotating conic mesh with a dot screen, sheen and bloom — that can follow an AI state and a live audio level.
- [palette-generator](https://dowel-eight.vercel.app/docs/components/palette-generator): A row of swatches that melt together through a goo filter and pop back out in a new palette.
- [scramble-text](https://dowel-eight.vercel.app/docs/components/scramble-text): Text whose characters churn through random glyphs and resolve from the inline start, on hover, focus, mount or view.
- [scroll-reveal-text](https://dowel-eight.vercel.app/docs/components/scroll-reveal-text): A paragraph whose words brighten from dim to full as it scrolls through the viewport.
- [shader-transition](https://dowel-eight.vercel.app/docs/components/shader-transition): Transitions a frame between two states under a full-frame WebGL reveal — one raw-WebGL engine and sixteen presets (aperture, chroma, prism, SDF blobs and circles, noise, wipe, stripes, spiral…).
- [shimmer-text](https://dowel-eight.vercel.app/docs/components/shimmer-text): Text with a light band sweeping across it on a loop, or a blur-and-glide entrance as it arrives.
- [text-effect](https://dowel-eight.vercel.app/docs/components/text-effect): Text that animates in by character, word or line — blur, rise, mask, spring, centre-out, phrase builds and a wave, as 19 presets.
- [text-swap](https://dowel-eight.vercel.app/docs/components/text-swap): Text that animates from the old string to the new one when its value changes — fade through, shared axis X/Y/Z and per-word crossfade — with a TextRotate for cycling phrases.
- [typewriter-text](https://dowel-eight.vercel.app/docs/components/typewriter-text): Types text a character at a time behind a blinking caret — once, on a loop, or cycling through a list.

## Blocks

- [admin-dashboard](https://dowel-eight.vercel.app/docs/blocks/admin-dashboard): An administration console: the shell every admin page shares — navigation, breadcrumb, account menu — and the overview that is its front page, with what needs attention first.
- [admin-users](https://dowel-eight.vercel.app/docs/blocks/admin-users): A team administration table with filtering, sorting and per-row actions.
- [agent-console](https://dowel-eight.vercel.app/docs/blocks/agent-console): One agent run, watched: the plan it is working from, the approval it is blocked on, and the ledger of what it has already done.
- [ai-chat](https://dowel-eight.vercel.app/docs/blocks/ai-chat): A complete chat surface: transcript, reasoning, tool calls, sources and composer.
- [ai-dashboard](https://dowel-eight.vercel.app/docs/blocks/ai-dashboard): What the AI features cost and whether they worked: tokens, spend, failure rate, a breakdown by model, and the runs still going.
- [ai-workspace](https://dowel-eight.vercel.app/docs/blocks/ai-workspace): A whole AI application surface: conversations down one side, the active transcript with reasoning, tool calls and sources in the middle, and the context — window usage, attachments and a structured result — on the other.
- [analytics](https://dowel-eight.vercel.app/docs/blocks/analytics): An analytics page: headline metrics against the previous period, a series over time, and the breakdown that made it up.
- [billing](https://dowel-eight.vercel.app/docs/blocks/billing): A billing page: the current plan, metered usage against its limits, the payment method and the invoice history.
- [command-center](https://dowel-eight.vercel.app/docs/blocks/command-center): Operations at a glance: service health worst-first, open incidents by severity, capacity meters, a filterable log stream, and a command palette for every action an operator reaches for.
- [crm](https://dowel-eight.vercel.app/docs/blocks/crm): A sales pipeline: open value by stage, the deals in it with filtering and sorting, the win rate and cycle length, and the last few touches.
- [cta-banner](https://dowel-eight.vercel.app/docs/blocks/cta-banner): A compact banner call to action: headline, one line of copy and a single action.
- [cta-centered](https://dowel-eight.vercel.app/docs/blocks/cta-centered): A centred call to action with two actions on a muted band with a soft glow.
- [cta-split-image](https://dowel-eight.vercel.app/docs/blocks/cta-split-image): A two-column call to action whose copy and image slide in from either side.
- [dashboard](https://dowel-eight.vercel.app/docs/blocks/dashboard): An overview page with headline metrics and a recent activity feed.
- [faq-accordion](https://dowel-eight.vercel.app/docs/blocks/faq-accordion): Frequently asked questions as bordered cards, one answer open at a time.
- [faq-categorized](https://dowel-eight.vercel.app/docs/blocks/faq-categorized): Frequently asked questions in topic tabs, each topic an accordion of answers.
- [faq-searchable](https://dowel-eight.vercel.app/docs/blocks/faq-searchable): Frequently asked questions filtered by a search field as you type.
- [faq-tabbed-grid](https://dowel-eight.vercel.app/docs/blocks/faq-tabbed-grid): Frequently asked questions in category tabs, each category a grid of always-visible answers.
- [features-alternating](https://dowel-eight.vercel.app/docs/blocks/features-alternating): Feature rows that alternate copy and media from side to side, each sliding in from its own side as it scrolls into view.
- [features-bento](https://dowel-eight.vercel.app/docs/blocks/features-bento): A bento grid of features: a two-by-two lead cell carrying a visual — by default a small analytics panel whose bars grow in — among smaller cells.
- [features-icon-grid](https://dowel-eight.vercel.app/docs/blocks/features-icon-grid): A features section: a grid of cards, each an icon, a title and a sentence, rising into view as the page scrolls.
- [footer-mega](https://dowel-eight.vercel.app/docs/blocks/footer-mega): A mega footer: logo, four link columns and a newsletter sign-up, over a copyright and social bar.
- [footer-minimal](https://dowel-eight.vercel.app/docs/blocks/footer-minimal): A one-row footer: logo and copyright, a few links, and social links.
- [footer-newsletter](https://dowel-eight.vercel.app/docs/blocks/footer-newsletter): A site footer with a newsletter sign-up and social links beside four columns of links.
- [footer-simple](https://dowel-eight.vercel.app/docs/blocks/footer-simple): A site footer with the brand and social links beside three columns of links.
- [forgot-password](https://dowel-eight.vercel.app/docs/blocks/forgot-password): A password reset request, with a confirmation that does not leak account existence.
- [hero-grid](https://dowel-eight.vercel.app/docs/blocks/hero-grid): A centred hero over a grid of squares that light up under the pointer.
- [hero-minimal](https://dowel-eight.vercel.app/docs/blocks/hero-minimal): A quiet hero: a headline whose letters draw together, one line of copy and a text link.
- [hero-perspective-grid](https://dowel-eight.vercel.app/docs/blocks/hero-perspective-grid): A centred hero over a tilted 3D plane of tiles that light up under the pointer.
- [hero-product](https://dowel-eight.vercel.app/docs/blocks/hero-product): A centred hero with an announcement, headline and two calls to action over a large product screenshot.
- [hero-split-image](https://dowel-eight.vercel.app/docs/blocks/hero-split-image): A two-column hero with a headline, reviewer avatars, a star rating and calls to action beside an image.
- [hero-spotlight](https://dowel-eight.vercel.app/docs/blocks/hero-spotlight): A dark hero lit by a spotlight beam that opens as it scrolls into view.
- [login](https://dowel-eight.vercel.app/docs/blocks/login): A sign-in form with validation, social providers and a busy state.
- [logo-cloud-simple](https://dowel-eight.vercel.app/docs/blocks/logo-cloud-simple): A heading, a line of copy and a still grid of customer logos, dimmed until hovered or focused.
- [logo-grid-tooltips](https://dowel-eight.vercel.app/docs/blocks/logo-grid-tooltips): A panel of grayscale logos that lift into colour and name themselves in a tooltip on hover or focus, in three to six columns.
- [logo-links-marquee](https://dowel-eight.vercel.app/docs/blocks/logo-links-marquee): A heading over an endless row of large, linked logos that pop in one after another and tilt on hover, with a pause control.
- [logo-marquee](https://dowel-eight.vercel.app/docs/blocks/logo-marquee): A heading over a quiet, dimmed marquee of logos with a named speed, a direction and a pause control.
- [onboarding](https://dowel-eight.vercel.app/docs/blocks/onboarding): A setup checklist: what is done, which step is current, and what is blocked and why.
- [pricing](https://dowel-eight.vercel.app/docs/blocks/pricing): A pricing section with plan cards and a monthly/yearly toggle.
- [pricing-single-plan](https://dowel-eight.vercel.app/docs/blocks/pricing-single-plan): One plan with every feature, under a monthly/annual switch with a price that rolls.
- [pricing-three-tier](https://dowel-eight.vercel.app/docs/blocks/pricing-three-tier): Three plans side by side, the middle one featured, under a monthly/annual switch with prices that roll.
- [pricing-two-tier](https://dowel-eight.vercel.app/docs/blocks/pricing-two-tier): A free plan beside a featured paid one, under a monthly/annual switch with prices that roll.
- [settings](https://dowel-eight.vercel.app/docs/blocks/settings): A settings page with a profile form, immediate toggles and a danger zone.
- [signup](https://dowel-eight.vercel.app/docs/blocks/signup): An account creation form with a password strength hint and terms acceptance.
- [stats-grid](https://dowel-eight.vercel.app/docs/blocks/stats-grid): A heading over a row of big figures, each with a label and a line of context, whose digits roll up from zero as the row scrolls into view.
- [stats-trend-cards](https://dowel-eight.vercel.app/docs/blocks/stats-trend-cards): Metric cards with an icon, a figure that rolls up from zero, a label, a line of context and a trend stated in words.
- [team-carousel](https://dowel-eight.vercel.app/docs/blocks/team-carousel): A large two-tone heading over a swipeable carousel of team member cards — avatar, name, role and a line under a divider — with previous and next buttons.
- [team-grid](https://dowel-eight.vercel.app/docs/blocks/team-grid): A heading over a grid of team members — a large portrait, name, role, location and bio — rising in one after another.
- [testimonial-rotator](https://dowel-eight.vercel.app/docs/blocks/testimonial-rotator): One large quotation at a time, rotating on a timer shown by a filling indicator, with a stop/start control.
- [testimonial-spotlight](https://dowel-eight.vercel.app/docs/blocks/testimonial-spotlight): A heading beside one testimonial at a time, stepped through with previous and next.
- [testimonial-star-grid](https://dowel-eight.vercel.app/docs/blocks/testimonial-star-grid): Reviews in a grid, each with a star rating, the quotation and its author.