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 showing an autorotating, interactive WebGL globe.
Go back link button, built from the button component.
A month calendar where each click marks a day done or not, computing the current and the best streak and refusing future days. Use this when a habit or practice is logged day by day and the run of consecutive days matters.
A small dependency-free tokenizer that highlights JSON, shell, JS/TS, Python, Go, HTTP and .env snippets.
A calendar with dots under public holidays and a list of the holidays in the visible month, read from the day you focus or pick. Use this when planners need to see which days are public holidays before choosing dates.
Horizontal button group with primary and secondary labels, built from the button group component.
Horizontal resizable layout, built from the resizable component.
An inline code element for a function or type that shows its signature, a one-line description and a reference link in a hover card on hover or focus.
Example of Hover Card.
Hover card with an image and text content, built from the hover card component.
A square tile that gives icons a consistent surface, in outline, elevated, soft, solid and framed styles.
Example of Icon Tile.
A full-screen photo viewer with pinch and double-tap zoom, swipe sideways to change photo, swipe down to close, arrow keys, buttons and a spoken position.
Example of Image Viewer.
Inbox empty state, built from the empty component.
A tab bar whose Inbox tab shows an unread count that reads aloud, updates as messages arrive or are read, caps at 99+ and announces new messages politely. Use this when a tab needs to show unread or pending counts that change while the app is open.
A status-page style banner for a live incident with the severity written out, a title, a newest-first update timeline and one action.
Example of Incident Banner.
A scheduled maintenance banner that changes by the clock from upcoming, with a start countdown, to in progress and to completed, without any manual update.
(No description)
Text that turns into a field in place with confirm and cancel buttons, validation, an async save and focus returned to the text afterwards.
Example of Inline Edit.
A page heading that edits in place, refuses an empty name and keeps the browser tab title in sync with what was saved.
An inline rename that checks the name against existing ones when you save, ignoring case and the item's own current name, and says which name clashes.
Inline horizontal radio group, built from the radio group component.
Inline loading text with spinner, built from the spinner component.
Example of Input.
Input group demonstrating label usage, built from the input group component.
Input group with prefix icon, built from the input group component.
Example of Input OTP.
Package-manager tabs for a CLI command (pnpm, npm, yarn, bun) with a copy button. Remembers the reader's choice and keeps every instance on the page in sync.
Example of Install Tabs.
A keyboard key primitive for rendering shortcuts, with size variants and a KbdGroup helper for multi-key combinations.
Example showing keyboard keys at different sizes and grouped into shortcuts.
A KPI that counts up to a new value, skips the animation for reduced motion, and announces only the final value once.
A KPI card whose period switch recomputes the value and the change against the previous period, announcing the new figures politely.
Example of Label.
A labelled form field that shows the chosen language in its own script and opens a searchable bottom-sheet list, with the native name and the English name for each option. Use this when a phone form or settings screen asks for a language or locale from a list too long for radio buttons.
A notched laptop drawn in CSS that shows children or an image on its screen and can open its lid on scroll.
Example of Laptop Frame.
A full-screen app launcher overlay with a search field, paged app grid and page dots.
The mobile list row and its grouped container: leading visual, title, subtitle, trailing value, chevron, in an inset-grouped or plain edge-to-edge style.
Example of List Row.
A simple login form.
Example of Login 01.
A two column login page with a cover panel.
Example of Login 02.
A login page with a muted background.