Components and page sections for React, Astro and plain HTML. One source, one style, dark mode included. Install them with the shadcn CLI or copy the code.
npx shadcn@
56 so far, in React, Astro and plain HTML, each with every state and checked for WCAG 2.2 AA.
An action, or a link that looks like one. Six variants, four sizes.
A short status or count next to text.
Use lowercase letters, numbers and dashes.
A text field with a 3:1 border and an invalid state.
A multi-line field that grows with its content.
The visible name of a field.
A native checkbox in the themes.dev UI style. No JavaScript.
An on/off setting: a native checkbox with role=switch. No JavaScript.
Teammates can edit every project in this workspace.
A bordered panel with a title, description and footer.
themes.dev UI
Components in black and white.
A hairline between groups, horizontal or vertical.
A message on the page, neutral or destructive.
Search with ⌘K or /
A keyboard key or shortcut.
A photo, or initials when there is none.
Three pages changed since the last deploy.
Twelve events this week, most of them builds.
Name, domain and who can see the project.
Billing is managed by the workspace owner.
Today: 4 deploys.
This week: 23 deploys.
This month: 81 deploys.
Panels behind a row of tabs, or page links that look like tabs. Arrow keys, Home and End.
A modal on the native dialog element: focus stays inside, Escape and the backdrop close it, focus returns to the trigger.
A menu button on the native popover: arrow keys, Home, End and type-ahead, checkbox items, Escape returns focus.
A native select in the field style, with groups, a placeholder and disabled options. No JavaScript.
A short label on hover and keyboard focus. Stays while hovered, Escape hides it (WCAG 1.4.13).
Short confirmations that announce themselves, pause while hovered and close on their own. Above open dialogs.
Native radios in a fieldset, with hints: one Tab stop, arrow keys choose. No JavaScript.
Page links with gaps: first, last, the current page and its neighbours; the ends turn off.
Where the page sits: a nav with an ordered list and the current page marked.
A loading placeholder with a slow sheen that stands still under reduced motion.
| Author | Status | ||
|---|---|---|---|
| main | Ada Lovelace | Live | 48 |
| pricing-copy | Grace Hopper | Preview | 121 |
| fix-nav | Alan Turing | Failed | 17 |
| docs | Ada Lovelace | Preview | 63 |
A data table with a caption, right-aligned numbers and sortable columns (aria-sort). Scrolls in its own box.
Pick a GitHub repository; every push to main deploys.
Point a CNAME at your project and the certificate follows within minutes.
Teammates get edit rights on every project in the workspace.
Sections on native details, one open at a time if you like. Keyboard and find-in-page, no JavaScript.
A labelled progress bar, or a sweep while the amount is unknown that stands still under reduced motion.
A native range input with a filled track and a live value. Arrows, Page Up/Down, Home and End.
A non-modal panel next to its trigger on the native popover: focus moves in and back, Escape and outside clicks close it.
A command palette: filter as you type, arrows and Enter, grouped commands, ⌘K or Ctrl+K to open.
A search input in a role=search form, with a / shortcut and a clear button.
A docs sidebar: groups of links, the current page marked, collapsible groups on native details.
A side sheet on the native dialog: slides in from its edge, keeps focus inside, Escape and the backdrop close it.
Links as rows with a line under the title and a chevron; the whole row is the target.
No projects yet
Connect a repository and your first deploy starts right away.
No deploys match “pricng”
Check the spelling, or clear the filters.
Nothing here yet, or no results: a mark, what is going on, what to do, announced when it replaces results.
A topic or an active filter: static, a link, or removable with focus moving to the next tag.
12 deploys
Toggle chips, a sort select and a live result count; Clear turns every filter off.
6 of 12 deploys
The Filters button of a phone layout: the active count on the button, checkbox groups in a side sheet, Clear all and Show results.
Progress through a flow: done, current (aria-current=step) and to come; horizontal when there is room.
Minus, a number field and plus as one control; the buttons turn off at the ends.
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://northwind.example',
trailingSlash: 'always',
});npx shadcn@latest add https://www.themes.dev/ui/r/code-block.jsonCode with a filename bar and Copy, in a focusable scroll box that shades its edges.
A swipeable row of cards with Previous and Next that turn off at the ends. No autoplay.
Pick a weekday; we deploy at 09:00.
The native date input in the field style, or a from–to range that keeps the end after the start.
A row of controls that is one Tab stop; arrows move. Toggle buttons, and a "Was this helpful?" variant.
npx shadcn add @caseroom/copy-buttonCopies a value, an element's text or a whole page (its markdown), then says Copied for a moment.
Field notes · 6 November
A compositor reached for type without looking. Each letter had a fixed place in the case, the common ones closest to the hand.
When a box ran empty, the job stopped. So the room was sorted again every evening, ready for the morning's first line.
Listen to an article: the browser's own speech reads it, with pause, resume and stop. Nothing leaves the page.
The page in other languages as links with lang and hreflang, behind one button; the current one is marked.
You need a repository with a build command and an account on the free plan.
Pick the repository and the branch to deploy. Every push to it builds a new version.
Each pull request gets its own link, so a reviewer sees the change before it ships.
Promote a build to production. The previous one stays a click away if you need it back.
Point a CNAME at your project; the certificate is issued for you within a minute.
A page's sections as links; the one you are reading is marked while you scroll.
Deploys run on every push. Read how previews work before you invite your team.
See all integrationsStatus page (opens in a new tab)Inline in text, standalone with an arrow, or external with an arrow out and a new-tab note for screen readers.
Twenty-four icons on a 16px grid with a 1.5px stroke, decorative unless labelled.
| Label | Value |
|---|---|
| Jun | 24 deploys |
| Jul | 31 deploys |
| Aug | 18 deploys |
| Sep | 42 deploys |
| Oct | 57 deploys |
| Nov | 63 deploys |
Columns with their values on top and labels under them; the same data in a table for screen readers.
A poster with one Play button; native controls and captions once it plays. Nothing plays by itself.
A location whose map loads from OpenStreetMap only when asked; the address works as a link without it.
Data
Values on the bars, and a table for screen readers.
Nov 2 · 5 min
Picture, kicker, the title as the one link, a line and the meta; standard, compact, wide and feature.
Changelog
Twelve releases, two new components and a faster build.
Pricing
Start free and pay when the second person joins.
The head of a page section: a kicker in words, the heading, a line or two and an optional action.
Native radios drawn as one pill track, like a billing-period toggle. One Tab stop, arrows choose.
3 results for “keys”
Panels behind a row of tabs. Arrow keys move between tabs, Home and End jump to the ends.
Show a key or a shortcut, such as ⌘K for the command menu, next to the action it runs.
One Tab stop for a row of controls; the arrow keys move between them.
An announced count, then ranked results with the address and the match marked in each snippet.
One line at the top of the site on an inverted ground, a read-more link and a close button.
Whole page sections, built from the components. Their structure comes from the patterns we measured on thousands of real sites in The UI Index.
The opening section: h1, one sentence, two actions and an install command; compact for an inner page.
Plans side by side; the featured plan inverts, an enterprise plan can run as a wide row under them.
Questions as native details: keyboard, find-in-page and no JavaScript.
Brand, links and actions, sticky; below 1024px they fold into a Menu panel. Inline or centred.
Brand, link columns and a legal row; on the page or as an inverted band that closes it.
A heading, an email field with its button attached and a note on how often you send.
Name, email, topic and message with visible labels and native validation.
One line on who uses it, then the logos at one height and one colour, in rows that wrap evenly.
Email and password with autocomplete hints, a show/hide toggle, keep me signed in, reset and sign-up links. The full auth flow is in Flightdeck.
A home icon and the levels on one line with chevrons; a long current page truncates instead of wrapping.
A row of image cards with a title, a line and a link that scrolls sideways; Previous and Next turn off at the ends.
Your product against its alternatives, one column each with ticks; your column drawn out, the head held while the rows scroll, in a scroll box of its own.
A simple table: caption, header held while the rows scroll, sideways scroll in its own box on a narrow screen; person and link columns.
Brand, a row of links and one primary button; under 672px of its own width the links fold into a Menu disclosure (Escape closes it).
An app sidebar: product mark, links with icons, the current one marked with aria-current, settings pinned at the bottom.
Two or three cards with icon, title and text; on hover and focus the card lifts and the arrow slides; the whole card is one link.
Cards that each lead to a collection: icon, title, one line and an arrow that moves on hover; the whole card is one link.
A confirm dialog behind a trigger button: title, one paragraph, Cancel and the confirm button. Destructive actions get the destructive button.
A row of text links with the current page marked (aria-current, underlined); in a narrow block it scrolls sideways instead of wrapping.
Previous and next with icons, page numbers with a gap, the current page marked and the ends disabled, with a line about what is shown.
A heading and two lines of text on a quiet surface, nothing else; three across, stacked on narrow widths.
A short heading and one line in a centred panel, then the search field with its clear button and / shortcut.
A card with a photo on one side and a heading, a short text and a primary button on the other; the photo goes on top on a narrow card.
themes.dev UI uses the CSS variable names of shadcn/ui. Change them and every component follows, in light and dark. Any shadcn theme works on themes.dev UI, and the themes.dev UI theme works on shadcn components.
Two things are stricter than the usual default: field borders have 3:1 contrast and focus is a solid ring, so WCAG 2.2 AA holds out of the box.
npx shadcn@latest add https://www.themes.dev/ui/r/theme.json --background--foreground--primary--secondary--muted--accent--border--input--ring--destructiveBlack and white is the default. The Ink preset adds one colour, ink blue, to what you act on: primary buttons, checked controls and the focus ring. Grounds, borders and the red for errors stay as they are.
npx shadcn@latest add https://www.themes.dev/ui/r/theme-ink.json