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.
Example of Table Of Contents.
A modern tablet drawn in CSS with an aluminum frame, thin bezel, front camera, status bar and home indicator, in landscape or portrait. Children render as the screen at tablet resolution, scaled to fit.
Example of Tablet Frame.
Table with footer, built from the table component.
Example of Tabs.
Tabs that render a panel only when its tab is first opened and then keep it mounted, so input and scroll survive tab trips, or throw it away when keepAlive is off.
Tabs whose active tab lives in location.hash, so links open the right tab, reload keeps it and Back steps through tabs, with the first render always on the first tab.
The settings-page layout with a vertical tab list on the left, ArrowUp and ArrowDown navigation, a heading at the top of each panel and stacking on narrow screens.
A sortable tree that refuses any move, by pointer or keyboard, that would make it deeper than the allowed number of levels, and says so. Use this when menus or categories must stay shallow.
A pick list for the sections of a document template where required sections cannot be removed, with a numbered preview of the result. Use this when users assemble a report or contract from standard sections.
An implementation of the MacOS terminal. Useful for showcasing a command line interface.
Example showing a terminal with animated text.
Example showing a terminal with animated text and custom delays
Example of Textarea.
A status line for an assistant that is working, with dots, bars, wave or shimmer animation, rotating labels and an optional timer.
Example of Thinking Indicator.
A leave request range that counts only working days, takes out public holidays, compares them with the remaining balance and refuses a request that overdraws it. Use this when leave is taken in days off work and the balance is charged only for working days.
Toast with action button, built from the sonner component.
Toast with close button on top-right, built from the sonner component.
Toggle buttons with outline variant, built from the toggle component.
Example of Toggle.
Example of Toggle Group.
The Grid, List, Board view switcher: a labelled single-choice group that can never be empty, with icon buttons that have text names and an announced change.
Toggle group with custom spacing, built from the toggle group component.
A collapsible card for one AI tool call, showing its name, status and duration, with the input and result as formatted JSON.
Example of Tool Call Card.
An abbreviation as a semantic abbr element with its meaning in the title, the accessible description and a focus-reachable tooltip, for the first use of a term.
Example of Tooltip.
Tooltip on disabled button with wrapper, built from the tooltip component.
A presence or status dot that is never only a colour: a focusable image named with the status in words, plus a tooltip with optional detail.
Tooltip with icon trigger, built from the tooltip component.
Two lists with buttons between them to move items across, with search, select-all, move-all, disabled items and spoken results.
Example of the transfer list.
An ARIA tree with roving focus, arrow-key navigation, typeahead, single or multiple selection and a headless hook, in one file.
Example of the tree view.
A slim app bar showing days left in a trial with a progress line and an upgrade action, urgent in the last three days.
An app shell header with a trial bar computed from the trial end date, that hides for paying customers, turns urgent in the last three days and says ended after expiry.
Example of Trial Bar.
Incoming and outgoing rows separated by nothing but the align prop.
Example of Typography.
A snackbar that says a new version is ready with Reload and Later buttons, that does not time out because the choice matters, and that is announced once. Use this when a service worker has downloaded a new version and the person decides when to reload.
Run a callback on every animation frame with the elapsed time, and pause it with a flag, cleaning up its frame request on unmount.
Run an async function and get its status, data and error, where only the latest call may update state, and nothing updates after unmount.
Ask the browser to confirm before the tab closes or reloads while there is unsaved work, and switch the guard off the moment it is saved.
Know which named breakpoint is active (Tailwind defaults or your own) and ask isAtLeast or isBelow, with a server default.
Send and receive messages between tabs, windows and iframes of the same origin, with the latest message in state and a cleanup on unmount.
Call a handler when a pointer press lands outside one or more elements, for closing menus, popovers and inline editors.
Copy text to the clipboard with a copied flag that resets after a delay, an error state and a fallback for pages where the Clipboard API is blocked.