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 basic single-expand accordion, built from the accordion component.
Example of Accordion.
Two levels of accordion for a help centre, categories outside and questions inside, with independent open states and the question count in each category's name.
Active state button group with count, built from the button group component.
A date input that uses the phone's native date picker on touch devices and the segmented date field with a calendar on desktop, with one ISO value. Use this when the same form runs on phones and desktops and each should get the date control it is best at.
A date of birth that decides whether someone is old enough, with the exact date they become eligible, without ever blocking typing. Use this when a product or purchase has a minimum age and the person should learn when they will qualify.
A chat layout with a message log that stays scrolled to the newest message while replies stream, a jump-to-latest button, an empty state with suggestions and a footer for the input.
Example of AI Chat.
A chat message with user, assistant and system roles, an avatar slot, an actions row with a copy button and a timestamp.
Example of AI Message.
Example of Alert Dialog.
Alert dialog with icon, built from the alert dialog component.
An alert with default, destructive, info, success, warning and inverted tones, a title, a description and an action slot.
Example of Alert (status tones).
Every icon tile variant.
A circular handle for choosing an angle from 0 to 359 degrees, with wrap-around, markers and snapping, for gradients, shadows and rotation.
Example of Angle Slider.
A compass bearing control that shows the heading in degrees and as a cardinal point (N, NE, E and so on), snaps to 5 degrees and has quick buttons for the four directions.
An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.
Example showing a bidirectional animated beam effect.
Example showing an animated beam of light effect.
Example showing animated beams with multiple input points.
Example showing animated beams with multiple output points.
Example showing a unidirectional animated beam effect.
An animated gradient background which transitions between colors for text.
Example showing text with animated gradient backgrounds.
Second example showing text with animated gradient backgrounds.
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Example showing an animated grid pattern background.
A number whose digits roll like an odometer to the new value, with Intl formatting for currency, percent and compact notation.
Example of Animated Number Flow.
Radix tabs with a pill or underline indicator that slides between triggers and panels that fade in.
Example of Animated Tabs.
A collapsible card that documents one HTTP endpoint with its parameters, request example and responses.
Example of API Endpoint.
An ordered approver picker that leaves the requester out, needs at least one approver and numbers the steps. Use this when an approval workflow depends on who signs, and in what order.
Use this when an app listing shows screenshots: a drag-and-fling shelf with a caption under every screen and a phone or tablet switch that changes the frame shape.
A panel for content an assistant generates, with Preview and Code tabs, version stepping, copy, download and a streaming state.
Example of Artifact Panel.
A tree that loads each branch the first time it opens, with a busy row, a spoken status, an error state and a retry.
Example of the async tree.
Attachment button group with download action, built from the button group component.
A podcast-style audio player with play and pause, skip back and forward, a scrubber with chapter ticks, the current chapter and a speed control. Works with a real file or as a silent demo.
Example of Audio Player.
A background of blurred, slowly drifting colored light with vertical curtains, drawn with CSS layers.
Example of Aurora Background.
Render a complete, accessible form from a JSON Schema (or a zod schema through z.toJSONSchema): strings, numbers, booleans, enums, nested objects and arrays, with built-in validation and per-field overrides.
Example of Auto Form.