Accessible React and Tailwind CSS v4 components, blocks, templates, charts and themes for shadcn/ui, with keyboard, screen reader, reduced motion and dark mode support on every item, and an MCP server for AI coding agents.
A simple signup form with social providers.
Example of Signup 05.
Example of Skeleton.
Skeleton loader for a card grid, built from the skeleton component.
Use this when a carousel holds many links or buttons: a "Skip carousel" link that appears on focus before it, and a labelled landmark after it that takes focus, so keyboard users are not forced through every slide.
Example of Slider.
Use this when impressions matter: a looping scale carousel that reports each slide once after it has been selected for a second, only while the tab is visible, and never for a slide that was only scrolled past.
Small size alert dialog with media (icon), built from the alert dialog component.
Tabbed code samples in several languages with syntax highlighting, a copy button and a remembered language choice.
Example of Snippet Tabs.
Example of Sonner.
A tree whose rows reorder and nest by drag and drop, or from the keyboard with Alt and the arrow keys, with spoken feedback.
Example of the sortable tree.
A small SVG line chart of a numeric series with an optional dot on the last value.
Example of Sparkline.
A product or device specification sheet in grouped vertical label-over-value cells that wraps to one column in narrow containers, not narrow viewports.
A floating button that fans out three to six related actions as a menu, with arrow-key navigation, Escape and outside-press to close.
A create button that fans out Note, Photo and Scan actions, dims the page behind it, closes on Escape or a press outside and announces the chosen action. Use this when one screen can create several kinds of thing and the create button should stay a single control.
Example of Speed Dial.
A single-element loading ring drawn with a conic-gradient mask, with a polite status role.
Example of Spinner.
Resizable panels with minimum, maximum and collapsible sizes, keyboard separators that report their size, and drag that reverses in right-to-left layouts.
Example of Splitter.
A splitter that lays its panes side by side on wide screens and stacks them top over bottom on narrow ones, keeping the same panels and sizes.
A navigator, list and detail layout with three resizable panes where each handle only trades space with its neighbour and every pane keeps a minimum.
A card with a soft radial highlight that follows the pointer.
Example of Spotlight Card.
Star button with count, built from the button component.
A single figure with a title, prefix, suffix, precision, locale grouping, a custom formatter, a tone and a loading state.
Example of Statistic.
A ranked list of statistics where each row shows its share of the total as a number and a thin bar, sorted largest first with a cap and an Other row.
A colored dot next to a text label that shows online, busy, away or offline status.
Example of Status Dot.
Text that shows a blinking caret while a reply arrives, and can type out finished text at a set speed for demos and replays.
Example of Streaming Text.
Success alert, built from the alert component.
Starter or follow-up prompts shown as wrapping pills, a single scrolling row, or cards with descriptions, with loading and refresh states.
Example of Suggestion Chips.
Tabs whose panels sit in a scroll-snapping row so a swipe changes tab natively, with an indicator that follows the finger and full WAI-ARIA tab keyboard support.
Example of Swipe Tabs.
A feed with For you and Following tabs whose panels swipe sideways, where each panel keeps its own scroll position and the selected tab is remembered while you switch. Use this when a phone feed has two or three views of the same kind of content that people flick between.
A profile with Posts, Replies and Likes tabs that show counts in their names, update the counts when content changes and swipe between panels under a fixed header. Use this when a profile or account screen has several lists of different things and each has a count worth showing.
Example of Switch.
Switch group, built from the switch component.
Bottom navigation for three to five destinations in four looks (iOS, Material, pill, glass) with badges, safe-area padding and aria-current.
Example of Tab Bar.
Example of Table.
An "On this page" list that marks the section in view and scrolls to a heading when a link is chosen.