Components, blocks and original art for shadcn: rich surfaces, quiet motion, and orbs. A free library under MIT, with full access to the rest.
Six outlined link items in a grid, each with a Phosphor icon, title, full description and an arrow, for quick actions such as requesting a planet visit. It steps to two columns by container width.
App sidebar system with provider, menus, groups, sub-menus, rail and inset layout. Collapses offcanvas or to icons, writes open state to a cookie for defaultOpen, toggles with Cmd or Ctrl+B and is a Sheet on mobile.
Soft blue radial glow anchored to one edge of a positioned parent: top, right, bottom or left. Ships with SeamLine, a one-pixel overlay-blended rule for marking a panel edge.
Bars version of Signup Wizard: email and password, profile, preference checkboxes and a welcome step, validated with react-hook-form and zod and tracked by plain rail segments.
Single-row footer pinned dark: a brand wordmark, a row of six links and the copyright year, built on the Footer parts.
Loading placeholder: a rounded muted block with a pulse animation. Size and shape it with classes to stand in for text lines, avatars or cards while content loads.
Range slider on Base UI with a filled track and pill-shaped thumbs. Renders one thumb per array value, two when no array is given, in horizontal or vertical orientation.
Slim dark strip of five muted text wordmarks spread edge to edge in a wrapping row, named for screen readers by a hidden label while the row shows names only.
Compact SVG line chart from an array of numbers, with a currentColor stroke and fading area fill. Missing values break the line, one point draws a dot, and an aria-label exposes it as an image.
Loading indicator that spins the Phosphor spinner icon. It carries a status role and a Loading label so screen readers announce it, and it sizes to 16px by default.
Dark split section: a heading and two paragraphs on one side, and a full-bleed panel of nine painted gradient strips stepping from blue to coral under sandpaper grain on the other.
Single-column FAQ in split rows: each question sits left of its answer on wide screens, separated by rules. Copy is a fictional spaceflight booking guide.
Statistic list on Grid: each stat pairs a large value in the Hanken Grotesk display face with a label, shown plain, on a filled card panel, or with a rule down its left side.
Composable step indicator with list, item, trigger, indicator, title, separator and content parts. Choose numbered steps or progress bars and one of four rail inks; navigation is linear by default.
On/off switch on Base UI with a pill track and sliding thumb, in default and small sizes. Shows focus rings and invalid styling, and inverts its thumb colors in dark mode.
Semantic table parts for header, body, footer, rows, cells and caption, wrapped in a horizontally scrolling container. Rows highlight on hover and in a selected state.
Tabbed panels on Base UI with a pill-shaped default list, or a line variant that marks the active tab with a bar instead. Works horizontally or as a vertical side list.
Heading and description above a three-column grid of six muted quote cards, each with a short quote, a greyscale Cloud Shape avatar, name and role.
Multi-line text field on a soft filled ground that grows with its content through field sizing. Includes focus rings, disabled styling and invalid-state borders.
Text-only blog grid of six posts in three columns under a ruled top edge. Each post shows date, category, linked title, excerpt and a bold author name.
Centred blog section with a heading and intro over a three-column grid of posts. Each card shows cover art, date and author, a linked title and a one-sentence excerpt.
FAQ grid of nine short questions and answers in three columns under a heading and a support link. Built for brief answers that read at a glance.
Three plans in joined pricing cells with none featured, each listing the same four highlights with a check or a muted minus mark so the plans compare at a glance. Pairs with pricing-11.
Stacked toast notifications on Base UI with a Toaster provider and a shared toast manager. Toasts peek behind each other, expand on hover, swipe to dismiss and show type icons.
Two-state button on Base UI that fills when pressed. Offers default and outline variants in small, default and large sizes, and the variants are exported for reuse.
Group of toggles on Base UI that share variant and size through context. Set spacing to zero to join the items into one segmented control, laid out horizontally or vertically.
Hover and focus tooltip on Base UI with a provider, trigger and an inverted foreground-color popup with an arrow. Positions to any side, animates in and out, and styles nested keyboard hints.
Agent activity log: lines with an icon, title and timing, each marked running, error or pending. Running titles shimmer unless reduced motion is set, and steps expand through Collapsible.
Wide card with a two-line chart of views and unique readers, a date-range select, a legend and a dot on the busiest day. The views color changes between light and dark. Uses recharts 3.8.
Two-column FAQ with a short heading on the left and an accordion of five install and licensing questions on the right. Answers expand one at a time on click.
The shadcn/typeset stylesheet for prose inside a typeset container: paragraphs, headings, lists, tables and code. Adds docs, editorial and instrument presets; the last needs Instrument Serif installed.
Unbounded variable, a wide display face after Constructivist block lettering, bound to --font-unbounded-face. It is Neoconstruct's heading face and installs with anything that sets data-theme="neoconstruct".
Compact file-upload card with three accent-colored bar segments for uploading, processing and ready. The current segment pulses while its stage runs and holds still under reduced motion.
Two-plan pricing that sets a free tier with per-item usage fees against a featured paid tier that bundles them, with the fee or included amount in muted text after each metered feature.
A client hook for cart state: lines, quantity clamping, remove, clear and reset, plus totals with pluggable shipping and tax estimates. Exports helpers for minor-unit money formatting.
A client hook that posts a transcript to a chat endpoint and streams the reply over server-sent events. Accepts OpenAI or Anthropic shaped chunks; exposes send, stop, reset and load.
A client hook that writes text to the clipboard and reports copied for a set timeout, or failed until the next try. A late earlier write never overrides a newer one.
A client hook for faceted product lists: OR within a facet, AND across facets, price bands on number fields, sort options, results and a count of what each option would leave.
Narrow card with a radial ring showing progress toward a weekly listening goal, minutes in the center, the remaining track visible and a footer note. Client component on recharts 3.8.
A compact stats card for weekly installs: a large total, a hairline recharts line over eight weeks with only the latest point in the accent, and a change caption. Labels use Geist Mono; recharts is pinned to 3.8.0.
Compact weekly support metrics card with six figures in two columns, each with a change arrow and comparison text, kept level by a subgrid. Worsening changes show in red.
Vertical onboarding stepper in a card: each of four steps opens a panel with an input, a primary action and a do-this-later option; skipped steps keep an open ring instead of a check.