# shadcn.io > shadcn.io is a registry of shadcn/ui-style components, blocks, examples, templates and icons for React, Vue, Svelte and Solid, written in TypeScript and styled with Tailwind CSS v4. React components run on Base UI, Radix UI, React Aria and Ark UI, Base UI being the default; Vue, Svelte and Solid run on Ark UI. Code installs with the shadcn CLI, or an AI agent adds it through the shadcn.io MCP server. shadcn.io is an independent project, not the official shadcn/ui by @shadcn (https://ui.shadcn.com). It follows shadcn/ui's model and uses the same CLI and theme tokens, so its components work in a shadcn/ui project, and the code lands in your project for you to edit. Every component is accessible (built on headless libraries that follow the WAI-ARIA patterns for focus, keyboard and screen readers), works in light and dark and in your theme, and supports right-to-left layouts. What's on the site: - 174 components for React, on each of its four UI libraries, and 168 for Vue, Svelte and Solid, on Ark UI. - 11 utilities and 35 React hooks. - 6,181 blocks (page sections: heroes, pricing tables, dashboards, settings pages and more) in 56 categories. - 1,103 examples in 53 galleries. - 70 charts on TanStack Charts for every framework; React also has the Recharts originals. - 35 animated buttons, 97 text effects, 100 backgrounds and 100 shaders. - 14 premium templates (complete Next.js sites) and 215 open-source templates from the community. - 294k icons from 222 icon libraries. - 500 DESIGN.md files for AI agents, each an interpretation of a real brand's design language. - 382 free tools that run in the browser. What's free and what's Pro: - Without an account: every page, every live demo, the tools and the DESIGN.md files. - With a free account (Google or GitHub): the code and install command of every component, utility, hook, example and chart; the icons; and the free animated pieces (9 of the 35 animated buttons, 10 of the 97 text effects, 10 of the 100 backgrounds and 19 of the 100 shaders). - With Pro: every block, the 14 premium templates, the MCP server (22 tools) and every animated piece. Three licenses, each monthly, yearly or lifetime: - Individual: $49 a month, $389 a year or $899 once; one seat, for personal and open-source projects. - Team: $99 a month, $789 a year or $1,899 once; up to 5 seats, commercial use included. - Organization: $199 a month, $1,589 a year or $3,899 once; unlimited seats, commercial use included. How code gets into a project: - React: with the shadcn CLI. Each component's page shows its command. To install by name, register the registry in `components.json` and put your token (on your dashboard, https://www.shadcn.io/dashboard/account) in `SHADCNIO_TOKEN` in `.env.local`: ```json { "registries": {"@shadcnio":{"headers":{"Authorization":"Bearer ${SHADCNIO_TOKEN}"},"url":"https://www.shadcn.io/r/{name}.json"}} } ``` Then `npx shadcn@latest add @shadcnio/button` installs Base UI's version; `@shadcnio/radix/button`, `@shadcnio/aria/button` and `@shadcnio/ark/button` install Radix UI's, React Aria's and Ark UI's. - Vue, Svelte and Solid: each component's page lists its packages and the files to copy. - Any framework, with Pro: connect the MCP server (https://www.shadcn.io/api/mcp, your token as `?token=`) to Claude Code, Cursor, VS Code or any of 38 clients, then ask your agent for a component, a block or an icon. It reads your project's framework and UI library and installs the right version. Docs pages are also served as Markdown, at their URL plus `.md` (https://www.shadcn.io/ui/button.md); the links below to components, utilities, hooks, charts, the animated pieces and the MCP docs point to those. ## Components - [All components](https://www.shadcn.io/ui.md): 174 components for React on Base UI, each also on Radix UI, React Aria and Ark UI. - [React components on Radix UI](https://www.shadcn.io/ui/radix): the same 174 components, built on Radix UI. - [React components on React Aria](https://www.shadcn.io/ui/aria): the same 174 components, built on React Aria. - [React components on Ark UI](https://www.shadcn.io/ui/ark): the same 174 components, built on Ark UI. - [Vue components](https://www.shadcn.io/ui/vue): 168 components for Vue, built on Ark UI. - [Svelte components](https://www.shadcn.io/ui/svelte): 168 components for Svelte, built on Ark UI. - [Solid components](https://www.shadcn.io/ui/solid): 168 components for Solid, built on Ark UI. - [3D Card](https://www.shadcn.io/ui/card-3d.md): A card that turns toward the pointer while its layers rise to their own depths. For React with Base UI, when a flat card should feel like an object. - [3D Marquee](https://www.shadcn.io/ui/marquee-3d.md): A grid of images laid back at an angle, its columns scrolling without end. For React with Base UI, behind a hero heading or a gallery teaser. - [3D Pin](https://www.shadcn.io/ui/pin-3d.md): A card that leans back on hover as a pin of light rises from it to a label. For React with Base UI, to point at one featured project or place. - [Accordion](https://www.shadcn.io/ui/accordion.md): Open one section in a stack and leave the rest closed. For React with Base UI, when an FAQ or a settings block should not show every answer at once. - [Action Bar](https://www.shadcn.io/ui/action-bar.md): Show bulk actions while rows are selected, and hide them when the selection clears. For React with Base UI, instead of a toolbar that never leaves. - [Agent](https://www.shadcn.io/ui/agent.md): An agent's setup on one card: its name and model, its instructions, and tools that open into their schemas. For React with Base UI, before it runs. - [Alert](https://www.shadcn.io/ui/alert.md): Keep a success, warning, or failure on the page until you clear it. For React with Base UI, when the reader may need the message after looking away. - [Alert Dialog](https://www.shadcn.io/ui/alert-dialog.md): Stop the page until the reader confirms or cancels a destructive step. For React with Base UI, when a click outside should not skip the choice. - [Anatomy](https://www.shadcn.io/ui/anatomy.md): Label each part of a component on a diagram instead of a screenshot. For React with Base UI, when docs need to name the root, trigger, and content. - [Android](https://www.shadcn.io/ui/android.md): An Android phone drawn around a screenshot, a video or a live screen. For React with Base UI, in your theme's neutral colors, light and dark. - [Angle Slider](https://www.shadcn.io/ui/angle-slider.md): Pick an angle in degrees with a thumb on a circular dial. For React with Base UI, when a rotation or a gradient wraps around and a track would hide it. - [Animated Beam](https://www.shadcn.io/ui/animated-beam.md): A line between two elements with a light running along it. For React with Base UI, to show data moving from one part of a diagram to the next. - [Animated Cursor](https://www.shadcn.io/ui/animated-cursor.md): A dot that replaces the pointer inside one area, with a label that trails behind it. For React with Base UI, on a hero, a canvas or a portfolio piece. - [Animated Testimonials](https://www.shadcn.io/ui/animated-testimonials.md): Customer quotes beside a stack of tilted photos, each quote coming in word by word. For React with Base UI, when a few strong quotes beat a grid. - [Animated Tooltip](https://www.shadcn.io/ui/animated-tooltip.md): A row of overlapping avatars whose name tooltip swings toward the pointer. For React with Base UI, on a team page, a contributor list or a reviewer row. - [Announcement](https://www.shadcn.io/ui/announcement.md): Place one line of product news above the page, beside a badge. For React with Base UI, when a release or an outage should not look like a form error. - [Artifact](https://www.shadcn.io/ui/artifact.md): The panel beside the chat for what the model made: a file, a document. For React with Base UI, with a title, actions with tooltips and a close button. - [Aspect Ratio](https://www.shadcn.io/ui/aspect-ratio.md): Hold an image or a video to a fixed shape while it loads. For React with Base UI, when a widescreen or portrait frame should not jump the page. - [Attachment](https://www.shadcn.io/ui/attachment.md): Show a file on a message as a chip with its name and thumbnail. For React with Base UI, when the chip tracks upload progress and the picker is separate. - [Audio Player](https://www.shadcn.io/ui/audio-player.md): Generated speech or any audio file, under a row of controls of your own. For React with Base UI: play, seek, time, mute and volume. - [Autocomplete](https://www.shadcn.io/ui/autocomplete.md): Filter suggestions as someone types, and keep a value that isn't in the list. For React with Base UI, when a guess helps but free text is also valid. - [Avatar](https://www.shadcn.io/ui/avatar.md): A round profile photo that falls back to initials, plus a status dot or a group stack. For React with Base UI, wherever the screen names a person. - [Badge](https://www.shadcn.io/ui/badge.md): Mark a status, a count, or a category without a full sentence beside the title. For React with Base UI, when the label must stay short and on one line. - [Bottom Navigation](https://www.shadcn.io/ui/bottom-navigation.md): A bottom bar on a phone for the three to five sections people use most. For React with Base UI, when a sidebar would take over the layout. - [Breadcrumb](https://www.shadcn.io/ui/breadcrumb.md): Show where the page sits with a short trail of parent links that ends in plain text. For React with Base UI, when people should step back up a level. - [Bubble](https://www.shadcn.io/ui/bubble.md): A colored box for a short reply, with a side, a group, or a reaction. For React with Base UI, when the view is the thread and not a full message row. - [Button](https://www.shadcn.io/ui/button.md): Save, send, or follow a link from a control that does not stay pressed. For React with Base UI, when the next step is a single action on the page. - [Button Group](https://www.shadcn.io/ui/button-group.md): Join related actions in a row or stack that shares one border, with no button left selected. For React with Base UI, on a toolbar of separate presses. - [Calendar](https://www.shadcn.io/ui/calendar.md): Choose one day, several days, or a range without opening a popover first. For React with Base UI, when the month should stay on the page as people pick. - [Canvas](https://www.shadcn.io/ui/canvas.md): A node editor for agent workflows: cards wired by curved edges, dragged, connected and zoomed. For React with Base UI, no flow library to install. - [Card](https://www.shadcn.io/ui/card.md): Group a title, supporting text, and actions around one subject, from a login to a featured event. For React with Base UI, when the block stands alone. - [Carousel](https://www.shadcn.io/ui/carousel.md): Step through slides with previous and next controls, for a gallery or a short onboarding. For React with Base UI, when the slides won't all fit. - [Chain of Thought](https://www.shadcn.io/ui/chain-of-thought.md): A summary line that expands into the steps an agent took. For React with Base UI, Trace lines with a Code Block and Badges, and no component of its own. - [Chart](https://www.shadcn.io/ui/chart.md): Share series colors, a tooltip, and a legend across Recharts graphs. For React with Base UI, when the chart should match the rest of the interface. - [Chat](https://www.shadcn.io/ui/chat.md): A chat thread that keeps the reader's place while an agent's reply streams. For React with Base UI, Messages in a Message Scroller above an Input Group. - [Checkbox](https://www.shadcn.io/ui/checkbox.md): A yes or no for terms, filters, and row picks that applies when the form is submitted. In React with Base UI, clicking the label toggles the box too. - [Checkpoint](https://www.shadcn.io/ui/checkpoint.md): A point in the chat the reader can return to. For React with Base UI, a separator Marker after a turn with a Restore Button, no component of its own. - [Circular Progress](https://www.shadcn.io/ui/circular-progress.md): Show a known amount of work as a ring where a full-width bar won't fit. For React with Base UI, in a button, an avatar, or a tight table cell. - [Circular Slider](https://www.shadcn.io/ui/circular-slider.md): Turn a ring to set a hue, a heading, or a rotation instead of dragging a thumb on a track. For React with Base UI, the value comes back as an angle. - [Clipboard](https://www.shadcn.io/ui/clipboard.md): Copy a share link, a token, or an install command, and show a copied state. For React with Base UI, when people shouldn't have to retype the value. - [Code Block](https://www.shadcn.io/ui/code-block.md): Show code, terminal output, logs, and diffs with a header, line numbers, and a copy button. For React with Base UI, when the text must be exact. - [Code Editor](https://www.shadcn.io/ui/code-editor.md): An editable code box with syntax highlighting, Tab indents and line numbers. For React with Base UI, when readers should change the code. - [Collapsible](https://www.shadcn.io/ui/collapsible.md): Hide one section behind a button until someone opens it. For a single show-more in React with Base UI, like extra details under a summary. - [Color Picker](https://www.shadcn.io/ui/color-picker.md): Pick a color with hue and opacity sliders, or type a hex if you know it. For React with Base UI, when people should see the color as they change it. - [Combobox](https://www.shadcn.io/ui/combobox.md): Filter a long list from a text field, like countries or timezones. For React with Base UI, when a closed menu would take too long to scan. - [Command](https://www.shadcn.io/ui/command.md): Filter a palette or jump menu as people type, instead of reading every action. For React with Base UI, to run a command rather than store a form value. - [Commit](https://www.shadcn.io/ui/commit.md): A commit an agent made, with its message, hash, author and the files it changed. For React with Base UI, when a coding agent reports its work. - [Comparison](https://www.shadcn.io/ui/comparison.md): Two layers in one frame and a divider to drag between them: before and after, raw and edited. For React with Base UI, by pointer, touch or key. - [Confirmation](https://www.shadcn.io/ui/confirmation.md): A yes or no the agent asks for before a tool runs. For React with Base UI, an outline Item with Deny and Approve Buttons, and no component of its own. - [Context](https://www.shadcn.io/ui/context.md): How much of the model's context window is in use. For React with Base UI, a Hover Card with a Progress bar on a Button, and no component of its own. - [Context Menu](https://www.shadcn.io/ui/context-menu.md): Actions for the item under the pointer, opened with a right-click or a long press. For React with Base UI, when a button on every row won't fit. - [Credit Card](https://www.shadcn.io/ui/credit-card.md): A payment card drawn in CSS that turns to its back on hover or tap. For React with Base UI, to preview the card a reader types at checkout. - [Cursor](https://www.shadcn.io/ui/cursor.md): A pointer with a name tag and an optional message, for where a collaborator is on the page. For React with Base UI; it shows others, not your mouse. - [Data List](https://www.shadcn.io/ui/data-list.md): Labels and values for one record, such as a profile or an invoice. For React with Base UI, when people read down a detail page, not across a table. - [Date Input](https://www.shadcn.io/ui/date-input.md): Segmented month, day, and year fields for a date people already know, typed part by part. For React with Base UI, when a calendar would be in the way. - [Date Picker](https://www.shadcn.io/ui/date-picker.md): A button that opens a calendar so people pick a day, a range, or a time. For React with Base UI, when a date typed from memory is easy to get wrong. - [Dialog](https://www.shadcn.io/ui/dialog.md): A window over the page for a short task, with focus trapped until people finish or cancel. For React with Base UI, Escape returns focus to the opener. - [Direction](https://www.shadcn.io/ui/direction.md): Set one region left to right or right to left without flipping the rest of the page. For React with Base UI, when menus and CSS should follow it. - [Dock](https://www.shadcn.io/ui/dock.md): A row of app icons that grow as the pointer nears and ease aside, with a label and an open dot. For React with Base UI, when icons need names. - [Drawer](https://www.shadcn.io/ui/drawer.md): A panel that slides over the page and closes when you swipe it away. For React with Base UI, when filters or a short form on a phone need that gesture. - [Dropdown Menu](https://www.shadcn.io/ui/dropdown-menu.md): Open a list of commands from a button, like an account menu or a table row's actions. For React with Base UI, when they should stay hidden until asked. - [Editable](https://www.shadcn.io/ui/editable.md): Swap a line of text for a field, then save the change or throw it away. For React with Base UI, when a value like a profile name changes now and then. - [Empty](https://www.shadcn.io/ui/empty.md): A centered placeholder for a list, inbox, or search that loaded with nothing to show. For React with Base UI, so the empty view offers a next step. - [Environment Variables](https://www.shadcn.io/ui/environment-variables.md): A card of environment variables, each value masked until a Switch shows them, with copy buttons. For React with Base UI, for the keys a setup needs. - [Field](https://www.shadcn.io/ui/field.md): Stack a caption, the control, and helper or error text, so the hint stays tied to it. For React forms laid out with Base UI, not for validation. - [File Tree](https://www.shadcn.io/ui/file-tree.md): The files an agent changed, as folders to open and close. For React with Base UI, a Collapsible per folder, a Button per file, no component of its own. - [File Upload](https://www.shadcn.io/ui/file-upload.md): A drop zone and a browse button for choosing files on a form before you send them. For React with Base UI, the names stay listed until you submit. - [Float](https://www.shadcn.io/ui/float.md): Pin a badge or other marker to the corner of a button so a count stays visible. For React with Base UI, when that marker should not open on hover. - [Floating Panel](https://www.shadcn.io/ui/floating-panel.md): A window you can drag, resize, and minimize while the page underneath stays usable. For React with Base UI, when a modal would block the work under it. - [Frame](https://www.shadcn.io/ui/frame.md): A muted shell for a header, separate panels, and a footer outside those panels. For React pages with Base UI, when blocks should read as one section. - [Gantt](https://www.shadcn.io/ui/gantt.md): Plan features as bars on a timeline: drag one to reschedule it, pull an edge to change its dates. For React with Base UI, for roadmaps and sprints. - [Generated Image](https://www.shadcn.io/ui/generated-image.md): Show an image a model made, from its base64, in a frame that shimmers while it generates. For React with Base UI, sized by the ratio you asked for. - [Guides](https://www.shadcn.io/ui/guides.md): Hairlines on a box's edges, inner lines, hatched gutters, and marks at the crossings. For React pages with Base UI, so sections read as one drawing. - [Hello Effect](https://www.shadcn.io/ui/hello-effect.md): The word hello written by hand in one cursive line, stroke by stroke, then done. For React with Base UI, on a welcome screen or a first-run greeting. - [Hint](https://www.shadcn.io/ui/hint.md): Explain a control with a one-line note on hover or focus, rendered in place. For React with Base UI, when a portaled tooltip is more than you need. - [Hover Card](https://www.shadcn.io/ui/hover-card.md): Open a small preview when the pointer rests on a link, and keep it open as someone moves in. For React with Base UI, when a tooltip is too short. - [Image Cropper](https://www.shadcn.io/ui/image-cropper.md): Pick the part of a photo to keep, lock the aspect or a circle, and get that region back. For React with Base UI, when the crop is what you'll store. - [Image Zoom](https://www.shadcn.io/ui/image-zoom.md): Make a photo, an SVG, or a diagram larger where it sits, then close it and read on. For React with Base UI, when you aren't cropping or uploading. - [Inline Citation](https://www.shadcn.io/ui/inline-citation.md): A source in the sentence it supports, opened on hover. For React with Base UI, a Hover Card on a small secondary Button, and no component of its own. - [Input](https://www.shadcn.io/ui/input.md): A single-line field for a name, email, password, or search, with room for a label and a note. For React with Base UI, when the value shouldn't wrap. - [Input Group](https://www.shadcn.io/ui/input-group.md): Put an icon, a prefix, or a button in the same border as a text field. For React with Base UI, when those pieces should read as one control. - [Input OTP](https://www.shadcn.io/ui/input-otp.md): Collect a short verification code in separate slots, one character at a time, paste included. For React with Base UI, when the code has a fixed length. - [iPhone](https://www.shadcn.io/ui/iphone.md): An iPhone drawn around a screenshot, a video or a live screen, Dynamic Island on top. For React with Base UI, in your theme's neutral colors. - [Item](https://www.shadcn.io/ui/item.md): Pack media, a title, a short description, and an action into one row. For React with Base UI, when a full card would be more than the list needs. - [Kanban](https://www.shadcn.io/ui/kanban.md): Columns of cards that move by drag or by keyboard. For React with Base UI, when work passes through a few stages, such as a sprint or a pipeline. - [Kbd](https://www.shadcn.io/ui/kbd.md): Show a shortcut as a small key cap on a button, in a tooltip, or beside a search field. For React with Base UI, so the keys show without a help doc. - [Keyboard Table](https://www.shadcn.io/ui/keyboard-table.md): List several shortcuts as key caps beside a one-line description. For React docs with Base UI, when an accessibility section has more than one key. - [Label](https://www.shadcn.io/ui/label.md): Name a control so a click on its words focuses or toggles it. For a checkbox or a bare input in React with Base UI, when one line is the whole field. - [Limelight Nav](https://www.shadcn.io/ui/limelight-nav.md): An icon bar with a light on its top edge that slides to the chosen item and casts a cone onto it. For React with Base UI, for three to six icons. - [Link Overlay](https://www.shadcn.io/ui/link-overlay.md): Cover a card with one link, while the buttons inside keep their own clicks. For React with Base UI, when the whole card is the destination. - [List](https://www.shadcn.io/ui/list.md): Rows grouped by status that you drag up and down or move by keyboard. For React with Base UI, when a Kanban board is too wide for the space. - [Listbox](https://www.shadcn.io/ui/listbox.md): Show every option at once, so people compare and pick one or several with no menu to open. For React with Base UI, when options should stay in view. - [Marker](https://www.shadcn.io/ui/marker.md): A one-line note for a branch change, a running task, or a break in a transcript. For React with Base UI, when the system wrote the line, not a person. - [Marquee](https://www.shadcn.io/ui/marquee.md): A strip of logos or cards that loops by itself and holds still when someone points at it. For React with Base UI, when the motion is decoration. - [Menu Dock](https://www.shadcn.io/ui/menu-dock.md): A bar of icons with labels where the chosen one turns primary and an underline slides under it. For React with Base UI, for an app's few sections. - [Menubar](https://www.shadcn.io/ui/menubar.md): File and Edit menus that stay on screen like a desktop app's, not behind one button. For React with Base UI, when commands belong to the window. - [Message](https://www.shadcn.io/ui/message.md): One chat turn: the avatar and bubble on the sender's side, with an optional name or time. For React with Base UI, when you only need to place the row. - [Message Branch](https://www.shadcn.io/ui/message-branch.md): Flip between the versions of a regenerated reply or an edited prompt. For React with Base UI, with previous and next buttons and a 2 of 3 count. - [Message Scroller](https://www.shadcn.io/ui/message-scroller.md): Follow a chat reply as it streams, and scroll back without losing your place. For React with Base UI, when new lines should pull the scroll along. - [Mic Selector](https://www.shadcn.io/ui/mic-selector.md): A searchable list of the microphones plugged in, kept current as they come and go. For React with Base UI, to pick the one a voice prompt records from. - [Mini Calendar](https://www.shadcn.io/ui/mini-calendar.md): A compact row of days with arrows to page through them, today marked and one day selected. For React with Base UI, for bookings and schedules. - [Model Selector](https://www.shadcn.io/ui/model-selector.md): Two menus in the message field: one picks the model the agent runs, one how hard it thinks. For React with Base UI, Dropdown Menus in an Input Group. - [Motion Highlight](https://www.shadcn.io/ui/motion-highlight.md): One background that slides to the hovered or chosen item and takes its size, in a row, a list or a grid. For React with Base UI, with no motion library. - [Native Select](https://www.shadcn.io/ui/native-select.md): The platform's own menu for a short list, with the border and height of nearby fields. For React with Base UI, when a custom popup would get in the way. - [Navigation Menu](https://www.shadcn.io/ui/navigation-menu.md): Site links in a bar, some opening a panel of related pages. For a docs or marketing header in React with Base UI, when each item is a destination. - [Number Input](https://www.shadcn.io/ui/number-input.md): Step buttons beside a field for a quantity, price, or any number with a min, max or step. For React with Base UI, when a text field would accept junk. - [Open in Chat](https://www.shadcn.io/ui/open-in-chat.md): A menu that opens your question in ChatGPT, Claude, Cursor or v0, each in a new tab. For React with Base UI, with the query filled in for every app. - [Package Info](https://www.shadcn.io/ui/package-info.md): A dependency change: the package, its version from and to, and what kind of bump it is. For React with Base UI, when an agent edits package.json. - [Pagination](https://www.shadcn.io/ui/pagination.md): Previous, page numbers and next for a long list, with the current page marked. For React with Base UI, when the list doesn't fit in one view. - [Password Input](https://www.shadcn.io/ui/password-input.md): Mask a password, with a button to show it and hide it again. For sign-in and reset forms in React with Base UI, until someone asks to see it. - [Persona](https://www.shadcn.io/ui/persona.md): An animated avatar that shows what your assistant is doing, from listening to speaking. For React with Base UI, in six looks drawn from your theme. - [Pin List](https://www.shadcn.io/ui/pin-list.md): Pin a row and it glides into a Pinned section on top; unpin it and it glides back. For React with Base UI, for bookmarks, files and saved views. - [Pixel Image](https://www.shadcn.io/ui/pixel-image.md): An image that arrives as a grid of pieces, each fading in on its own beat, grey first and then in colour. For React with Base UI, in CSS keyframes. - [Plan](https://www.shadcn.io/ui/plan.md): The steps the agent plans to take, and how far it has got. For React with Base UI, a Trace line that opens on each step, with no component of its own. - [Popover](https://www.shadcn.io/ui/popover.md): Open a note or a few fields beside the trigger while the page stays usable. For a quick edit in React with Base UI, when nothing should block the page. - [Progress](https://www.shadcn.io/ui/progress.md): A bar that fills as a known task gets done, like an upload or a numbered step. For React with Base UI, when people should see what is left. - [Prompt Input](https://www.shadcn.io/ui/prompt-input.md): Where people type to message the agent, with attachments and a send button. For React with Base UI, an Input Group with Attachments and Dropdown Menus. - [Prose](https://www.shadcn.io/ui/prose.md): Article styles for Markdown or CMS HTML, with no class on each heading, list and table. For React with Base UI, when the markup is already written. - [QR Code](https://www.shadcn.io/ui/qr-code.md): Draw a scannable code for a URL or short text, so a phone can open the same target. For React with Base UI, when the next step is on another device. - [Questionnaire](https://www.shadcn.io/ui/questionnaire.md): Step through onboarding, a survey, or a quiz one question at a time. For React with Base UI, when a later prompt depends on an earlier answer. - [Queue](https://www.shadcn.io/ui/queue.md): The agent's todo list: what is left and what is done. For React with Base UI, two Trace sections, To do and Completed, with no component of its own. - [Radio Group](https://www.shadcn.io/ui/radio-group.md): Keep every option on the page and pick exactly one, for a short setting like a plan or shipping speed. In React with Base UI, arrow keys move the check. - [Rating](https://www.shadcn.io/ui/rating.md): Set a score with a row of stars, or show one already given, half steps included. For React with Base UI, when people should read the score at a glance. - [Reasoning](https://www.shadcn.io/ui/reasoning.md): The agent's thinking as it streams. For React with Base UI, a Trace line that opens while the model thinks and folds shut when it's done. - [Relative Time](https://www.shadcn.io/ui/relative-time.md): A world clock: one row per time zone with its date and live time, all on one timer. For React with Base UI, for teams spread across the world. - [Resizable](https://www.shadcn.io/ui/resizable.md): Drag a handle between panels so they trade space, for a split editor or a list and its detail. In React with Base UI, when people should set the sizes. - [Safari](https://www.shadcn.io/ui/safari.md): A Safari window around a screenshot, a video or a live page, with the address you choose. For React with Base UI, in your theme's neutral colors. - [Sandbox](https://www.shadcn.io/ui/sandbox.md): Edit HTML, CSS and JavaScript beside a live preview and a console, in a sandboxed frame. For React with Base UI, for tutorials and live examples. - [Sandbox Run](https://www.shadcn.io/ui/sandbox-run.md): Code an agent ran in a sandbox, with its status, over tabs for its code, output and files. For React with Base UI, built on Collapsible and Tabs. - [Schema Display](https://www.shadcn.io/ui/schema-display.md): An endpoint's method, path and parameters, with request and response fields that open. For React with Base UI, for the APIs your agent's tools call. - [Scroll Area](https://www.shadcn.io/ui/scroll-area.md): Keep a list, menu, or artwork strip in its own scroller, with a bar that matches the theme. For React with Base UI, when the page shouldn't grow. - [Segment Group](https://www.shadcn.io/ui/segment-group.md): Pick one label in a short row, with a highlight that slides to it and no panel below. For React with Base UI, when the choice is a view or a filter. - [Select](https://www.shadcn.io/ui/select.md): Open a short list of known options from a button, and keep the picked label on it. For React with Base UI, when a free-typed value would be wrong. - [Separator](https://www.shadcn.io/ui/separator.md): Divide sections, rows, or toolbar groups with a horizontal or vertical line. For React with Base UI, when a border on a neighbor is the wrong split. - [Sheet](https://www.shadcn.io/ui/sheet.md): Slide a panel in from any edge for a form or detail, leaving the page in sight. For React with Base UI, when a centered dialog would hide too much. - [Sidebar](https://www.shadcn.io/ui/sidebar.md): Grouped links in a collapsible rail, with a team switcher and an account menu. For React with Base UI, when navigation should stay put on wide screens. - [Signature Pad](https://www.shadcn.io/ui/signature-pad.md): A drawing box for consent or a delivery signature, with a clear button in the corner. For React with Base UI, when a typed name won't do. - [Skeleton](https://www.shadcn.io/ui/skeleton.md): Keep a list, card, or profile from jumping while its data is still loading. For React with Base UI, place muted blocks in the shape you already know. - [Skip Nav](https://www.shadcn.io/ui/skip-nav.md): Send the first Tab past a repeated header so focus lands on the main content. For React with Base UI, when a long menu would take that first keypress. - [Slider](https://www.shadcn.io/ui/slider.md): Set volume, price or temperature by sliding a thumb along a track. For React with Base UI, when a rough value is enough and cents need a number field. - [Sonner](https://www.shadcn.io/ui/sonner.md): A small notice for saves and errors that shouldn't take over the page. For React with Base UI, call it from the handler once the work is done. - [Sources](https://www.shadcn.io/ui/sources.md): The links behind an agent's reply, as one line that counts them and opens to list each. For React with Base UI, built from Trace lines. - [Speech Input](https://www.shadcn.io/ui/speech-input.md): A round microphone button that turns speech into prompt text. For React with Base UI, on the browser's speech recognition or your transcription service. - [Spinner](https://www.shadcn.io/ui/spinner.md): Mark a control or row as busy while a request is in flight. For React with Base UI, when the wait is short and the finished size is still unknown. - [Stack Trace](https://www.shadcn.io/ui/stack-trace.md): A failed tool call and its stack frames. For React with Base UI, an error Trace line that opens on the frames, with no component of its own. - [Status](https://www.shadcn.io/ui/status.md): A colored dot for online, busy or failed, beside a label that says which. For React with Base UI, when color is a glance and words carry the meaning. - [Steps](https://www.shadcn.io/ui/steps.md): Keep an ordered flow on its current step, with a way forward or back. For React with Base UI, when later steps depend on the ones before. - [Subagent](https://www.shadcn.io/ui/subagent.md): Work handed to a subagent, as one line that opens into its tool calls and findings. For React with Base UI, built from Trace, Code Block and Badge. - [Suggestion](https://www.shadcn.io/ui/suggestion.md): A short prompt the reader sends to the agent in one click. For React with Base UI, a row of outline Buttons above the message field. - [Switch](https://www.shadcn.io/ui/switch.md): An instant on or off for settings that don't wait on a save button. For React with Base UI, when a checkbox would look like a choice to submit later. - [Table](https://www.shadcn.io/ui/table.md): Compare rows such as invoices or payments in aligned columns; wide tables scroll sideways. For React with Base UI, with sorting left to you. - [Table of Contents](https://www.shadcn.io/ui/toc.md): A side list of headings that marks the section on screen and scrolls to the one you pick. For React with Base UI, when you supply the heading ids. - [Tabs](https://www.shadcn.io/ui/tabs.md): Peer views of one subject, with only one panel visible at a time. For React with Base UI, hidden panels unmount unless you keep them mounted. - [Tags Input](https://www.shadcn.io/ui/tags-input.md): Chips for labels, recipients or filters, not one comma-separated string. For React with Base UI, hold the list in state when the page has to change it. - [Task](https://www.shadcn.io/ui/task.md): The steps the agent takes, as it takes them. For React with Base UI, a Trace line per task that expands into its steps, with no component of its own. - [Terminal](https://www.shadcn.io/ui/terminal.md): A command the agent runs, with its output as it streams. For React with Base UI, a Trace line over a Code Block that opens while the command runs. - [Test Results](https://www.shadcn.io/ui/test-results.md): A test run as one line of counts that opens into each suite, its tests and each failure. For React with Base UI, built from Trace and Code Block. - [Textarea](https://www.shadcn.io/ui/textarea.md): Room for a comment, message or note that won't fit on one line. For React with Base UI, it grows as people type and scrolls once you cap the height. - [Ticker](https://www.shadcn.io/ui/ticker.md): A stock or coin's symbol, logo, price and change in one line, written by Intl. For React with Base UI, in a watchlist, a portfolio or a sentence. - [Timer](https://www.shadcn.io/ui/timer.md): A ticking countdown or stopwatch, from days down to seconds, with start and pause. For React with Base UI, you choose the units and place the controls. - [Toast](https://www.shadcn.io/ui/toast.md): Confirm that an action just worked, then go away on its own, with undo if it can be reversed. For React with Base UI, the notice does not take focus. - [Toggle](https://www.shadcn.io/ui/toggle.md): A pressed-or-not button for bold, bookmark and other toolbar tools. For React with Base UI, when the pressed look is the state, not a one-time click. - [Toggle Group](https://www.shadcn.io/ui/toggle-group.md): Toolbar buttons that stay pressed, for one formatting choice or several. For React with Base UI, arrow keys move between them from one tab stop. - [Toggle Tooltip](https://www.shadcn.io/ui/toggle-tooltip.md): Give an info icon a note that works on touch screens, not only on hover. For React with Base UI, when people need the text without hovering. - [Tool](https://www.shadcn.io/ui/tool.md): A tool call the agent makes, from input to output. For React with Base UI, a Trace line that expands into its output in a Code Block. - [Tooltip](https://www.shadcn.io/ui/tooltip.md): A hover label for an icon button that shows the same line on keyboard focus. For React with Base UI, when the action isn't written on the screen. - [Tour](https://www.shadcn.io/ui/tour.md): Walk a first visit through the page, one highlighted control after another. For React with Base UI, when people should be shown the next control. - [Trace](https://www.shadcn.io/ui/trace.md): Each step an agent takes on its own line: reasoning, tool calls, sources, edits. For React with Base UI, lines can expand, link out or open a dialog. - [Transcription](https://www.shadcn.io/ui/transcription.md): A transcript that follows the audio: what's been said dims, the current line lights up, a click seeks. For React with Base UI, fed by transcribe. - [Tree View](https://www.shadcn.io/ui/tree-view.md): Move through folders, files, or any other hierarchy from the keyboard. For React with Base UI, when that outline is the interface people use. - [Type Table](https://www.shadcn.io/ui/type-table.md): Show each prop's name and type up front, and open the row for the description. For React with Base UI, when a docs page lists an API, not records. - [Video Player](https://www.shadcn.io/ui/video-player.md): A native video under a control bar of your own: play, seek, time, volume and captions. For React with Base UI, when the browser's controls don't fit. - [Voice Selector](https://www.shadcn.io/ui/voice-selector.md): A searchable dialog of text-to-speech voices with a play button on each. For React with Base UI, with the gender, accent and age on every row. - [Web Preview](https://www.shadcn.io/ui/web-preview.md): A small browser for the page an agent built. For React with Base UI: back, forward, reload, an address field, the page in a sandbox, and its console. ## Utilities - [Client Only](https://www.shadcn.io/ui/client-only.md): Render part of the page only once it mounts in the browser, with a fallback on the server. For React, when code needs window or other browser-only APIs. - [Download Trigger](https://www.shadcn.io/ui/download-trigger.md): Save a Blob or a string as a named file from any button, even when the data comes from a promise. For React, when the file is built in the browser. - [Format](https://www.shadcn.io/ui/format.md): Show file sizes, currency, percents, compact numbers, and relative times with the Intl API. For React, when values should read right in the user's locale. - [Highlight](https://www.shadcn.io/ui/highlight.md): Mark every match of one or more search terms inside a string, case-insensitive if you like, in your own style. For React, to show why a result matched. - [Hitbox](https://www.shadcn.io/ui/hitbox.md): Grow a control's click and tap area past its edges, on any side or axis, without moving the layout. For React with Tailwind CSS v4, around small icons. - [JSON Tree View](https://www.shadcn.io/ui/json-tree-view.md): Show JSON as a tree people open level by level, from a starting depth you set, Maps and Sets included. For React, when a raw dump is too long to read. - [Presence](https://www.shadcn.io/ui/presence.md): Keep an element mounted until its exit animation ends, then remove it. For React, when a popover, panel, or toast should animate out instead of vanishing. - [Scroll Fade](https://www.shadcn.io/ui/scroll-fade.md): Fade the edges of a scroll container so the cut-off content says there is more. For React with Tailwind CSS v4, when a list scrolls inside a fixed height. - [Shimmer](https://www.shadcn.io/ui/shimmer.md): A band of light that sweeps across a line of text while the work behind it runs. For React with Tailwind CSS v4, when the label should look in progress. - [Show](https://www.shadcn.io/ui/show.md): Render children when a condition holds and a fallback when it doesn't, with no ternary in the markup. For React, when a branch reads better as a tag. - [Swap](https://www.shadcn.io/ui/swap.md): Toggle between two icons or states with a fade, blur, flip, rotate, or scale. For React, when a sun becomes a moon or a play button turns to pause. ## Hooks - [All hooks](https://www.shadcn.io/hooks.md): 35 React hooks, each one typed file you copy in and own. - [useBoolean](https://www.shadcn.io/hooks/use-boolean.md): A boolean with setTrue, setFalse and toggle, so you don't write all three by hand. For React, when a modal, a flag or a loading state is on or off. - [useClickAnyWhere](https://www.shadcn.io/hooks/use-click-anywhere.md): Listens for a click anywhere on the document and runs your handler. For React, when a page should notice every click, not just one on a control. - [useCopyToClipboard](https://www.shadcn.io/hooks/use-copy-to-clipboard.md): Copies a string to the clipboard and reports whether the write worked. For React, when a button should copy a link, a snippet or a share message. - [useCountdown](https://www.shadcn.io/hooks/use-countdown.md): A number that ticks on an interval, with start, stop and reset. For React, when a launch clock, a quiz timer or a short wait should count on its own. - [useCounter](https://www.shadcn.io/hooks/use-counter.md): A number with increment, decrement, reset and setCount already wired. For React, when a quantity, a page index or a score moves one step at a time. - [useDarkMode](https://www.shadcn.io/hooks/use-dark-mode.md): Tracks a dark-mode flag, stores the choice and can set the dark class. For React, when a theme toggle should follow the system, then remember. - [useDebounceCallback](https://www.shadcn.io/hooks/use-debounce-callback.md): Delays a callback until calls go quiet, then runs the latest one, with cancel and flush. For React, when a search or a form shouldn't fire on every key. - [useDebounceValue](https://www.shadcn.io/hooks/use-debounce-value.md): Holds a value back until changes pause for your delay, then publishes the latest. For React, when a filter or a request should wait for typing to stop. - [useDocumentTitle](https://www.shadcn.io/hooks/use-document-title.md): Writes a string into the browser tab's title whenever it changes. For React, when the tab should show a live count or the page's name while it's open. - [useEventCallback](https://www.shadcn.io/hooks/use-event-callback.md): Gives you one stable function that still reads the latest state and props. For React, when a child or a timer needs a fixed identity but fresh values. - [useEventListener](https://www.shadcn.io/hooks/use-event-listener.md): Subscribes to a DOM event on window or a ref and removes it on unmount or change. For React, when you'd rather not write add and remove by hand. - [useHover](https://www.shadcn.io/hooks/use-hover.md): Tells you whether the pointer is over an element you pass by ref. For React, when a card or a preview should react to hover without a stylesheet rule. - [useIntersectionObserver](https://www.shadcn.io/hooks/use-intersection-observer.md): Reports whether an element is in view, with the observer entry and a ref callback. For React, when you lazy load, infinite scroll or animate once. - [useInterval](https://www.shadcn.io/hooks/use-interval.md): Calls a function on a timer and pauses when the delay is null. For React, when you poll, count or repeat work without a stale closure. - [useIsClient](https://www.shadcn.io/hooks/use-is-client.md): Returns false on the server and true after hydration, so you know the browser is ready. For React, when code needs window, document or other browser APIs. - [useIsMobile](https://www.shadcn.io/hooks/use-is-mobile.md): Says whether the viewport is narrower than 768px and stays current on resize. For React, when a sidebar or a layout should switch to its phone version. - [useIsMounted](https://www.shadcn.io/hooks/use-is-mounted.md): Gives you a function that's true while the component is mounted and false after. For React, when a fetch, a timer or async code might set state too late. - [useIsomorphicLayoutEffect](https://www.shadcn.io/hooks/use-isomorphic-layout-effect.md): Runs useLayoutEffect in the browser and useEffect on the server, same arguments. For React, when you measure the DOM before paint without an SSR warning. - [useLocalStorage](https://www.shadcn.io/hooks/use-local-storage.md): Stores a value in localStorage and gives it back with a setter and remove. For React, when a preference, a draft or a count should survive a refresh. - [useMap](https://www.shadcn.io/hooks/use-map.md): Keeps a Map in state: set, setAll, remove and reset each store a new Map. For React, when you cache by key or track fields without mutating the last one. - [useMediaQuery](https://www.shadcn.io/hooks/use-media-query.md): Matches a CSS media query and updates when the viewport or a setting changes. For React, when you follow a breakpoint, dark scheme or reduced motion. - [useMousePosition](https://www.shadcn.io/hooks/use-mouse-position.md): Tracks the pointer in page coordinates, and inside an element given its ref. For React, when you build a custom cursor, a follow tooltip or a canvas. - [useOnClickOutside](https://www.shadcn.io/hooks/use-on-click-outside.md): Calls a handler when a pointer or focus event lands outside a ref, or outside every ref in a list. For React, when a menu or a popover should close. - [useReadLocalStorage](https://www.shadcn.io/hooks/use-read-local-storage.md): Reads one localStorage key and updates when it changes, even from another tab. For React, when you only watch a value this component doesn't store. - [useResizeObserver](https://www.shadcn.io/hooks/use-resize-observer.md): Measures an element's width and height and updates them whenever it resizes. For React, when a panel, a chart or a split view should follow its own box. - [useScreen](https://www.shadcn.io/hooks/use-screen.md): Reads size, available space, color and pixel depth, and orientation from window.screen on resize. For React, when layout depends on the display. - [useScript](https://www.shadcn.io/hooks/use-script.md): Loads an external script by URL and reports idle, loading, ready or error. For React, when several callers share one tag, added only in the browser. - [useScrollLock](https://www.shadcn.io/hooks/use-scroll-lock.md): Locks scrolling on an element you choose and restores its overflow when you unlock. For React, when an overlay should hold the page still without a shift. - [useSessionStorage](https://www.shadcn.io/hooks/use-session-storage.md): Stores one JSON value in sessionStorage for this tab, with a setter and remove, read after mount. For React, when a draft or a wizard should last the tab. - [useStep](https://www.shadcn.io/hooks/use-step.md): Counts steps from 1 to a maximum, with next, back, reset and a jump that throws out of range. For React, when you build a wizard or another ordered flow. - [useTernaryDarkMode](https://www.shadcn.io/hooks/use-ternary-dark-mode.md): Keeps a light, dark or system choice, follows the OS in system mode and stores it. For React, when a theme control should offer all three and remember. - [useTimeout](https://www.shadcn.io/hooks/use-timeout.md): Schedules one callback after a delay and clears it on unmount or a null delay. For React, when a notice or a redirect should wait and stay easy to cancel. - [useToggle](https://www.shadcn.io/hooks/use-toggle.md): Returns a boolean, a stable toggle and a setter for on or off state. For React, when you don't need useBoolean's named setTrue and setFalse helpers. - [useUnmount](https://www.shadcn.io/hooks/use-unmount.md): Runs one callback when the component unmounts, with the latest props and state in reach. For React, when a socket, timer or subscription needs teardown. - [useWindowSize](https://www.shadcn.io/hooks/use-window-size.md): Reads the viewport's width and height on resize, with an optional debounce. For React, when layout needs the pixel size rather than a media query. ## Blocks - [All blocks](https://www.shadcn.io/blocks): 6,181 page sections in 56 categories, built on the components, for React, Vue, Svelte and Solid. Try each one on its page; installing one takes Pro. - [About blocks](https://www.shadcn.io/about-block): 150 blocks. About sections that tell a company's story: mission, values, timelines, founders, numbers, offices, press and principles. - [Account blocks](https://www.shadcn.io/account-block): 100 blocks. Account sections inside an app: identity, security, sessions, connected sign-ins, data export and deletion. - [AI blocks](https://www.shadcn.io/ai-block): 100 blocks. AI interface sections: prompt composers, responses with sources, model and tool pickers, usage and history. - [Awards blocks](https://www.shadcn.io/awards-block): 137 blocks. Awards sections that show recognition: laurels, badge walls, trophy cases, rankings, timelines, nominations and year-in-review tallies. - [Banner blocks](https://www.shadcn.io/banner-block): 100 blocks. Banners for announcements and notices: top bars, alerts, consent and cookie prompts, countdowns, live status, pills, ribbons and in-page callouts. - [Billing blocks](https://www.shadcn.io/billing-block): 167 blocks. Billing sections for inside your app: current plan, usage, upgrades and downgrades, checkout, invoices, payment methods and cancellation. - [Blog blocks](https://www.shadcn.io/blog-block): 100 blocks. Blog sections for one publication: post grids, featured stories, archives, series, search, subscribe forms and reading tools. - [Calendar blocks](https://www.shadcn.io/calendar-block): 100 blocks. Calendar sections: month, week and agenda views, scheduling, availability and event details. - [Carousel blocks](https://www.shadcn.io/carousel-block): 100 blocks. Carousel sections: slides with real controls, thumbnails, autoplay that pauses, and accessible paging. - [Changelog blocks](https://www.shadcn.io/changelog-block): 200 blocks. Changelog sections that show what shipped: release timelines, version tabs, diffs, migration guides, rollout status and release metrics. - [Chat blocks](https://www.shadcn.io/chat-block): 200 blocks. Chat sections: conversations, threads, composers, attachments, presence and message states. - [Checkout blocks](https://www.shadcn.io/checkout-block): 100 blocks. Checkout sections: carts, shipping, payment steps, order summaries and confirmations, with honest demo results. - [Command Menu blocks](https://www.shadcn.io/command-menu-block): 100 blocks. Command menu sections: keyboard palettes with search, groups, shortcuts and nested pages. - [Comments blocks](https://www.shadcn.io/comments-block): 100 blocks. Comment sections: threads, replies, reactions, mentions, moderation and composers. - [Contact blocks](https://www.shadcn.io/contact-block): 100 blocks. Contact sections built around a form: bookings, quotes, support, callbacks, multi-step requests and contact details. - [CRUD blocks](https://www.shadcn.io/crud-block): 100 blocks. CRUD sections: create, read, edit and delete flows with validation, confirmation and undo. - [CTA blocks](https://www.shadcn.io/cta-block): 100 blocks. Call-to-action sections that close a page: sign-up prompts, email capture, offers, social proof and product previews. - [Dashboard blocks](https://www.shadcn.io/dashboard-block): 200 blocks. Dashboard sections: app views with navigation, KPI panels, charts, tables and activity. - [Dialog blocks](https://www.shadcn.io/dialog-block): 150 blocks. Dialog sections: modals, sheets and confirmations with focus handling and honest actions. - [Empty State blocks](https://www.shadcn.io/empty-state-block): 100 blocks. Empty-state sections: first-run, no-results, cleared and error-free states with one clear next step. - [Error blocks](https://www.shadcn.io/error-block): 100 blocks. Error sections: not-found, server, offline, permission and maintenance pages with a way back. - [FAQ blocks](https://www.shadcn.io/faq-block): 100 blocks. FAQ sections that answer before anyone asks: accordions, searchable and categorised questions, side navigation, contact prompts and help-centre layouts. - [Features blocks](https://www.shadcn.io/features-block): 170 blocks. Feature sections that show what a product does: bento grids, alternating rows, tabbed and accordion previews, diagrams, comparisons and product mockups. - [File Upload blocks](https://www.shadcn.io/file-upload-block): 100 blocks. File upload sections: drop zones, queues, previews, progress and limits, without reading files in the demo. - [Footer blocks](https://www.shadcn.io/footer-block): 100 blocks. Footers that close a page: link columns, newsletter sign-up, language and theme controls, status, legal rows and sitemaps. - [Form blocks](https://www.shadcn.io/form-block): 100 blocks. Form sections: fields, validation, multi-step flows and review screens with honest submit results. - [Gallery blocks](https://www.shadcn.io/gallery-block): 100 blocks. Gallery sections that show work: lightboxes, carousels, masonry and mosaic grids, filters, comparisons and zoomable views. - [Hero blocks](https://www.shadcn.io/hero-block): 150 blocks. Hero sections that open a page: centered and split layouts, product screenshots, code and terminal previews, signups, social proof and animated headlines. - [Integration blocks](https://www.shadcn.io/integration-block): 100 blocks. Integration sections that show how a product connects to the tools teams already use: detail pages, connect flows, capability grids, synced-object lists and usage figures. - [Kanban blocks](https://www.shadcn.io/kanban-block): 100 blocks. Kanban sections: boards with columns, cards, keyboard moves, limits and filters. - [Login blocks](https://www.shadcn.io/login-block): 100 blocks. Login sections: sign-in, sign-up, passwordless, two-factor and recovery screens. - [Logos blocks](https://www.shadcn.io/logos-block): 100 blocks. Logo sections that show who already trusts the product: strips under a hero, marquees, walls, bento cells with case studies, metrics and filtered grids. - [Map blocks](https://www.shadcn.io/map-block): 100 blocks. Map sections: drawn maps with pins, routes, regions and location pickers, no map tiles. - [Monitoring blocks](https://www.shadcn.io/monitoring-block): 100 blocks. Monitoring sections: uptime, latency, alerts, logs and incident views from typed data. - [Music blocks](https://www.shadcn.io/music-block): 100 blocks. Music app sections: players, playlists, albums, queues and lyrics with drawn covers and no real artists. - [Navbar blocks](https://www.shadcn.io/navbar-block): 100 blocks. Navbars that open a page: menus and mega menus, search, account controls, workspace switchers and mobile drawers. - [Notification blocks](https://www.shadcn.io/notification-block): 100 blocks. Notification sections: inboxes, toasts, preferences and activity feeds. - [Onboarding blocks](https://www.shadcn.io/onboarding-block): 100 blocks. Onboarding sections: welcome flows, checklists, tours and setup steps. - [Pricing blocks](https://www.shadcn.io/pricing-block): 108 blocks. Pricing sections for product and SaaS pages: plan cards, billing toggles, comparison tables and calculators. - [Product Cards blocks](https://www.shadcn.io/product-cards-block): 100 blocks. Product card sections: product tiles with variants, prices, ratings and quick actions, drawn product pictures. - [Profile blocks](https://www.shadcn.io/profile-block): 100 blocks. Profile sections: public profiles, headers, activity, stats and edit forms. - [Reviews blocks](https://www.shadcn.io/reviews-block): 100 blocks. Review sections built on real ratings: score summaries, distributions, filters and sorting, helpful votes, replies, moderation and write-a-review forms. - [Search blocks](https://www.shadcn.io/search-block): 1 block. Search sections: search pages with filters, suggestions and results. - [Settings blocks](https://www.shadcn.io/settings-block): 100 blocks. Settings sections: preferences, toggles, appearance, notifications and danger zones. - [Sidebar blocks](https://www.shadcn.io/sidebar-block): 100 blocks. Sidebar sections: app navigation with groups, collapse, search, workspaces and accounts. - [Skeleton blocks](https://www.shadcn.io/skeleton-block): 100 blocks. Skeleton sections: loading placeholders that match their final layout and respect reduced motion. - [Stats blocks](https://www.shadcn.io/stats-block): 122 blocks. Stats sections that put numbers to work: KPI bars, hero metrics, charts, funnels, gauges, heatmaps and comparison cards. - [Stepper blocks](https://www.shadcn.io/stepper-block): 100 blocks. Stepper sections: multi-step progress, wizards and checkpoints with real navigation. - [Storefront blocks](https://www.shadcn.io/storefront-block): 100 blocks. Storefront sections: shop pages, collections, filters and product detail with drawn pictures. - [Success blocks](https://www.shadcn.io/success-block): 100 blocks. Success sections: confirmation screens after an action, with what happens next. - [Tables blocks](https://www.shadcn.io/tables-block): 100 blocks. Table sections: data tables with sorting, filtering, selection, pagination and row actions. - [Team blocks](https://www.shadcn.io/team-block): 126 blocks. Team sections that introduce the people: directories, leadership, org charts, departments, availability, locations and open roles. - [Testimonials blocks](https://www.shadcn.io/testimonials-block): 100 blocks. Testimonial sections that build trust: quotes, reviews, ratings, case studies, social proof walls and customer stories. - [Timeline blocks](https://www.shadcn.io/timeline-block): 100 blocks. Timeline sections: activity, history and progress timelines from typed data. - [Todo List blocks](https://www.shadcn.io/todo-list-block): 100 blocks. To-do sections: task lists with add, complete, reorder, due dates and filters. - [Web3 blocks](https://www.shadcn.io/web3-block): 100 blocks. Web3 sections: wallets, balances, swaps and transactions with fictional tokens and honest demo results. ## Examples - [All examples](https://www.shadcn.io/examples): 1,103 examples in 53 galleries: real-world patterns built from the components, each live with its code, on React, Vue, Svelte and Solid. Free with an account. - [Accordion examples](https://www.shadcn.io/accordion-examples): 21 examples. Stacked sections that open one at a time, for FAQs, settings and forms. - [Alert examples](https://www.shadcn.io/alert-examples): 25 examples. Inline status banners for error, warning, success and info states. - [Alert Dialog examples](https://www.shadcn.io/alert-dialog-examples): 39 examples. Focus-trapped dialogs that ask for a decision before anything happens. - [Aspect Ratio examples](https://www.shadcn.io/aspect-ratio-examples): 7 examples. Fixed-ratio containers for images, videos, and embeds without layout shift. - [Avatar examples](https://www.shadcn.io/avatar-examples): 14 examples. Profile pictures with fallbacks, status dots, counts and verified badges. - [Badge examples](https://www.shadcn.io/badge-examples): 20 examples. Small labels for status, tags and counts. - [Breadcrumb examples](https://www.shadcn.io/breadcrumb-examples): 14 examples. Navigation trails with custom separators, icons, dropdowns, and selects. - [Button examples](https://www.shadcn.io/button-examples): 35 examples. Button compositions with loading states, icons, shortcuts, and variants. - [Button Group examples](https://www.shadcn.io/button-group-examples): 39 examples. Related buttons joined into one control. - [Calendar examples](https://www.shadcn.io/calendar-examples): 16 examples. Inline month grids for picking dates, ranges and time slots. - [Card examples](https://www.shadcn.io/card-examples): 4 examples. Content containers for forms, listings and dashboard widgets. - [Carousel examples](https://www.shadcn.io/carousel-examples): 4 examples. Swipeable slides for galleries, heroes and product shelves. - [Chart examples](https://www.shadcn.io/chart-examples): 70 examples. Recharts visualizations: area, bar, line, pie, radar, radial, tooltip. - [Checkbox examples](https://www.shadcn.io/checkbox-examples): 12 examples. Checkboxes for single choices, multi-select lists and partial selection. - [Collapsible examples](https://www.shadcn.io/collapsible-examples): 23 examples. One section that shows and hides its content, for details, FAQs and sidebars. - [Combobox examples](https://www.shadcn.io/combobox-examples): 42 examples. Searchable selects with filtering and keyboard navigation. - [Command examples](https://www.shadcn.io/command-examples): 21 examples. Searchable menus of actions, inline, in a dialog or in a popover. - [Context Menu examples](https://www.shadcn.io/context-menu-examples): 27 examples. Right-click menus with icons, shortcuts, submenus and selections. - [Data Table examples](https://www.shadcn.io/data-table-examples): 8 examples. TanStack Table grids with selection, sorting, filters and pagination. - [Date Picker examples](https://www.shadcn.io/date-picker-examples): 8 examples. Buttons that open a calendar to pick a date, a range or several days. - [Dialog examples](https://www.shadcn.io/dialog-examples): 17 examples. Centered modals for forms, flows and focused content. - [Drawer examples](https://www.shadcn.io/drawer-examples): 22 examples. Draggable panels from any edge, with snap points. - [Dropdown Menu examples](https://www.shadcn.io/dropdown-menu-examples): 30 examples. Action menus that open from a button. - [Empty State examples](https://www.shadcn.io/empty-examples): 22 examples. Placeholders for empty lists, searches with no results and first runs. - [Field examples](https://www.shadcn.io/field-examples): 38 examples. Form fields that pair a label, a control, a description and an error. - [Form examples](https://www.shadcn.io/form-examples): 42 examples. Validated forms on React Hook Form and Zod. - [Hover Card examples](https://www.shadcn.io/hover-card-examples): 20 examples. Rich previews for mentions, links, and stats that open on hover. - [Input examples](https://www.shadcn.io/input-examples): 24 examples. Text inputs with labels, type variants and validation states. - [Input Group examples](https://www.shadcn.io/input-group-examples): 39 examples. Inputs and textareas with icons, text, buttons and menus attached. - [Input OTP examples](https://www.shadcn.io/input-otp-examples): 20 examples. One-time code fields with one box per character. - [Item examples](https://www.shadcn.io/item-examples): 10 examples. Rows of related content for lists, settings and menus. - [Kbd examples](https://www.shadcn.io/kbd-examples): 39 examples. Key caps for shortcut hints and key combinations. - [Label examples](https://www.shadcn.io/label-examples): 8 examples. Form labels with markers, badges, counts, hints and tooltips. - [Menubar examples](https://www.shadcn.io/menubar-examples): 10 examples. Desktop-style menu bars: File, Edit, View. - [Navigation Menu examples](https://www.shadcn.io/navigation-menu-examples): 20 examples. Site header menus with dropdowns and mega-menu panels. - [Pagination examples](https://www.shadcn.io/pagination-examples): 19 examples. Page navigation rows with numbers, Previous and Next, and ellipses. - [Popover examples](https://www.shadcn.io/popover-examples): 15 examples. Panels that open from a button and stay beside it. - [Progress examples](https://www.shadcn.io/progress-examples): 20 examples. Progress bars for uploads, tasks and goals. - [Radio Group examples](https://www.shadcn.io/radio-group-examples): 9 examples. Single-select radio button groups. - [Scroll Area examples](https://www.shadcn.io/scroll-area-examples): 8 examples. Scroll regions with styled scrollbars that match the rest of the interface. - [Separator examples](https://www.shadcn.io/separator-examples): 20 examples. Thin lines that divide content. - [Sheet examples](https://www.shadcn.io/sheet-examples): 29 examples. Edge-anchored slide-in panels for forms and details. - [Skeleton examples](https://www.shadcn.io/skeleton-examples): 30 examples. Loading placeholders shaped like the content they stand in for. - [Slider examples](https://www.shadcn.io/slider-examples): 29 examples. Sliders for picking a value or a range on a track. - [Sonner examples](https://www.shadcn.io/sonner-examples): 24 examples. Toast notifications for brief feedback after an action. - [Spinner examples](https://www.shadcn.io/spinner-examples): 17 examples. Loading indicators for waits you can't measure. - [Switch examples](https://www.shadcn.io/switch-examples): 19 examples. On and off toggles for settings. - [Table examples](https://www.shadcn.io/table-examples): 8 examples. Styled tables for lists, logs, comparisons and detail views. - [Tabs examples](https://www.shadcn.io/tabs-examples): 11 examples. Tabbed panels for switching between related views. - [Textarea examples](https://www.shadcn.io/textarea-examples): 13 examples. Multi-line text fields with labels, hints, counts and states. - [Toggle examples](https://www.shadcn.io/toggle-examples): 7 examples. Buttons that stay pressed until pressed again. - [Toggle Group examples](https://www.shadcn.io/toggle-group-examples): 7 examples. Grouped toggle buttons for one choice or several. - [Tooltip examples](https://www.shadcn.io/tooltip-examples): 8 examples. Short labels that show on hover and focus. ## Charts - [Charts](https://www.shadcn.io/charts): 70 charts for React on TanStack Charts. - [Recharts charts](https://www.shadcn.io/charts/recharts): 70 charts for React on Recharts. - [Vue charts](https://www.shadcn.io/charts/vue): 70 charts for Vue on TanStack Charts. - [Svelte charts](https://www.shadcn.io/charts/svelte): 70 charts for Svelte on TanStack Charts. - [Solid charts](https://www.shadcn.io/charts/solid): 70 charts for Solid on TanStack Charts. - [Area Chart](https://www.shadcn.io/charts/area-simple.md): One series as a smooth filled curve across six months: the plainest way to show a single metric's trend in React, drawn with TanStack Charts. - [Stacked Area Chart](https://www.shadcn.io/charts/area-stacked.md): Two series stacked into one filled total, so you read each part and the whole across six months. Desktop and mobile visitors in React. - [Expanded Stacked Area Chart](https://www.shadcn.io/charts/area-expanded.md): Three series stacked to 100% at every month, so each band reads as a share of the whole rather than an amount. Built for React on TanStack Charts. - [Step Area Chart](https://www.shadcn.io/charts/area-step.md): A stepped area that holds each month's value flat, then jumps, for counts that change at set points. Desktop visitors as steps, in React. - [Linear Area Chart](https://www.shadcn.io/charts/area-linear.md): One series joined by straight segments instead of a curve, so every bend sits on a real data point. A monthly area chart for React. - [Area Chart with Legend](https://www.shadcn.io/charts/area-legend.md): Two stacked areas with a legend under the plot naming each series in its color, read from the chart's config. For React, drawn with TanStack Charts. - [Interactive Area Chart](https://www.shadcn.io/charts/area-interactive.md): Three months of daily desktop and mobile visitors as stacked gradient areas, with a select for the last 90, 30 or 7 days. For React. - [Area Chart with Axes](https://www.shadcn.io/charts/area-axes.md): Stacked areas with a value axis on the side and months along the bottom, so readers get numbers without hovering. Two series in React. - [Gradient Area Chart](https://www.shadcn.io/charts/area-gradient.md): Two stacked areas filled with vertical gradients that fade toward the baseline, keeping the edges strong and the plot light. For React. - [Area Chart with Icons](https://www.shadcn.io/charts/area-icons.md): Stacked areas whose legend shows a lucide icon beside each series instead of a color square, set once in the chart's config. For React. - [Bar Chart](https://www.shadcn.io/charts/bar-simple.md): Six rounded bars, one per month, for comparing a single series category by category. The base bar chart for React, drawn with TanStack Charts. - [Multiple Bar Chart](https://www.shadcn.io/charts/bar-multiple.md): Desktop and mobile bars side by side in each month, so you compare two series directly at every point. Grouped bars for React with TanStack Charts. - [Horizontal Bar Chart](https://www.shadcn.io/charts/bar-horizontal.md): Bars that grow to the right with the months listed down the side, for categories whose names need room. Horizontal bars in React on TanStack Charts. - [Stacked Bar Chart with Legend](https://www.shadcn.io/charts/bar-stacked-legend.md): Desktop and mobile stacked in one bar per month, with a legend naming each part. Shows a total and its split at once in React with TanStack Charts. - [Mixed Bar Chart](https://www.shadcn.io/charts/bar-mixed.md): Horizontal bars, one per browser, each in its own color from the chart config. For comparing a few named categories in React with TanStack Charts. - [Interactive Bar Chart](https://www.shadcn.io/charts/bar-interactive.md): Three months of daily bars with a header that switches between desktop and mobile and shows each total. An interactive bar chart for React. - [Bar Chart with Active Bar](https://www.shadcn.io/charts/bar-active.md): Five browser bars where one, Firefox, is drawn as active with a dashed outline and a lighter fill. Points at one category in React with TanStack Charts. - [Bar Chart with Labels](https://www.shadcn.io/charts/bar-label.md): Monthly bars with each value printed above its bar, so the numbers read without hovering. Labeled bars for React, drawn with TanStack Charts. - [Bar Chart with Custom Labels](https://www.shadcn.io/charts/bar-label-custom.md): Horizontal bars with the month written inside each bar and its value just past the end, in place of axes. Compact labeled bars in React. - [Bar Chart with Negative Values](https://www.shadcn.io/charts/bar-negative.md): Monthly bars above and below zero, colored by their sign and labeled with the month. For gains and losses, or any value that swings, in React. - [Line Chart](https://www.shadcn.io/charts/line-simple.md): One series as a smooth line across six months: the lightest way to show which way a single metric is heading, in React with TanStack Charts. - [Multiple Line Chart](https://www.shadcn.io/charts/line-multiple.md): Desktop and mobile visitors as two lines on shared axes, for spotting where the series cross, lead or drift apart, in React with TanStack Charts. - [Linear Line Chart](https://www.shadcn.io/charts/line-linear.md): A line drawn as straight segments from month to month, so it never hints at values between two readings. For React, drawn with TanStack Charts. - [Step Line Chart](https://www.shadcn.io/charts/line-step.md): A stepped line that holds each month's value flat, then jumps: for counts, prices and plans that change in steps, in React with TanStack Charts. - [Line Chart with Dots](https://www.shadcn.io/charts/line-dots.md): A smooth line with a filled dot on every month, so each real reading stands out from the curve that joins them, in React with TanStack Charts. - [Line Chart with Colored Dots](https://www.shadcn.io/charts/line-dots-colors.md): One line across five browsers whose dots each take that browser's own color, tying a falling trend to its categories, in React with TanStack Charts. - [Line Chart with Custom Dots](https://www.shadcn.io/charts/line-dots-custom.md): A line whose points are commit-style markers, a hollow ring on a short vertical stroke, for releases and deploys, in React with TanStack Charts. - [Line Chart with Labels](https://www.shadcn.io/charts/line-label.md): A line with each month's value printed above its point, so the numbers read without hovering, even in a screenshot. For React on TanStack Charts. - [Line Chart with Custom Labels](https://www.shadcn.io/charts/line-label-custom.md): A line across five browsers with each point labeled by its browser's name, so the categories read without an x axis, in React with TanStack Charts. - [Interactive Line Chart](https://www.shadcn.io/charts/line-interactive.md): Ninety days of daily visitors as one line, with header buttons that switch between desktop and mobile and show each total, in React with TanStack Charts. - [Pie Chart](https://www.shadcn.io/charts/pie-simple.md): A plain pie, one slice per browser sized by its share of visitors. The base for any parts-of-a-whole chart in React, drawn with TanStack Charts. - [Pie Chart with Labels](https://www.shadcn.io/charts/pie-label.md): A pie with each slice's visitor count printed just past its rim on a short leader line, readable without hovering. A labeled pie chart for React. - [Pie Chart with Label List](https://www.shadcn.io/charts/pie-label-list.md): A pie with each browser's name printed inside its own slice in the background color, so the chart needs no legend. For React on TanStack Charts. - [Pie Chart with Custom Labels](https://www.shadcn.io/charts/pie-label-custom.md): A pie with visitor counts just outside each slice in the text color, no leader lines, and what each label says up to you. For React on TanStack Charts. - [Pie Chart with Legend](https://www.shadcn.io/charts/pie-legend.md): A pie with a legend under it, each browser's name beside its swatch, for when labels on the slices would crowd. For React on TanStack Charts. - [Pie Chart without Separators](https://www.shadcn.io/charts/pie-separator.md): A pie whose slices meet edge to edge with no seams: a solid disc for when the colors alone tell the parts apart. For React on TanStack Charts. - [Donut Chart](https://www.shadcn.io/charts/pie-donut.md): A pie with a hollow center: five browser shares on a ring, with room in the middle for a total or an icon. A donut chart for React on TanStack Charts. - [Donut Chart with Text](https://www.shadcn.io/charts/pie-donut-text.md): A donut with the total, 1,125 visitors, written in its hollow center, so the card shows the whole and its parts at once. For React on TanStack Charts. - [Donut Chart with Active Sector](https://www.shadcn.io/charts/pie-donut-active.md): A donut with one slice pushed 10px past the ring to mark the share that matters, a highlight that holds without hover. For React on TanStack Charts. - [Stacked Pie Chart](https://www.shadcn.io/charts/pie-stacked.md): Two rings of monthly slices, desktop inside and mobile around it, to compare how two series split across the same months. For React on TanStack Charts. - [Interactive Pie Chart](https://www.shadcn.io/charts/pie-interactive.md): A donut where a select picks the month: its slice grows, an outer ring wraps it and the center shows its count. Interactive, for React on TanStack Charts. - [Radar Chart](https://www.shadcn.io/charts/radar-simple.md): One series plotted around six spokes on a polygon grid, the months joined into a filled shape. Compare one profile across categories in React. - [Multiple Radar Chart](https://www.shadcn.io/charts/radar-multiple.md): Two series overlaid on one radar grid, Desktop and Mobile, so you compare two profiles month by month in a single shape. Drawn with TanStack Charts. - [Radar Chart with Dots](https://www.shadcn.io/charts/radar-dots.md): A radar with a solid dot on every value, so each month's reading stands out from the filled shape. One series in React, drawn with TanStack Charts. - [Radar Chart with Legend](https://www.shadcn.io/charts/radar-legend.md): Desktop and Mobile overlaid on one radar grid, with a legend under it naming each color. A two-series comparison for React built on TanStack Charts. - [Radar Chart with Circle Grid](https://www.shadcn.io/charts/radar-grid-circle.md): A radar drawn over round rings instead of polygons, with dots on each value. A softer grid for one series across six months in React. - [Radar Chart with Filled Circle Grid](https://www.shadcn.io/charts/radar-grid-circle-fill.md): A radar on filled round rings: tinted circles with faint outlines behind a soft shape. A polished one-series profile for React dashboards. - [Radar Chart with Circle Grid, No Lines](https://www.shadcn.io/charts/radar-grid-circle-no-lines.md): Round rings with no spokes from the center: a target-like grid behind one series with dots on its values, drawn in React with TanStack Charts. - [Radar Chart with Filled Grid](https://www.shadcn.io/charts/radar-grid-fill.md): A radar on filled polygon rings that echo its own shape, the grid lines faded. One series in React, the backdrop tinted in the series color. - [Radar Chart with Custom Grid](https://www.shadcn.io/charts/radar-grid-custom.md): A radar with one polygon ring around the shape and no spokes, so the grid frames the data instead of measuring it. One series in React. - [Radar Chart without Grid](https://www.shadcn.io/charts/radar-grid-none.md): A radar with no grid at all: only the filled shape, its dots and the month names. The leanest way to show one profile in React with TanStack Charts. - [Radar Chart with Lines Only](https://www.shadcn.io/charts/radar-lines-only.md): Two radar series drawn as outlines with no fill, so neither hides the other where they cross. A clean overlay of close profiles in React. - [Radar Chart with Custom Labels](https://www.shadcn.io/charts/radar-label-custom.md): A two-series radar whose spoke labels print both values above each month's name, so people read the numbers without hovering. Built in React. - [Radar Chart with Icons](https://www.shadcn.io/charts/radar-icons.md): Two radar series with a legend that shows an icon for each, Desktop and Mobile, in place of the color swatch. Built in React on TanStack Charts. - [Radar Chart with Radius Axis](https://www.shadcn.io/charts/radar-radius.md): A two-series radar with its radius values printed along one spoke, 0 to 320, so the rings read as numbers. Built in React with TanStack Charts. - [Radial Chart](https://www.shadcn.io/charts/radial-simple.md): Five browsers as concentric rings, each as long as its visitor count, over muted tracks. A square React chart for ranking a few categories. - [Radial Chart with Labels](https://www.shadcn.io/charts/radial-label.md): Radial bars with each browser's name printed in white at the start of its ring, so the chart reads without a legend. Built in React. - [Radial Chart with Grid](https://www.shadcn.io/charts/radial-grid.md): Five browser rings over circular grid lines and spokes, with no track behind them, so you read each arc against the grid. In React on TanStack Charts. - [Radial Chart with Text](https://www.shadcn.io/charts/radial-text.md): One rounded progress ring over a muted track, with its value, 200 visitors, written in the center. A single-number React chart on TanStack Charts. - [Radial Chart with Custom Shape](https://www.shadcn.io/charts/radial-shape.md): A thick bar over a thinner muted track, swept 100 degrees, with 1,260 visitors in the center. A bolder React gauge, drawn with TanStack Charts. - [Stacked Radial Chart](https://www.shadcn.io/charts/radial-stacked.md): Desktop and mobile stacked end to end on a half ring, with their total of 1,830 in the middle. A React gauge for two parts of a whole. - [Chart Tooltip](https://www.shadcn.io/charts/tooltip-default.md): The tooltip every other variant starts from: the hovered day as a label, then each series with a color dot and its value, in React on TanStack Charts. - [Chart Tooltip with Line Indicator](https://www.shadcn.io/charts/tooltip-indicator-line.md): A tooltip that marks each series with a thin vertical bar instead of a dot, the indicator that suits line and area charts, in React with TanStack Charts. - [Chart Tooltip without Indicator](https://www.shadcn.io/charts/tooltip-indicator-none.md): A tooltip with no color marks: the date, then each series' name and value as plain text, for charts whose series are already easy to tell apart. - [Chart Tooltip with Custom Label](https://www.shadcn.io/charts/tooltip-label-custom.md): A tooltip headed by a name from the chart's config, Activities, rather than the hovered date, with a line beside each series, in React on TanStack Charts. - [Chart Tooltip with Label Formatter](https://www.shadcn.io/charts/tooltip-label-formatter.md): A tooltip whose heading turns the raw 2024-07-16 into a full date, the format a reader expects, above each series and its value, in React. - [Chart Tooltip without Label](https://www.shadcn.io/charts/tooltip-label-none.md): The smallest tooltip: no heading and no color marks, only each series' name and value, for charts where the hovered point speaks for itself. - [Chart Tooltip with Formatter](https://www.shadcn.io/charts/tooltip-formatter.md): A tooltip whose rows carry their own unit, 450 kcal not 450, with the date heading and the color dots dropped, on a stacked bar chart in React. - [Chart Tooltip with Icons](https://www.shadcn.io/charts/tooltip-icons.md): A tooltip that marks each series with its icon, footprints for running and waves for swimming, set once in the chart's config, in React. - [Advanced Chart Tooltip](https://www.shadcn.io/charts/tooltip-advanced.md): A tooltip that writes every value in kcal and adds a Total row under the series, on a stacked bar chart in React with TanStack Charts. ## Templates - [All templates](https://www.shadcn.io/template): 14 premium templates, complete Next.js sites built with Tailwind CSS and shadcn/ui, included with Pro; and 215 open-source templates from the community, free. - [Solaris](https://www.shadcn.io/template/solaris): The fastest Next.js + shadcn/ui template for AI agent startups. Production-ready hero, pricing, capability cards, and a real dashboard preview. Premium, with Pro. - [Reframe Labs](https://www.shadcn.io/template/reframe): Premium Next.js + shadcn/ui template for AI-first studios and creative agencies. Hero, project showcase, services, and conversion-ready CTAs. Premium, with Pro. - [Spherule](https://www.shadcn.io/template/spherule): Conversion-focused Next.js + shadcn/ui template for social-media growth SaaS — animated hero, success stories, pricing tiers, and FAQ. Premium, with Pro. - [Max](https://www.shadcn.io/template/max): Bold Next.js + shadcn/ui portfolio template for creative developers and freelance designers. Hero, brand list, case studies, testimonials. Premium, with Pro. - [Zel Designs](https://www.shadcn.io/template/zel): Problem-solving Next.js + shadcn/ui portfolio template for freelance designers in SaaS and fintech. Bold hero, project list, case studies. Premium, with Pro. - [Arete](https://www.shadcn.io/template/arete): Story-driven Next.js + shadcn/ui portfolio template for freelance creative developers. Outsized hero, services list, esteemed-clients section. Premium, with Pro. - [Lightbox](https://www.shadcn.io/template/lightbox): Premium Next.js + shadcn/ui template for AI consultancies and custom-AI studios. Hero, services breakdown, process flow, case studies, FAQ. Premium, with Pro. - [Chatly](https://www.shadcn.io/template/chatly): Consumer-mobile Next.js + shadcn/ui template for AI-assisted messaging apps. Privacy-first hero, smart-reply feature grid, testimonials, FAQ. Premium, with Pro. - [Alt+Shift](https://www.shadcn.io/template/altshift): Pre-launch Next.js + shadcn/ui template for expert-services SaaS. Beta-signup hero, countdown-to-launch, instructor-application CTA, contact-sales tier. Premium, with Pro. - [Prodexa](https://www.shadcn.io/template/prodexa): Productivity & task-management Next.js + shadcn/ui SaaS template. Dashboard hero, feature grid, integrations wall, testimonials, 3-tier pricing, and FAQ. Premium, with Pro. - [Studio IX](https://www.shadcn.io/template/studio-ix): Premium Next.js + shadcn/ui agency template with hero, services, testimonials, pricing, contact form, and an editorial blog — built to win MVP work for product studios and indie agencies. Premium, with Pro. - [MeetingIQ](https://www.shadcn.io/template/meeting-iq): Conversion-optimized Next.js + shadcn/ui landing page template for AI-powered sales tools — bold headline, frictionless email capture, and integration-driven feature highlights. Premium, with Pro. - [Galileo](https://www.shadcn.io/template/galileo): Sleek Next.js + shadcn/ui mobile-app waitlist template — modern, responsive, email-capture-first design that turns landing-page traffic into early adopters. Premium, with Pro. - [Culio](https://www.shadcn.io/template/culio): High-conversion Next.js + shadcn/ui waitlist template for restaurant tech and hospitality SaaS startups — built to capture early adopters before launch day. Premium, with Pro. ## Animated buttons - [All animated buttons](https://www.shadcn.io/button): 35 buttons with motion and states of their own, each CSS on a Button, in React, Vue, Svelte and Solid. 9 free with an account, the rest with Pro. - [Arrow Button](https://www.shadcn.io/button/arrow-button.md): A button whose arrow slides in on hover or focus, for Get started, Next and Continue. For React with Base UI, when an action should point forward. - [Border Trace Button](https://www.shadcn.io/button/border-trace-button.md): A button whose edge is drawn by a glowing line on hover, like a pen going once around it. For React with Base UI, when an action should feel precise. - [Confetti Button](https://www.shadcn.io/button/confetti-button.md): Throws a burst of confetti from the point it was pressed, to celebrate a finished action. For React with Base UI, when a purchase or a goal deserves it. - [Copy Button](https://www.shadcn.io/button/copy-button.md): Copies text to the clipboard and swaps its icon for a check. For React with Base UI, next to code, links and keys people need to paste. - [Countdown Button](https://www.shadcn.io/button/countdown-button.md): Runs its action, then counts the seconds down in its label until it works again. For React with Base UI, to resend a code or retry after a rate limit. - [Counter Button](https://www.shadcn.io/button/counter-button.md): A button whose number rolls to its next value on each press, for likes, votes and carts. For React with Base UI, when a count should feel like it moved. - [Depth Button](https://www.shadcn.io/button/depth-button.md): Stands raised on an edge of its own color and drops onto it when pressed. For React with Base UI, when a button should feel like a physical key. - [Download Button](https://www.shadcn.io/button/download-button.md): Fills with a download's progress, from a download icon to a spinner to a check. For React with Base UI, for exports and large files people wait on. - [Flip Button](https://www.shadcn.io/button/flip-button.md): Rolls over in 3D on hover to show its back, like a price that becomes Get started. For React with Base UI, when one button has two things to say. - [Flow Button](https://www.shadcn.io/button/flow-button.md): A calm ring whose lit half turns around the edge on hover, then back. For React with Base UI, when a button should answer hover but sit still at rest. - [GitHub Stars Button](https://www.shadcn.io/button/github-stars-button.md): A link button to a GitHub repo showing its live star count, compact and cached. For React with Base UI, when a project's traction is part of the pitch. - [Glass Button](https://www.shadcn.io/button/glass-button.md): A translucent button that blurs what sits behind it, like frosted glass. For React with Base UI, when a button sits on a photo, a video or a gradient. - [Glow Border Button](https://www.shadcn.io/button/glow-border-button.md): A ring of color circles the button's edge without end, haloed in the same light. For React with Base UI, when one action should look switched on. - [Gradient Button](https://www.shadcn.io/button/gradient-button.md): A button whose gradient fill slides back and forth, in vivid colors or your theme's. For React with Base UI, when one call to action must stand out. - [Icon Button](https://www.shadcn.io/button/icon-button.md): An icon toggle that fills and bursts with particles when it turns on, for likes and bookmarks. For React with Base UI, when a toggle needs feedback. - [Input Button](https://www.shadcn.io/button/input-button.md): A button that opens into a text field with its own submit, for a signup or a search. For React with Base UI, when a form shouldn't take room at rest. - [Kbd Button](https://www.shadcn.io/button/kbd-button.md): Shows its keyboard shortcut in key caps beside the label, so the faster way is in sight. For React with Base UI, when power users should learn it. - [Liquid Button](https://www.shadcn.io/button/liquid-button.md): Fills from the bottom on hover like water, the label recoloring at the waterline. For React with Base UI, when a submit should feel like it fills up. - [Loading Button](https://www.shadcn.io/button/loading-button.md): Shows a spinner by its label while an action runs and ignores presses until done. For React with Base UI, on saves and submits that wait on a server. - [Long Press Button](https://www.shadcn.io/button/long-press-button.md): Confirms only after it's held, with a fill that grows while pressed. For React with Base UI, when one tap is too easy for an action you can't undo. - [Magnetic Button](https://www.shadcn.io/button/magnetic-button.md): Leans toward the pointer while it's over it and springs back when it leaves. For React with Base UI, when a hero call to action should invite the click. - [Neon Button](https://www.shadcn.io/button/neon-button.md): Lights up with a neon glow on hover, flickering on like a sign, then humming. For React with Base UI, when an action should feel electric in a dark UI. - [Pill Button](https://www.shadcn.io/button/pill-button.md): A fully rounded button a fill slides into on hover, the label recoloring at its edge. For React with Base UI, when a call to action should feel solid. - [Pulse Button](https://www.shadcn.io/button/pulse-button.md): Two rings pulse out from the button's edge, drawing the eye to the one action that matters. For React with Base UI, for an onboarding step or upgrade. - [Record Button](https://www.shadcn.io/button/record-button.md): A red dot that squares off into a stop sign, with a ring that pulses while recording. For React with Base UI, for voice memos, video and screen capture. - [Ripple Button](https://www.shadcn.io/button/ripple-button.md): Sends a ripple out from the exact point it was pressed, as feedback that the press landed. For React with Base UI, when a tap should feel answered. - [Shake Button](https://www.shadcn.io/button/shake-button.md): Shakes its head side to side when an action didn't go through. For React with Base UI, when a failed submit needs a signal right where the click was. - [Shimmer Button](https://www.shadcn.io/button/shimmer-button.md): A button framed by a thin ring that a glint of light keeps running across. For React with Base UI, when one call to action should feel quietly alive. - [Shine Button](https://www.shadcn.io/button/shine-button.md): A diagonal band of light sweeps across the button once when the pointer arrives. For React with Base UI, when a call to action deserves a little polish. - [Slide To Confirm Button](https://www.shadcn.io/button/slide-to-confirm-button.md): A pill with a handle to drag across, so a stray tap can't trigger the action. For React with Base UI, when a payment or delete needs a deliberate move. - [Spotlight Button](https://www.shadcn.io/button/spotlight-button.md): A soft light follows the pointer across the button and lights its edge. For React with Base UI, when a call to action should answer before a press. - [Stitch Button](https://www.shadcn.io/button/stitch-button.md): A button with a stitched line just inside its edge and soft inner shading, like leather. For React with Base UI, when a button should feel handmade. - [Success Button](https://www.shadcn.io/button/success-button.md): Goes from its label to a spinner to a check that draws itself in. For React with Base UI, when a save or a send needs confirming without a toast. - [Theme Toggle Button](https://www.shadcn.io/button/theme-toggle-button.md): An icon button that switches light and dark, turning the sun into the moon. For React with Base UI, when a header needs a theme switch for any setup. - [Underline Button](https://www.shadcn.io/button/underline-button.md): A text button whose underline grows from the center on hover, for nav and quiet actions. For React with Base UI, when a link needs a clear hover. ## Text effects - [All text effects](https://www.shadcn.io/text): 97 text effects for headlines, labels and numbers, each taking a string, in React, Vue, Svelte and Solid. 10 free with an account, the rest with Pro. - [Anagram Text](https://www.shadcn.io/text/anagram-text.md): Words that rearrange their own letters, each shared letter sliding to its new place. For React with Base UI, when one word should turn into another. - [Annotation Text](https://www.shadcn.io/text/annotation-text.md): Underline, box, circle, strike or bracket a word with a mark that draws itself like a pen. For React with Base UI, when a word deserves a margin note. - [Backspace Text](https://www.shadcn.io/text/backspace-text.md): Types a line, backspaces only as far as it must and retypes, as a person would. For React with Base UI, when a line should read as a thought revised. - [Binary Text](https://www.shadcn.io/text/binary-text.md): Each character flips between 0 and 1 before it settles. For React with Base UI, when a headline should feel computed rather than written. - [Blur Text](https://www.shadcn.io/text/blur-text.md): Words come into focus one at a time, each fading in from a soft blur. For React with Base UI, when a headline should arrive as the page scrolls to it. - [Bouncing Text](https://www.shadcn.io/text/bouncing-text.md): Letters bounce one after another, leaping off the line and landing lower each time. For React with Base UI, when a headline should celebrate something. - [Breathing Text](https://www.shadcn.io/text/breathing-text.md): The line slowly shrinks a touch and fades, then fills back, like a breath. For React with Base UI, when a calm screen or a wait should feel alive. - [Caps Toggle Text](https://www.shadcn.io/text/caps-toggle-text.md): Letters turn to capitals and back in a wave along the line. For React with Base UI, when a link should answer the pointer with a change of case. - [Chromatic Text](https://www.shadcn.io/text/chromatic-text.md): Red and cyan copies slip out from behind the letters. For React with Base UI, when a headline should look seen through a lens. - [Chrome Text](https://www.shadcn.io/text/chrome-text.md): A chrome finish that reflects sky and ground, with a band of light sweeping across. For React with Base UI, when a headline should look expensive. - [Circular Text](https://www.shadcn.io/text/circular-text.md): Text set around a ring that turns slowly and speeds up under the pointer. For React with Base UI, when a badge, seal or scroll cue should spin. - [Clock Text](https://www.shadcn.io/text/clock-text.md): Live clock digits rise into place as they change, the separators pulsing. For React with Base UI, when a page should show the time in any city. - [Colourful Text](https://www.shadcn.io/text/colourful-text.md): Every letter wears its own colour and swaps it in a wave, blurring for a moment as it changes. For React with Base UI, when one word should feel lively. - [Container Text Flip](https://www.shadcn.io/text/container-text-flip.md): A boxed word flips to the next, the box growing or shrinking to fit each one. For React with Base UI, when a headline's changing word should stand out. - [Copy Text](https://www.shadcn.io/text/copy-text.md): Press to copy: the text slides away as Copied rises, then comes back. For React with Base UI, when a command, key or link should copy in one press. - [Countdown Text](https://www.shadcn.io/text/countdown-text.md): A live countdown whose digits drop into place as each second runs out. For React with Base UI, when a launch, a sale or a wait has a real deadline. - [Counting Number](https://www.shadcn.io/text/counting-number.md): Counts up through every number on the way to its value, slowing as it lands. For React with Base UI, when a statistic should arrive with momentum. - [Curved Loop](https://www.shadcn.io/text/curved-loop.md): Text that flows along a curve without end, like a marquee bent into a wave. For React with Base UI, when a hero or a section break needs moving text. - [Decrypted Text](https://www.shadcn.io/text/decrypted-text.md): Every character runs through scrambled glyphs before it settles. For React with Base UI, when a label should feel like it's being decoded. - [Diff Text](https://www.shadcn.io/text/diff-text.md): A diff plays out line by line, removed lines struck through and added ones sliding in. For React with Base UI, when a changelog shows what changed. - [Dot Matrix Text](https://www.shadcn.io/text/dot-matrix-text.md): Characters lit from a 5×7 font on an LED grid, still or running like a ticker. For React with Base UI, when a sign or departure board should look lit. - [Drift Text](https://www.shadcn.io/text/drift-text.md): Every letter bobs and sways slowly on its own, like leaves drifting on water. For React with Base UI, when a calm line should feel quietly alive. - [Drop Cap Text](https://www.shadcn.io/text/drop-cap-text.md): A large initial sunk into the first lines, inked in as it scrolls into view. For React with Base UI, when an article should open like a printed page. - [Echo Text](https://www.shadcn.io/text/echo-text.md): Fainter copies trail behind the text and catch up one after another when it changes. For React with Base UI, when a word should reverberate on the page. - [Elastic Text](https://www.shadcn.io/text/elastic-text.md): Rubbery letters stretch towards the pointer and spring back with a wobble. For React with Base UI, when a headline should feel playful to touch. - [Emboss Text](https://www.shadcn.io/text/emboss-text.md): Raised or pressed-in letters with a lit edge and a soft shadow, in CSS only. For React with Base UI, when a label should feel stamped into the page. - [Erase Text](https://www.shadcn.io/text/erase-text.md): Rub letters out with the pointer; they drift back once it has passed. For React with Base UI, when plain copy should feel like a surface to touch. - [Flickering Text](https://www.shadcn.io/text/flickering-text.md): Letters dip and blink on their own rhythms, like a dying tube. For React with Base UI, when a headline should look like a sign that's seen better days. - [Flip Words](https://www.shadcn.io/text/flip-words.md): Words flip in place one after another, the next rising in letter by letter. For React with Base UI, when a headline's key word should keep changing. - [Foil Text](https://www.shadcn.io/text/foil-text.md): Type printed in holographic foil, its rainbows sliding as the pointer moves. For React with Base UI, when a word should feel like a collectible. - [Fuzzy Text](https://www.shadcn.io/text/fuzzy-text.md): Rows of pixels shake like a weak analogue signal, harder or clear on hover. For React with Base UI, when a headline should feel tuned in from static. - [Glitch Text](https://www.shadcn.io/text/glitch-text.md): Bands of text tear and jump sideways in red and cyan, like a corrupted signal. For React with Base UI, when a headline should look broken on purpose. - [Gloss Text](https://www.shadcn.io/text/gloss-text.md): Letters glossy as candy or plastic, with a highlight that follows the pointer. For React with Base UI, when a word should look good enough to touch. - [Gradient Text](https://www.shadcn.io/text/gradient-text.md): Colour flows through the letters in a gradient that loops without a seam. For React with Base UI, when one word in a headline should catch the eye. - [Gravity Text](https://www.shadcn.io/text/gravity-text.md): Letters fall off their line, bounce and pile up at the bottom, then fly back at a click. For React with Base UI, when a headline needs a punchline. - [Highlight Text](https://www.shadcn.io/text/highlight-text.md): Highlighter colour that draws itself across a phrase. For React with Base UI, when one phrase in a sentence should stand out as people read it. - [Inertia Text](https://www.shadcn.io/text/inertia-text.md): Drag the text and it trails the pointer like a string of beads, springing home when let go. For React with Base UI, when a headline should invite a tug. - [Iris Text](https://www.shadcn.io/text/iris-text.md): Like a camera's iris, a circle grows from each letter's centre to reveal it. For React with Base UI, when a title should be revealed rather than moved. - [JSON Text](https://www.shadcn.io/text/json-text.md): JSON that writes itself out, each key typed and its value following. For React with Base UI, when an API response or config should look written live. - [Kerning Text](https://www.shadcn.io/text/kerning-text.md): Letters part around the pointer, as if it were kerning the line by hand. For React with Base UI, when a headline should feel carefully typeset. - [LCD Text](https://www.shadcn.io/text/lcd-text.md): Seven-segment characters power on one at a time, flickering before they settle. For React with Base UI, when a readout should look like hardware. - [Line Shadow Text](https://www.shadcn.io/text/line-shadow-text.md): Fine diagonal lines drift slowly through the text's hatched shadow. For React with Base UI, when a headline should have the depth of a screen print. - [Liquid Text](https://www.shadcn.io/text/liquid-text.md): Letters sway like a liquid and melt into each other where they touch. For React with Base UI, when a headline should look alive and fluid on the page. - [Log Stream Text](https://www.shadcn.io/text/log-stream-text.md): A fixed-height live log: lines arrive at the bottom, glide up and fade out. For React with Base UI, when a page should show a server or build at work. - [Magnet Text](https://www.shadcn.io/text/magnet-text.md): Letters lean towards the pointer like iron filings to a magnet, then spring home. For React with Base UI, when a headline should feel drawn in. - [Magnify Text](https://www.shadcn.io/text/magnify-text.md): Letters under the pointer grow beneath a magnifying glass that follows it. For React with Base UI, when a word deserves a closer look. - [Mask Reveal Text](https://www.shadcn.io/text/mask-reveal-text.md): A panel wipes across the text, covers it, then slides away to reveal it. For React with Base UI, when a headline should arrive in one decisive cut. - [Morph Text](https://www.shadcn.io/text/morph-text.md): One word melts into the next in place, through a soft blur. For React with Base UI, when a headline or a status should change without moving. - [Neon Text](https://www.shadcn.io/text/neon-text.md): Neon tube letters in a halo of their own colour that flicker on and hum. For React with Base UI, when a headline on a dark surface should glow. - [Outline Text](https://www.shadcn.io/text/outline-text.md): Hollow letters flood with colour from one side, on hover, in view or in a loop. For React with Base UI, when a headline should fill as you reach it. - [Paint Text](https://www.shadcn.io/text/paint-text.md): Letters the pointer passes take a colour, keep it for a moment, then fade back. For React with Base UI, when a headline should invite a brushstroke. - [Paper Cut Text](https://www.shadcn.io/text/paper-cut-text.md): Letters cut from stacked paper layers that tilt toward the pointer like a pop-up book. For React with Base UI, when a headline should look made by hand. - [Paper Fold Text](https://www.shadcn.io/text/paper-fold-text.md): The upper half of each letter swings up into place, like paper unfolding. For React with Base UI, when a title should feel crafted and tactile. - [Password Text](https://www.shadcn.io/text/password-text.md): Dots, like a password field, that turn back into the text a character at a time. For React with Base UI, when a key or a code should stay hidden. - [Pendulum Text](https://www.shadcn.io/text/pendulum-text.md): Letters hang on threads and swing like pendulums when the pointer brushes them. For React with Base UI, when a headline should sway at a touch. - [Pop Text](https://www.shadcn.io/text/pop-text.md): Each letter springs past its size with a burst of rays, like a comic-book sound effect. For React with Base UI, when a word should land with a bang. - [Progress Text](https://www.shadcn.io/text/progress-text.md): A percentage that winds up to its value like an odometer's reels. For React with Base UI, when a figure says how far something has got. - [Rainbow Text](https://www.shadcn.io/text/rainbow-text.md): Every hue of the colour wheel rolls slowly through the letters. For React with Base UI, when a word should feel playful rather than branded. - [Redact Text](https://www.shadcn.io/text/redact-text.md): Words under black bars come off one after another, like a declassified file. For React with Base UI, when a line should keep a secret, then tell it. - [Regex Text](https://www.shadcn.io/text/regex-text.md): Each regex match is marked, and a highlight walks from one match to the next. For React with Base UI, when a pattern should show what it finds. - [Relative Time Text](https://www.shadcn.io/text/relative-time-text.md): Times like 5 minutes ago or in 3 days, kept true as time passes. For React with Base UI, when a timestamp reads better as how long ago it was. - [Ripple Text](https://www.shadcn.io/text/ripple-text.md): Press a letter and a wave runs out from it, rippling through the text like a pond. For React with Base UI, when a headline should answer a tap. - [Rolling Text](https://www.shadcn.io/text/rolling-text.md): Characters roll over one after another, like the faces of a turning drum. For React with Base UI, when a link should turn over with a mechanical click. - [Rotating Text](https://www.shadcn.io/text/rotating-text.md): Words roll through a window like a slot machine's reel, letter by letter. For React with Base UI, when one word in a sentence should keep changing. - [Scrambled Text](https://www.shadcn.io/text/scrambled-text.md): Characters under the pointer churn through glyphs and settle back behind it. For React with Base UI, when a paragraph should answer the pointer. - [Scroll Velocity](https://www.shadcn.io/text/scroll-velocity.md): Rows of text slide sideways without end and speed up as the page scrolls. For React with Base UI, when a landing page needs bold moving type. - [Search Highlight Text](https://www.shadcn.io/text/search-highlight-text.md): Marks every match of a search as you type, each rising from an underline. For React with Base UI, when an FAQ or a list should show where the query is. - [Shatter Text](https://www.shadcn.io/text/shatter-text.md): Click and the text shatters like glass; click again and it springs back together. For React with Base UI, when a headline should break on impact. - [Shimmering Text](https://www.shadcn.io/text/shimmering-text.md): Light runs through the text, each character brightening in turn. For React with Base UI, when a status is working or a headline should glint. - [Shuffle](https://www.shadcn.io/text/shuffle.md): Each letter slides sideways through other letters before it lands, like a slot machine. For React with Base UI, when a headline should land with a spin. - [Skeleton Text](https://www.shadcn.io/text/skeleton-text.md): Shimmering bars while it loads, then the words come in one by one. For React with Base UI, when text should replace a skeleton without a jump. - [Sliding Number](https://www.shadcn.io/text/sliding-number.md): Digits roll like an odometer to each new value. For React with Base UI, when a count, a price or a score changes in front of people. - [Smallcaps Text](https://www.shadcn.io/text/smallcaps-text.md): Letters settle into the font's small capitals and back, in turn. For React with Base UI, when an editorial heading should change its type with care. - [Spiral Text](https://www.shadcn.io/text/spiral-text.md): Text wound into a slowly turning spiral, each letter smaller than the last. For React with Base UI, when a cover or hero mark should draw the eye in. - [Splitting Text](https://www.shadcn.io/text/splitting-text.md): Characters, words or lines slide into place one after another. For React with Base UI, when a headline should assemble itself as the page loads. - [Spotlight Text](https://www.shadcn.io/text/spotlight-text.md): Under a spotlight that follows the pointer, the rest of the line dims. For React with Base UI, when a headline should come alive under the pointer. - [Stamp Text](https://www.shadcn.io/text/stamp-text.md): Each letter lands with a snap and a slight lean, like a rubber stamp. For React with Base UI, when a word should feel printed by hand. - [Status Pulse Text](https://www.shadcn.io/text/status-pulse-text.md): A coloured dot beside a status, a ring swelling out of it and fading. For React with Base UI, when a status should read as live at a glance. - [Stretch Text](https://www.shadcn.io/text/stretch-text.md): Rubbery letters squash flat against the line and spring up tall, one after another. For React with Base UI, when a playful headline needs some bounce. - [Syntax Text](https://www.shadcn.io/text/syntax-text.md): Code comes in token by token, coloured like an editor. For React with Base UI, when a short code sample on a landing page should feel alive. - [Terminal Text](https://www.shadcn.io/text/terminal-text.md): A terminal that plays itself: commands typed at a prompt, output printed line by line. For React with Base UI, when a CLI should be shown running. - [Text Cursor](https://www.shadcn.io/text/text-cursor.md): Sparkles, emoji or a word spelled along the path trail behind the pointer. For React with Base UI, when a section should sparkle under the pointer. - [Text Generate Effect](https://www.shadcn.io/text/text-generate-effect.md): Words appear one by one and sharpen into focus, as if being generated. For React with Base UI, when an AI reply should feel written as people watch. - [Text Hover Effect](https://www.shadcn.io/text/text-hover-effect.md): Outlined text draws itself in, then lights up in a gradient under the pointer. For React with Base UI, when a display word should glow where you look. - [Text Pressure](https://www.shadcn.io/text/text-pressure.md): A full-width word whose light letters swell heavy and wide under the pointer. For React with Base UI, when a display word should answer the pointer. - [Text Reveal](https://www.shadcn.io/text/text-reveal.md): Two texts in one place, the pointer wiping one away to show the other like a before-and-after. For React with Base UI, when a line has a twist. - [Tilt Text](https://www.shadcn.io/text/tilt-text.md): Text tilts in 3D toward the pointer like a card in the hand, then settles flat. For React with Base UI, when a headline should feel like an object. - [Timecode Text](https://www.shadcn.io/text/timecode-text.md): A running SMPTE timecode, hours to frames, stepped by CSS alone. For React with Base UI, when a page should feel like an edit suite or a control room. - [True Focus](https://www.shadcn.io/text/true-focus.md): Like a camera pulling focus, one word at a time is sharp and the rest blurred. For React with Base UI, when a line should be read word by word. - [Typing Indicator Text](https://www.shadcn.io/text/typing-indicator-text.md): Who's typing, then three dots rising in a wave, as a chat shows while a message is written. For React with Base UI, when a reply is on its way. - [Typing Text](https://www.shadcn.io/text/typing-text.md): Types text out behind a blinking caret, or types and deletes several lines in turn. For React with Base UI, when a hero should feel written live. - [Variable Proximity](https://www.shadcn.io/text/variable-proximity.md): Letters grow heavier as the pointer comes near, each by its own distance from it. For React with Base UI, when a headline should answer the pointer. - [Wave Text](https://www.shadcn.io/text/wave-text.md): Each letter rises, sinks and tilts with the slope of a wave beneath it. For React with Base UI, when a headline should feel playful and never sit still. - [Waveform Text](https://www.shadcn.io/text/waveform-text.md): A quick wave runs through the text from start to end, loudest in the middle. For React with Base UI, when a headline should feel like sound. - [Wobble Text](https://www.shadcn.io/text/wobble-text.md): Like jelly, every letter rocks and swells a beat behind the last, harder when pointed at. For React with Base UI, when a word should feel playful. - [Writing Text](https://www.shadcn.io/text/writing-text.md): Text written out a word at a time, at the rhythm of reading it aloud. For React with Base UI, when a tagline or a quote should arrive calmly. - [Xray Text](https://www.shadcn.io/text/xray-text.md): Through a round hole that follows the pointer, a secret line shows beneath the text. For React with Base UI, when a headline hides a second message. ## Backgrounds - [All backgrounds](https://www.shadcn.io/background): 100 backgrounds for heroes, sections and cards, most of them pure CSS, in React, Vue, Svelte and Solid. 10 free with an account, the rest with Pro. - [Aurora Background](https://www.shadcn.io/background/aurora.md): Soft curtains of green light drift across the box like the northern lights. For React with Base UI, when a hero needs color and slow motion. - [Beams Background](https://www.shadcn.io/background/beams.md): Curved light beams sweep behind your content in cyan, violet and pink. For React with Base UI, when an AI or SaaS hero needs a modern look. - [Beams Collision Background](https://www.shadcn.io/background/beams-collision.md): Light beams fall behind your content and burst into sparks when they hit the floor. For React with Base UI, when a launch hero needs energy. - [Blueprint Background](https://www.shadcn.io/background/blueprint.md): Technical drawings sketch themselves on grid paper, stroke by stroke, then erase. For React with Base UI, when an engineering page should look planned. - [Bokeh Background](https://www.shadcn.io/background/bokeh.md): Out-of-focus circles of light drift and gently breathe, like the blur behind a portrait. For React with Base UI, when a hero should feel warm and calm. - [Boxes Background](https://www.shadcn.io/background/boxes.md): Each box in an isometric grid lights up in pastel as the pointer crosses it, then fades. For React with Base UI, when a portfolio should invite play. - [Brainwaves Background](https://www.shadcn.io/background/brainwaves.md): EEG channels drift past in your theme's tint, each with its own rhythm, noise and spikes. For React with Base UI, when a health hero should look live. - [Bubbles Background](https://www.shadcn.io/background/bubbles.md): Soap bubbles float up in depth, each with a thin film of swirling colour and a highlight. For React with Base UI, when a playful hero needs airy motion. - [Caustics Background](https://www.shadcn.io/background/caustics.md): The bright net of light that sways across a pool floor, drifting behind your content. For React with Base UI, when a page should feel underwater. - [Circles Background](https://www.shadcn.io/background/circles.md): Glowing rings turn around the centre, carrying bright arcs with long fading tails. For React with Base UI, when a hero should feel technical but calm. - [Circuit Background](https://www.shadcn.io/background/circuit.md): Chips fan out into circuit traces with 45° jogs, and short signals race along them. For React with Base UI, when a dev tool page should look wired. - [Confetti Background](https://www.shadcn.io/background/confetti.md): Confetti drifts down behind your content, each piece swaying, flipping and catching light. For React with Base UI, when a launch should feel festive. - [Constellation Background](https://www.shadcn.io/background/constellation.md): Drifting nodes joined by lines that fade with distance, pushed aside by the pointer. For React with Base UI, when an AI page needs a connected network. - [Corona Background](https://www.shadcn.io/background/corona.md): A giant sun just above the edge pours soft rays and warm haze into a cooling sky. For React with Base UI, when a calm hero needs warm light. - [Crystals Background](https://www.shadcn.io/background/crystals.md): Frost grows in from the edges of a window pane, holds, recedes and grows again. For React with Base UI, when a winter page wants a quiet, living frame. - [Deep Sea Background](https://www.shadcn.io/background/deep-sea.md): Glowing jellyfish drift through deep water as marine snow sinks around them. For React with Base UI, when a hero should feel deep and mysterious. - [Disco Background](https://www.shadcn.io/background/disco.md): A turning mirror ball sweeps hundreds of soft coloured spots across the section. For React with Base UI, when a party page should feel like a night out. - [DNA Background](https://www.shadcn.io/background/dna.md): DNA double helices turn slowly at different depths, the far ones out of focus. For React with Base UI, when a biotech page wants science that moves. - [Dot Pattern](https://www.shadcn.io/background/dot-pattern.md): Small dots light up near the pointer as a slow wave passes through the grid. For React with Base UI, when a hero should react without getting loud. - [Drops Background](https://www.shadcn.io/background/drops.md): Drops land on a still surface, each sending out rings that spread and fade. For React with Base UI, when a wellness page should feel calm but alive. - [Dunes Background](https://www.shadcn.io/background/dunes.md): Sand ridges with sunlit and shaded faces pan past as sand drifts, by day or by moon. For React with Base UI, when a travel hero needs a calm landscape. - [Eclipse Background](https://www.shadcn.io/background/eclipse.md): A moon wider than the box shows only its rim, ringed by light and a swaying corona. For React with Base UI, when an event hero needs drama. - [Facets Background](https://www.shadcn.io/background/facets.md): A low-poly surface of triangles, each facet lit by the way it faces as light drifts by. For React with Base UI, when a hero wants a crystalline look. - [Fireflies Background](https://www.shadcn.io/background/fireflies.md): Warm lights wander on slow curves and blink at their own pace, like fireflies at dusk. For React with Base UI, when a calm section needs a summer night. - [Fireplace Background](https://www.shadcn.io/background/fireplace.md): Flames lick up along the bottom of the box as embers rise and firelight flutters. For React with Base UI, when a holiday page or cosy card needs warmth. - [Fireworks Background](https://www.shadcn.io/background/fireworks.md): Rockets burst into sprays of sparks that droop and fade, and a click launches one. For React with Base UI, when a milestone should feel like a party. - [Flickering Grid Background](https://www.shadcn.io/background/flickering-grid.md): Small squares fade in and out at random behind your content, like status lights. For React with Base UI, when a dashboard needs a quiet, living texture. - [Fog Background](https://www.shadcn.io/background/fog.md): Banks of soft mist drift across the box at three depths, darkest at the edges. For React with Base UI, when a hero needs atmosphere, not distraction. - [Fractal Background](https://www.shadcn.io/background/fractal.md): Fern fronds spiral toward the centre in an infinite zoom, each branch splitting again. For React with Base UI, when a science page wants depth. - [Galaxy Background](https://www.shadcn.io/background/galaxy.md): The Milky Way crosses the box corner to corner, split by dust lanes and crowded with stars. For React with Base UI, when a space page needs real depth. - [Glitch Background](https://www.shadcn.io/background/glitch.md): Pixel-sort streaks, scanlines and static, torn into sliding bands with red and cyan splits. For React with Base UI, when a 404 page needs energy. - [Gradient Animation Background](https://www.shadcn.io/background/gradient-animation.md): Huge, soft color fields orbit and blend into new hues, pastel on light, luminous on dark. For React with Base UI, when a hero wants moving color. - [Gradient Background](https://www.shadcn.io/background/gradient.md): Five soft color blobs wander and overlap behind your content under fine film grain. For React with Base UI, when a hero should feel colorful and alive. - [Grain Background](https://www.shadcn.io/background/grain.md): Fine film grain, a speckle you feel more than see, re-rolled 24 times a second. For React with Base UI, when flat colour should look like film. - [Grid Pattern](https://www.shadcn.io/background/grid-pattern.md): A static grid of thin lines like graph paper, with optional filled cells and dashes. For React with Base UI, when a hero needs quiet structure. - [Halftone Background](https://www.shadcn.io/background/halftone.md): Print dots swell and shrink with a drifting field of light and shade, like a newsprint photo. For React with Base UI, when a card should feel printed. - [Heatmap Background](https://www.shadcn.io/background/heatmap.md): Heat signatures drift across a cool field and warm where they meet, like a thermal camera. For React with Base UI, when a page should feel instrumented. - [Hexagon Background](https://www.shadcn.io/background/hexagon.md): A honeycomb of hexagon outlines where the one under the pointer lights up and fades. For React with Base UI, when a gaming page should react. - [Hologram Background](https://www.shadcn.io/background/hologram.md): Thin-film colours slide across a silver sheet as if it were tilting under a lamp. For React with Base UI, when a premium tier should look like foil. - [Honeycomb Background](https://www.shadcn.io/background/honeycomb.md): Hex cells in your theme's tones shift in patches, a few glowing softly in your accent. For React with Base UI, when a SaaS hero wants a tactile texture. - [Ink Background](https://www.shadcn.io/background/ink.md): Ink blooms in clear water, plumes unfurling into veils that sink and thin out at three depths. For React with Base UI, when a hero needs fluid motion. - [Interactive Grid Pattern Background](https://www.shadcn.io/background/interactive-grid-pattern.md): Grid cells light up under the pointer and fade out, leaving a short trail. For React with Base UI, when a hero should react yet rest as a plain grid. - [Interference Background](https://www.shadcn.io/background/interference.md): Ripples from two points cross into moving crests and still curved bands, like a ripple tank. For React with Base UI, when a physics page needs waves. - [Kaleidoscope Background](https://www.shadcn.io/background/kaleidoscope.md): Jewel-toned glass drifts behind mirrors into a mandala that keeps reforming and turning. For React with Base UI, when a creative tool wants ornament. - [Labyrinth Background](https://www.shadcn.io/background/labyrinth.md): Lights explore a seeded maze, lighting its walls and turning back at dead ends. For React with Base UI, when a puzzle page should feel clever. - [Laser Grid Background](https://www.shadcn.io/background/laser-grid.md): Short beams race along the rows and columns of a neon grid, flaring at each crossing. For React with Base UI, when a gaming hero should feel wired in. - [Life Background](https://www.shadcn.io/background/life.md): Conway's Game of Life: gliders cross, blinkers pulse and dying cells fade. For React with Base UI, when a dev portfolio should feel computational. - [Light Waves Background](https://www.shadcn.io/background/light-waves.md): Soft bands of coloured light drift across the lower half of a section, faint enough to read over. For React with Base UI, when plain colour feels flat. - [Lightning Background](https://www.shadcn.io/background/lightning.md): Heavy clouds light up from inside as forked bolts strike the ground over faint rain. For React with Base UI, when a launch or weather page needs drama. - [Magnetic Field Background](https://www.shadcn.io/background/magnetic-field.md): Iron filings line up along the field of alternating poles, and the pointer is one more. For React with Base UI, when a science page needs a live field. - [Marble Background](https://www.shadcn.io/background/marble.md): Polished stone with bold veins and a slow sheen: white Carrara in light, black Marquina in dark. For React with Base UI, when a luxury page needs stone. - [Matrix Background](https://www.shadcn.io/background/matrix.md): Green katakana and digits rain in columns, each led by a bright, flickering glyph. For React with Base UI, when a security page wants the classic look. - [Mercury Background](https://www.shadcn.io/background/mercury.md): A polished chrome sheet whose soft swells roll slowly, catching bright bands of light. For React with Base UI, when a launch wants a futuristic surface. - [Mesh Gradient Background](https://www.shadcn.io/background/mesh-gradient.md): Four large color orbs, one per corner, blend into one mesh and drift almost unseen. For React with Base UI, when a landing page needs soft color. - [Metaballs Background](https://www.shadcn.io/background/metaballs.md): Glossy drops of liquid drift through the box, fusing into one lit mass and parting. For React with Base UI, when an AI hero needs slow, liquid motion. - [Meteors Background](https://www.shadcn.io/background/meteors.md): A steady meteor shower: tapered streaks with glowing heads fall at one angle and fade. For React with Base UI, when a night sky needs calm motion. - [Nebula Background](https://www.shadcn.io/background/nebula.md): Clouds of coloured gas, laced with filaments and dust lanes, drift and swell behind stars. For React with Base UI, when a page needs a space backdrop. - [Neon Background](https://www.shadcn.io/background/neon.md): A rounded frame of neon tube, a second colour inside it, humming and flickering. For React with Base UI, when an event page wants a night-time sign. - [Ocean Background](https://www.shadcn.io/background/ocean.md): Rows of waves heave in perspective under a hazy sky, with glitter on the path of light. For React with Base UI, when a travel page wants a calm horizon. - [Orbits Background](https://www.shadcn.io/background/orbits.md): Elliptical orbits sweep across the box as glowing bodies glide along at Kepler speeds. For React with Base UI, when a science hero wants calm motion. - [Origami Background](https://www.shadcn.io/background/origami.md): Paper folded into a zig-zag Miura-ori fills the box as a slow light moves across its folds. For React with Base UI, when a design tool wants texture. - [Oscilloscope Background](https://www.shadcn.io/background/oscilloscope.md): A beam sweeps a graticule, its trace glowing on the phosphor as the signal drifts. For React with Base UI, when an audio tool should look precise. - [Paper Background](https://www.shadcn.io/background/paper.md): Fine tooth, soft mottle, curled fibres and a warm vignette, like a real sheet of paper. For React with Base UI, when a long read should feel printed. - [Particles](https://www.shadcn.io/background/particles.md): Specks of dust at three depths drift, twinkle and lean toward the pointer in parallax. For React with Base UI, when a hero needs quiet motion. - [Paths Background](https://www.shadcn.io/background/paths.md): Two fans of fine curves, a dash sliding slowly along each and back. For React with Base UI, when a hero or divider needs calm, monochrome motion. - [Plasma Background](https://www.shadcn.io/background/plasma.md): A demoscene plasma for content: soft colour bands sweep, ring hot spots and shift hue. For React with Base UI, when a hackathon wants retro colour. - [Pollen Background](https://www.shadcn.io/background/pollen.md): Golden motes of pollen drift through a soft shaft of sunlight, in layers of depth. For React with Base UI, when a calm page needs a little warmth. - [Portal Background](https://www.shadcn.io/background/portal.md): Glowing rings fly out of a vanishing point toward you, a tunnel in cyan, indigo and violet. For React with Base UI, when a game intro needs a way in. - [Prism Background](https://www.shadcn.io/background/prism.md): White light breaks on the frame's edge into a soft spectrum that fans across the section. For React with Base UI, when a hero needs colour and calm. - [Rain Background](https://www.shadcn.io/background/rain.md): Rain streaks down at a slant in three depths over drifting ground mist, with optional lightning. For React with Base UI, when a page should feel stormy. - [Reaction Diffusion Background](https://www.shadcn.io/background/reaction-diffusion.md): Turing patterns of stripes, spots or coral grow from a few seeds and keep shifting. For React with Base UI, when a biotech page needs a living pattern. - [Reflection Background](https://www.shadcn.io/background/reflection.md): Clouds drift over a calm lake at dusk that mirrors them with slow ripples and a sun path. For React with Base UI, when a travel hero wants a quiet view. - [Resonance Background](https://www.shadcn.io/background/resonance.md): Sand gathers on the still lines of a vibrating plate as the figure slowly morphs. For React with Base UI, when an acoustics page should show physics. - [Retro Grid Background](https://www.shadcn.io/background/retro-grid.md): An 80s perspective grid rolls toward you from a glowing horizon under a tinted sky. For React with Base UI, when a synthwave or gaming hero needs depth. - [Ribbons Background](https://www.shadcn.io/background/ribbons.md): Long silk ribbons sweep diagonally across the box, twisting as they flow and catch light. For React with Base UI, when a keynote hero needs motion. - [Ripple Background](https://www.shadcn.io/background/ripple.md): Concentric rings around the centre breathe in and out, one after another, past the edges. For React with Base UI, when a logo needs a living stage. - [Saturn Background](https://www.shadcn.io/background/saturn.md): A ringed giant's banded limb rises from the bottom of the box as its rings sweep the sky. For React with Base UI, when a space hero needs a horizon. - [Shooting Stars Background](https://www.shadcn.io/background/shooting-stars.md): Glowing streaks shoot in from the edges, one or two at a time, over a still, twinkling sky. For React with Base UI, when a night sky needs motion. - [Silk Background](https://www.shadcn.io/background/silk.md): Broad fields of colour glide under a satin sheen, like light on folded fabric. For React with Base UI, when a launch hero needs rich, slow colour. - [Smoke Background](https://www.shadcn.io/background/smoke.md): Soft plumes of smoke rise from below the box, swell, turn and thin out. For React with Base UI, when a moody section needs slow, textured motion. - [Snow Background](https://www.shadcn.io/background/snow.md): Snow falls over a soft winter sky, near flakes swaying in front of a drifting far layer. For React with Base UI, when a winter hero should feel calm. - [Sonar Background](https://www.shadcn.io/background/sonar.md): A radar beam turns over range rings, and contacts ping as it passes. For React with Base UI, when a dashboard or loader should look like it's scanning. - [Sparkles Background](https://www.shadcn.io/background/sparkles.md): Warm golden points twinkle at two depths, with four-point glints that pop and turn. For React with Base UI, when a festive section needs sparkle. - [Sphere Background](https://www.shadcn.io/background/sphere.md): A vast dotted globe rises like a planet's horizon, turning under its atmosphere. For React with Base UI, when a global product wants a 3D horizon. - [Spotlight Background](https://www.shadcn.io/background/spotlight.md): Cones of stage light sweep and cross from above, with dust in the beams and pools below. For React with Base UI, when a pricing block needs a stage. - [Starfield Background](https://www.shadcn.io/background/starfield.md): Stars stream past as you fly through them, dim at the centre and streaking at the edges. For React with Base UI, when a hero should feel like flight. - [Supernova Background](https://www.shadcn.io/background/supernova.md): An exploded star's glowing remnant, larger than the box, with braided filaments and shock waves. For React with Base UI, when a launch should feel vast. - [Swarm Background](https://www.shadcn.io/background/swarm.md): Slender darts form schools, split and merge by the boids rules, with no leader. For React with Base UI, when an agents page needs lifelike motion. - [Terrain Background](https://www.shadcn.io/background/terrain.md): A shaded relief map of sage valleys and snowy peaks edged with contours, panning slowly. For React with Base UI, when a travel page needs a backdrop. - [Tesseract Background](https://www.shadcn.io/background/tesseract.md): A four-dimensional cube turns through itself, its edges running past the frame. For React with Base UI, when a crypto page wants more than 3D. - [Topography Background](https://www.shadcn.io/background/topography.md): Contour rings around hills and hollows draw in once, then drift, like a topographic map. For React with Base UI, when a mapping page needs texture. - [Tornado Background](https://www.shadcn.io/background/tornado.md): A dark cloud base turns overhead as a banded funnel drops to the ground, spinning up dust. For React with Base UI, when a weather page needs a storm. - [Underwater Background](https://www.shadcn.io/background/underwater.md): Light shafts sway down from the surface of sunlit water while tiny motes rise through it. For React with Base UI, when a spa page should feel submerged. - [Voronoi Background](https://www.shadcn.io/background/voronoi.md): A glass mosaic of Voronoi cells in your theme's tones, each pane breathing at its own pace. For React with Base UI, when a hero should look engineered. - [Vortex Background](https://www.shadcn.io/background/vortex.md): A whirlpool of fine colored streaks spirals into a calm eye and fills the container. For React with Base UI, when a launch page needs hypnotic motion. - [Warp Background](https://www.shadcn.io/background/warp.md): Thin beams of light streak along the walls of a grid tunnel toward you. For React with Base UI, when a sci-fi hero needs a sense of rushing ahead. - [Watercolor Background](https://www.shadcn.io/background/watercolor.md): Muted pigments with crisp, pooled rims glaze slowly over each other around the edges. For React with Base UI, when an editorial page needs a soft wash. - [Wave Grid Background](https://www.shadcn.io/background/wave-grid.md): A wireframe surface seen from above, its rows rising and falling as waves cross it. For React with Base UI, when an AI product page wants a 3D surface. - [Wavy Background](https://www.shadcn.io/background/wavy.md): Softly blurred ribbons of colour drift at different depths, crossing and parting as they flow. For React with Base UI, when a music page wants motion. - [Wind Background](https://www.shadcn.io/background/wind.md): Fine streaks ride a shifting current around hidden eddies, trailing long fading tails. For React with Base UI, when a climate page should look measured. ## Shaders - [All shaders](https://www.shadcn.io/shaders): 100 WebGPU shaders for heroes, sections and cards, each drawing only while it's on screen, in React, Vue, Svelte and Solid. 19 free with an account, the rest with Pro. - [Abstract Mod Shader](https://www.shadcn.io/shaders/abstract-mod-shader.md): Slate slabs wind in three spiral arms toward a glowing sun, neon pulses racing along them. For React with Base UI, when a devtool hero needs depth. - [Accretion Shader](https://www.shadcn.io/shaders/accretion-shader.md): Gas swirls round a black hole, the far side of its disc lensed into a ring of light. For React with Base UI, when a space or launch hero needs drama. - [Advanced Tunnel Shader](https://www.shadcn.io/shaders/advanced-tunnel-shader.md): A winding tunnel of glossy tiles that shift color ring by ring toward a warm glow. For React with Base UI, when a game hero should pull the eye in. - [Agate Geode Shader](https://www.shadcn.io/shaders/agate-geode-shader.md): Agate bands in blue-grey, white and violet ring glinting amethyst and slowly morph. For React with Base UI, when a jewellery or luxury page wants craft. - [ASCII Sculpture Shader](https://www.shadcn.io/shaders/ascii-sculpture-shader.md): A 3D torus turning in monospace glyphs, amber on warm black, rendered on the GPU. For React with Base UI, when a CLI or 404 page wants a terminal look. - [Aurora 3D Shader](https://www.shadcn.io/shaders/aurora-3d-shader.md): Folded aurora curtains with green hems and violet rays, mirrored in a still lake. For React with Base UI, when a travel or space hero wants a night sky. - [Aurora Shader](https://www.shadcn.io/shaders/aurora-shader.md): Northern lights on the GPU: green, blue and violet bands that drift and sway over black. For React with Base UI, when a hero needs a moving sky. - [Binary Shader](https://www.shadcn.io/shaders/binary-shader.md): Slanted 0s and 1s glow and flip one by one under slow, drifting banks of light. For React with Base UI, when a devtool or data page wants living code. - [Bioluminescence Shader](https://www.shadcn.io/shaders/bioluminescence-shader.md): Waves break electric cyan on a dark beach and the wet sand mirrors their glow. For React with Base UI, when an ocean or resort hero needs calm. - [Biomine Shader](https://www.shadcn.io/shaders/biomine-shader.md): Fly through a cavern of glossy crimson tubes that glow where light passes. For React with Base UI, when a game or biotech page wants an alien world. - [Breathing Dots Shader](https://www.shadcn.io/shaders/breathing-dots-shader.md): A perspective sheet of dots breathes, violet to cyan to mint, and dimples under the pointer. For React with Base UI, when an AI or SaaS hero wants calm. - [Burning Paper Shader](https://www.shadcn.io/shaders/burning-paper-shader.md): Cream paper burns in from its edges, a glowing front browning the sheet and shedding embers. For React with Base UI, when a story hero wants drama. - [Cellular Tiled Tunnel Shader](https://www.shadcn.io/shaders/cellular-tiled-tunnel-shader.md): A fast flight down a tunnel of faceted metal plates, grey flecked with bronze. For React with Base UI, when a gaming or industrial hero wants speed. - [Chiffon Shader](https://www.shadcn.io/shaders/chiffon-shader.md): Sheer chiffon in blush, lilac and ivory billows in a slow breeze before window light. For React with Base UI, when a bridal or beauty page wants air. - [City Lights Shader](https://www.shadcn.io/shaders/city-lights-shader.md): A night city from above: orange streets, flowing traffic, lit windows, a black river. For React with Base UI, when a mobility hero wants a living city. - [Cloud Rays Shader](https://www.shadcn.io/shaders/cloud-rays-shader.md): Warm sunbeams fan down through gaps in broken cloud and slide as the clouds drift. For React with Base UI, when a travel or wellness hero wants hope. - [Cloud Sea Shader](https://www.shadcn.io/shaders/cloud-sea-shader.md): A golden-hour flight over a sea of clouds, lit gold on the sun side and lilac in shade. For React with Base UI, when an aviation hero wants open air. - [CMYK Halftone Shader](https://www.shadcn.io/shaders/cmyk-halftone-shader.md): Four process inks in dot screens that form rosettes on warm paper, a little out of register. For React with Base UI, when an editorial hero wants print. - [Cosmic Discs Shader](https://www.shadcn.io/shaders/cosmic-discs-shader.md): Thin rings tipped back in perspective break into glowing arcs that orbit, gold to blue. For React with Base UI, when a launch hero needs bold motion. - [Cosmic Waves Shader](https://www.shadcn.io/shaders/cosmic-waves-shader.md): A soft cosmic glow loops from blue through violet and cyan to pink, with stars twinkling. For React with Base UI, when a pricing section wants color. - [CRT Phosphor Shader](https://www.shadcn.io/shaders/crt-phosphor-shader.md): A synth sunset on a curved CRT: RGB phosphors, scanlines, bloom, a slow refresh band. For React with Base UI, when a retro game wants an old screen. - [Desert Sand Shader](https://www.shadcn.io/shaders/desert-sand-shader.md): Fly low over rippled dunes with sharp crests, side-lit by a low afternoon sun. For React with Base UI, when a travel or outdoor hero needs space. - [Diffraction Shader](https://www.shadcn.io/shaders/diffraction-shader.md): Rainbow arcs on a dark grooved surface, like a compact disc catching a lamp as it tilts. For React with Base UI, when a music hero wants real optics. - [Digital Tunnel Shader](https://www.shadcn.io/shaders/digital-tunnel-shader.md): Neon rings in cyan, magenta and blue stream out of the center over faint scanlines. For React with Base UI, when an AI hero should feel like a dive. - [Dither Gradient Shader](https://www.shadcn.io/shaders/dither-gradient-shader.md): Soft orbs on warm paper, each pixel snapped to a 1-bit dither in two to five inks. For React with Base UI, when an indie product wants retro pixels. - [Drapery Shader](https://www.shadcn.io/shaders/drapery-shader.md): Champagne satin in deep diagonal folds that breathe slowly, highlights on every ridge. For React with Base UI, when a luxury page wants a quiet hero. - [Embers Shader](https://www.shadcn.io/shaders/embers-shader.md): Coals under grey ash glow orange through their cracks as the heat swells, sparks lifting. For React with Base UI, when a cosy hero wants warmth. - [Extruded Mobius Spiral Shader](https://www.shadcn.io/shaders/extruded-mobius-spiral-shader.md): Rainbow hex blocks in interlocking Möbius spirals rise in waves and stream from eye to eye. For React with Base UI, when a playful hero wants bold 3D. - [Ferrofluid Shader](https://www.shadcn.io/shaders/ferrofluid-shader.md): Black ferrofluid rises into a crown of glossy spikes wherever a hidden magnet drifts. For React with Base UI, when a hardware hero should feel tactile. - [Fire 3D Shader](https://www.shadcn.io/shaders/fire-3d-shader.md): One 3D flame twists up from a blue root, yellow-white at its heart, orange-red at its edges. For React with Base UI, when a dark hero wants fire. - [Fluted Glass Shader](https://www.shadcn.io/shaders/fluted-glass-shader.md): Coral and violet drift behind reeded glass, each rib squeezing what's behind it. For React with Base UI, when a SaaS hero wants the fluted look. - [Glass Caustics Shader](https://www.shadcn.io/shaders/glass-caustics-shader.md): Late sun through rippled glass casts a wandering net of caustic lines on warm cream. For React with Base UI, when a hospitality hero wants calm light. - [Glitch Shader](https://www.shadcn.io/shaders/glitch-shader.md): A broken signal of split channels, scanlines and datamoshed blocks, with no strobing. For React with Base UI, when a 404 needs a corrupted screen. - [Gradient Mesh Shader](https://www.shadcn.io/shaders/gradient-mesh-shader.md): Six soft lights orbit and blend into one saturated mesh gradient as their colors cycle. For React with Base UI, when a launch hero needs bold color. - [Guilloche Shader](https://www.shadcn.io/shaders/guilloche-shader.md): Banknote engraving: hair-thin lines weave a rosette and borders, gold on emerald. For React with Base UI, when a fintech page wants security printing. - [Hexagon Grid Pattern Shader](https://www.shadcn.io/shaders/hexagon-grid-pattern-shader.md): Striped op-art blocks tucked under one another in pinwheels on a hex grid, indigo on cream. For React with Base UI, when a gallery page wants pattern. - [Hologram Shader](https://www.shadcn.io/shaders/hologram-shader.md): Sci-fi interference bands in blue, teal and violet, with scan ripples and a rim glow. For React with Base UI, when a launch wants a holographic look. - [Incense Shader](https://www.shadcn.io/shaders/incense-shader.md): One thread of smoke rises straight, then waves, curls and opens into a pale grey-blue veil. For React with Base UI, when a spa or tea page wants quiet. - [Ink Vortex Shader](https://www.shadcn.io/shaders/ink-vortex-shader.md): Ink drops sink through a backlit tank, rolling into smoky rings that widen and break. For React with Base UI, when an editorial hero wants slow motion. - [Isometric Blocks Shader](https://www.shadcn.io/shaders/isometric-blocks-shader.md): Stacked isometric cubes whose columns rise and fall in slow waves, slate with violet. For React with Base UI, when a devtool hero wants a living city. - [Kaleidoscope Shader](https://www.shadcn.io/shaders/kaleidoscope-shader.md): Blue arms wind through a hot-pink disc round a white-hot core, and the glow breathes. For React with Base UI, when a music page wants a centrepiece. - [Lattice Light Shader](https://www.shadcn.io/shaders/lattice-light-shader.md): Late sun through a carved screen casts amber eight-point stars on a blue-grey wall. For React with Base UI, when a hotel or wellness page wants warmth. - [Light Leak Shader](https://www.shadcn.io/shaders/light-leak-shader.md): Red, orange and magenta film leaks bleed in from the edges of a grainy frame and fade. For React with Base UI, when a photographer's site wants analog. - [Liquid Glass Shader](https://www.shadcn.io/shaders/liquid-glass-shader.md): Clear glass drops slide over a ruled page, fuse when they touch and bend the lines. For React with Base UI, when a light hero wants real refraction. - [Magma Shader](https://www.shadcn.io/shaders/magma-shader.md): A lava river from above: black crust plates drift and grind while their seams glow. For React with Base UI, when a gaming or launch hero needs heat. - [Mandelbrot Pattern Decoration Shader](https://www.shadcn.io/shaders/mandelbrot-pattern-decoration-shader.md): A Mandelbrot valley glazed like folk-art ceramics, set with beads under blue filaments. For React with Base UI, when a culture page wants ornament. - [Marbling Shader](https://www.shadcn.io/shaders/marbling-shader.md): Indigo, oxblood and ochre inks drop on cream paper and a comb drags them into feathers. For React with Base UI, when a stationery page wants craft. - [Matrix Shader](https://www.shadcn.io/shaders/matrix-shader.md): Digital rain: green columns, each with a pale head falling and leaving a fading trail. For React with Base UI, when a security page wants code rain. - [Minimal Jigsaw Shader](https://www.shadcn.io/shaders/minimal-jigsaw-shader.md): Flat jigsaw pieces with round knobs interlock in soft colors and drift slowly. For React with Base UI, when a team page is about fitting together. - [Mirage Shader](https://www.shadcn.io/shaders/mirage-shader.md): Hot air bends a low sun and far mesas into slow wobbles above a mirage lake. For React with Base UI, when a travel or outdoor hero wants heat. - [Mobius Sierpinski Shader](https://www.shadcn.io/shaders/mobius-sierpinski-shader.md): A Sierpinski carpet wound into two spiral eyes by a Möbius map, streaming between them. For React with Base UI, when an AI hero needs hypnotic math. - [Moire Shader](https://www.shadcn.io/shaders/moire-shader.md): Two films of fine rings or lines slide over each other into huge, soft moiré fringes. For React with Base UI, when an art page or 404 wants op art. - [Monster Tunnel Shader](https://www.shadcn.io/shaders/monster-tunnel-shader.md): Jagged blades twist into a dark core in teal and neon green as sheets of light sweep out. For React with Base UI, when a gaming hero needs menace. - [Nebula Shader](https://www.shadcn.io/shaders/nebula-shader.md): Billows of dusty mauve gas drift slowly behind fine, twinkling stars. For React with Base UI, when a space hero or intro screen needs a deep backdrop. - [Noise Contours Shader](https://www.shadcn.io/shaders/noise-contours-shader.md): Morphing noise cut into glossy enamel bands of crimson, silver and violet-blue. For React with Base UI, when a fashion hero wants poster graphics. - [Noise Shader](https://www.shadcn.io/shaders/noise-shader.md): Saturated fractal noise with bright ridges and faint cells, warping as the hues slide round. For React with Base UI, when a portfolio wants rich color. - [Oil Slick Shader](https://www.shadcn.io/shaders/oil-slick-shader.md): Rainbow oil swirls over black wet asphalt, with real thin-film interference. For React with Base UI, when a streetwear drop wants iridescence. - [Oldschool Tube Shader](https://www.shadcn.io/shaders/oldschool-tube-shader.md): Inside a demoscene tube: gunmetal plates in a knurled silver lattice, some glowing hot. For React with Base UI, when a gaming page wants machinery. - [Op Art Bulge Shader](https://www.shadcn.io/shaders/op-art-bulge-shader.md): A Vasarely-style checkerboard swells toward you over slow spheres, squeezed at the rims. For React with Base UI, when an art page wants an illusion. - [Orb Grid Shader](https://www.shadcn.io/shaders/orb-grid-shader.md): Three soft orbs drift under a fine grid that bends toward them and takes their colour. For React with Base UI, when a startup hero wants structure. - [Penrose Tiling Shader](https://www.shadcn.io/shaders/penrose-tiling-shader.md): Glazed Penrose rhombi shimmer under a passing light as the view zooms in forever. For React with Base UI, when a maths page wants endless pattern. - [Perspex Web Lattice Shader](https://www.shadcn.io/shaders/perspex-web-lattice-shader.md): Faceted perspex cells in a dark web reflect drifting clouds and catch sharp white glints. For React with Base UI, when a luxury page wants craft. - [Photoelastic Shader](https://www.shadcn.io/shaders/photoelastic-shader.md): Stress fringes in Michel-Lévy colors ring loads drifting through clear plastic. For React with Base UI, when a science page wants real optics. - [Pixel Sort Shader](https://www.shadcn.io/shaders/pixel-sort-shader.md): A dusk of indigo sky, orange sun and dark hills, melted into pixel-sorted streaks. For React with Base UI, when an album release wants glitch art. - [Planet Shader](https://www.shadcn.io/shaders/planet-shader.md): An ocean world with drifting clouds, a crisp terminator and city lights at night. For React with Base UI, when a global product wants a whole world. - [Plasma Shader](https://www.shadcn.io/shaders/plasma-shader.md): The classic demoscene plasma: soft, round blobs in full-spectrum color round a pinwheel. For React with Base UI, when a retro page needs loud color. - [Platonic Solids Shader](https://www.shadcn.io/shaders/platonic-solids-shader.md): The five Platonic solids nest like an astrolabe, turning in fine brass lines on navy. For React with Base UI, when a protocol page wants precision. - [Poincaré Disc Animation Shader](https://www.shadcn.io/shaders/poincare-disc-animation-shader.md): Glass tiles shrink forever toward a gold rim in a Poincaré disc, pulses of light between. For React with Base UI, when a math page wants the infinite. - [Pyramid Pattern Shader](https://www.shadcn.io/shaders/pyramid-pattern-shader.md): A dark panel of brushed-metal pyramids under a roving warm light, cool glints at the edges. For React with Base UI, when a hardware hero wants texture. - [Quasicrystal Shader](https://www.shadcn.io/shaders/quasicrystal-shader.md): A never-repeating lattice of rosettes, banded from deep teal to gold, that breathes. For React with Base UI, when a science page wants order. - [Random Grid Subdivision Shader](https://www.shadcn.io/shaders/random-grid-subdivision-shader.md): A stained-glass window: a grid split into turned grids down to slivers, lit from behind. For React with Base UI, when a gallery page wants jewel tones. - [Raymarching Shader](https://www.shadcn.io/shaders/raymarching-shader.md): Folded sheets of liquid porcelain in pearl, copper and ice blue morph past a warm orb. For React with Base UI, when a premium hero needs sculpture. - [Ridgeline Shader](https://www.shadcn.io/shaders/ridgeline-shader.md): Stacked ridgelines after the pulsar plot, rising into noisy peaks that hide the ones behind. For React with Base UI, when a music label wants an icon. - [Ripple Shader](https://www.shadcn.io/shaders/ripple-shader.md): Rings spread from circling points and interfere into a turning, flower-like knot. For React with Base UI, when a voice feature wants calm motion. - [Ripples in Black Shader](https://www.shadcn.io/shaders/ripples-in-black-shader.md): Neon tubes with white-hot cores close into cells on black that swim, merge and split. For React with Base UI, when a nightlife page wants glow. - [Sea Shader](https://www.shadcn.io/shaders/sea-shader.md): A 3D ocean of rolling swells, the camera gliding over them toward a bright horizon. For React with Base UI, when a marine hero wants open water. - [Shader Canvas](https://www.shadcn.io/shaders/shader-canvas.md): Run your own WGSL fragment shader on WebGPU, with one GPU device and frame loop per page. For React with Base UI, when you'd rather skip the plumbing. - [Sigmoids Sines Shader](https://www.shadcn.io/shaders/sigmoids-sines-shader.md): Glossy coral folds of molten glass with neon-green seams zoom toward a glowing point. For React with Base UI, when a music page wants psychedelia. - [Simplex Truchet Weave Shader](https://www.shadcn.io/shaders/simplex-truchet-weave-shader.md): Twisted ivory cords edged in gold weave over and under on deep teal, drifting slowly. For React with Base UI, when a textile page wants rich pattern. - [Singularity Shader](https://www.shadcn.io/shaders/singularity-shader.md): A black hole drawn flat: a glowing ring round a black shadow, fed by one spiral of gas. For React with Base UI, when a launch page needs a focal point. - [Smoke Shader](https://www.shadcn.io/shaders/smoke-shader.md): Soft grey plumes rise from the bottom of a near-black navy backdrop, thinning as they climb. For React with Base UI, when a moody section wants smoke. - [Smooth Noise Contours Shader](https://www.shadcn.io/shaders/smooth-noise-contours-shader.md): A terraced heat map: drifting noise in embossed plateaus from maroon to yellow. For React with Base UI, when a maps or data page wants topography. - [Smooth Voronoi Contours Shader](https://www.shadcn.io/shaders/smooth-voronoi-contours-shader.md): Blobby contours of ink, cream and sunflower, one level flooded hot pink, swell and merge. For React with Base UI, when an art page wants bold graphics. - [Soap Bubbles 2D Shader](https://www.shadcn.io/shaders/soap-bubbles-2d-shader.md): Clear bubbles with bright rims and iridescent film rise through drifting color. For React with Base UI, when a kids' or bath brand wants bounce. - [Sparks Drifting Shader](https://www.shadcn.io/shaders/sparks-drifting-shader.md): A fire burns along the bottom, sparks drifting up under smoke, and the pointer blows them. For React with Base UI, when a gaming hero wants fire. - [Spectrogram Shader](https://www.shadcn.io/shaders/spectrogram-shader.md): A radio waterfall of carriers, chirps and bursts on an indigo-to-amber heat ramp. For React with Base UI, when an SDR or audio hero wants live signal. - [Sphere Field Shader](https://www.shadcn.io/shaders/sphere-field-shader.md): A fisheye flight through glowing spheres whose electric-blue halos swell as they rush by. For React with Base UI, when a dark event hero wants depth. - [Spiral Galaxy Shader](https://www.shadcn.io/shaders/spiral-galaxy-shader.md): A golden bulge and blue-white arms laced with dust lanes and pink knots, turning slowly. For React with Base UI, when an astronomy page wants a galaxy. - [Starry Planes Shader](https://www.shadcn.io/shaders/starry-planes-shader.md): Fly through a tunnel of star-shaped holes, layered planes gliding past on a winding path. For React with Base UI, when an intro should pull you in. - [Streamlines Shader](https://www.shadcn.io/shaders/streamlines-shader.md): Hairline streamlines part round hidden cylinders and the cursor, warming where flow is fastest. For React with Base UI, when an AI page wants calm. - [Synthwave Canyon Shader](https://www.shadcn.io/shaders/synthwave-canyon-shader.md): A striped retro sun hangs over a canyon of neon-traced ridges that glide toward you. For React with Base UI, when a gaming launch wants the 80s. - [Three-Tap Voronoi Shader](https://www.shadcn.io/shaders/three-tap-voronoi-shader.md): Voronoi cells rise from dark pits to white-hot seams, embossed under a two-color sweep. For React with Base UI, when a pricing card wants warm texture. - [Triangle Mesh Incircles Shader](https://www.shadcn.io/shaders/triangle-mesh-incircles-shader.md): Ink-on-paper triangles flex as their points wander, each inscribed circle a turning disc. For React with Base UI, when an education page wants play. - [Truchet Kaleidoscope Shader](https://www.shadcn.io/shaders/truchet-kaleidoscope-shader.md): A black-and-white kaleidoscope tunnel of mirrored truchet tiles turning as you drift. For React with Base UI, when an art page wants deep ornament. - [Truchet Shader](https://www.shadcn.io/shaders/truchet-shader.md): Diagonally cut squares meet in triangles and chevrons under a sweeping gradient. For React with Base UI, when a brand page wants bold geometry. - [Valley Mist Shader](https://www.shadcn.io/shaders/valley-mist-shader.md): An ink-wash landscape: ridges fade in paler layers as mist pools under a low sun. For React with Base UI, when a calm hero wants sky for its headline. - [Voxel Flyover Shader](https://www.shadcn.io/shaders/voxel-flyover-shader.md): A low flight over voxel hills: grass, sandstone cliffs, snowy peaks and turquoise water. For React with Base UI, when a game wants a playful 3D world. - [Warped Noise Shader](https://www.shadcn.io/shaders/warped-noise-shader.md): Marbled swirls of hot pink, deep plum and near-white fold like ink through milk. For React with Base UI, when a creative page wants liquid color. - [Water Shader](https://www.shadcn.io/shaders/water-shader.md): Deep blue water from straight above, with drifting light, marbling and specks of foam. For React with Base UI, when a pool or spa page wants water. - [Waves Shader](https://www.shadcn.io/shaders/waves-shader.md): Soft bands of pink, cyan and yellow roll across lavender, light glowing on the crests. For React with Base UI, when a pricing page wants gentle motion. - [Worley Noise Shader](https://www.shadcn.io/shaders/worley-noise-shader.md): Dark Worley cells drift slowly while their seams glow as a fine web. For React with Base UI, when a card wants cellular texture in your colors. ## Icons - [Icons](https://www.shadcn.io/icons): 294,237 free SVG icons from 222 libraries, to copy, download or install as React components with the shadcn CLI. - [All icon libraries](https://www.shadcn.io/icons/libraries): the 222 libraries, with their licenses and sizes. - [Lucide](https://www.shadcn.io/icons/lucide): 1,655 icons, ISC license. - [HeroIcons](https://www.shadcn.io/icons/heroicons): 1,288 icons, MIT license. - [Material Symbols](https://www.shadcn.io/icons/material-symbols): 15,862 icons, Apache 2.0 license. - [Tabler Icons](https://www.shadcn.io/icons/tabler): 6,033 icons, MIT license. - [Radix Icons](https://www.shadcn.io/icons/radix-icons): 342 icons, MIT license. - [Font Awesome 6 Solid](https://www.shadcn.io/icons/fa6-solid): 1,407 icons, CC BY 4.0 license. - [Feather Icons](https://www.shadcn.io/icons/feather): 286 icons, MIT license. - [Simple Icons](https://www.shadcn.io/icons/simple-icons): 3,632 icons, CC0 1.0 license. ## DESIGN.md files - [All DESIGN.md files](https://www.shadcn.io/design): 500 DESIGN.md files, each an interpretation of a real brand's design language (its colors, typography and components) in one Markdown file an AI agent builds from, per the DESIGN.md format (https://github.com/google-labs-code/design.md). Free; each brand's raw file is at /design//raw. - [Stripe DESIGN.md](https://www.shadcn.io/design/stripe/raw): the raw file; its page is https://www.shadcn.io/design/stripe. - [Linear DESIGN.md](https://www.shadcn.io/design/linear/raw): the raw file; its page is https://www.shadcn.io/design/linear. - [Apple DESIGN.md](https://www.shadcn.io/design/apple/raw): the raw file; its page is https://www.shadcn.io/design/apple. - [GitHub DESIGN.md](https://www.shadcn.io/design/github/raw): the raw file; its page is https://www.shadcn.io/design/github. - [Vercel DESIGN.md](https://www.shadcn.io/design/vercel/raw): the raw file; its page is https://www.shadcn.io/design/vercel. - [Claude DESIGN.md](https://www.shadcn.io/design/claude/raw): the raw file; its page is https://www.shadcn.io/design/claude. - [Figma DESIGN.md](https://www.shadcn.io/design/figma/raw): the raw file; its page is https://www.shadcn.io/design/figma. - [Framer DESIGN.md](https://www.shadcn.io/design/framer/raw): the raw file; its page is https://www.shadcn.io/design/framer. - [Notion DESIGN.md](https://www.shadcn.io/design/notion/raw): the raw file; its page is https://www.shadcn.io/design/notion. - [Shopify DESIGN.md](https://www.shadcn.io/design/shopify/raw): the raw file; its page is https://www.shadcn.io/design/shopify. - [Airbnb DESIGN.md](https://www.shadcn.io/design/airbnb/raw): the raw file; its page is https://www.shadcn.io/design/airbnb. - [Tesla DESIGN.md](https://www.shadcn.io/design/tesla/raw): the raw file; its page is https://www.shadcn.io/design/tesla. - [Ferrari DESIGN.md](https://www.shadcn.io/design/ferrari/raw): the raw file; its page is https://www.shadcn.io/design/ferrari. - [Spotify DESIGN.md](https://www.shadcn.io/design/spotify/raw): the raw file; its page is https://www.shadcn.io/design/spotify. - [Raycast DESIGN.md](https://www.shadcn.io/design/raycast/raw): the raw file; its page is https://www.shadcn.io/design/raycast. - [Supabase DESIGN.md](https://www.shadcn.io/design/supabase/raw): the raw file; its page is https://www.shadcn.io/design/supabase. - [Slacc DESIGN.md](https://www.shadcn.io/design/slack/raw): the raw file; its page is https://www.shadcn.io/design/slack. - [Hugging Face DESIGN.md](https://www.shadcn.io/design/huggingface/raw): the raw file; its page is https://www.shadcn.io/design/huggingface. - [Cursor DESIGN.md](https://www.shadcn.io/design/cursor/raw): the raw file; its page is https://www.shadcn.io/design/cursor. - [Nike DESIGN.md](https://www.shadcn.io/design/nike/raw): the raw file; its page is https://www.shadcn.io/design/nike. - [E-commerce & Retail](https://www.shadcn.io/design/category/e-commerce-and-retail): 87 brands. - [Developer Tools & IDEs](https://www.shadcn.io/design/category/developer-tools-and-ides): 71 brands. - [AI & LLM Platforms](https://www.shadcn.io/design/category/ai-and-llm-platforms): 65 brands. - [Productivity & SaaS](https://www.shadcn.io/design/category/productivity-and-saas): 54 brands. - [Banking & Payments](https://www.shadcn.io/design/category/banking-and-payments): 51 brands. - [Automotive](https://www.shadcn.io/design/category/automotive): 44 brands. - [Fintech & Crypto](https://www.shadcn.io/design/category/fintech-and-crypto): 42 brands. - [Backend, Database & DevOps](https://www.shadcn.io/design/category/backend-database-and-devops): 37 brands. - [News & Publishing](https://www.shadcn.io/design/category/news-and-publishing): 29 brands. - [Music, Video & Streaming](https://www.shadcn.io/design/category/music-video-and-streaming): 28 brands. - [Consumer Electronics](https://www.shadcn.io/design/category/consumer-electronics): 27 brands. - [Design & Creative Tools](https://www.shadcn.io/design/category/design-and-creative-tools): 27 brands. - [Travel & Hospitality](https://www.shadcn.io/design/category/travel-and-hospitality): 20 brands. - [Web Infrastructure & Hosting](https://www.shadcn.io/design/category/web-infrastructure-and-hosting): 19 brands. - [Social & Community](https://www.shadcn.io/design/category/social-and-community): 18 brands. - [Food & Delivery](https://www.shadcn.io/design/category/food-and-delivery): 16 brands. - [Communication & Messaging](https://www.shadcn.io/design/category/communication-and-messaging): 15 brands. - [Gaming & Entertainment](https://www.shadcn.io/design/category/gaming-and-entertainment): 15 brands. - [Marketplaces](https://www.shadcn.io/design/category/marketplaces): 14 brands. - [Analytics & Data](https://www.shadcn.io/design/category/analytics-and-data): 12 brands. - [Marketing & CRM](https://www.shadcn.io/design/category/marketing-and-crm): 10 brands. - [Documentation & Knowledge](https://www.shadcn.io/design/category/documentation-and-knowledge): 9 brands. - [Project Management](https://www.shadcn.io/design/category/project-management): 9 brands. - [Workflow & No-code](https://www.shadcn.io/design/category/workflow-and-no-code): 8 brands. - [Healthcare & Wellness](https://www.shadcn.io/design/category/healthcare-and-wellness): 7 brands. - [Hardware & Robotics](https://www.shadcn.io/design/category/hardware-and-robotics): 5 brands. - [Education & Learning](https://www.shadcn.io/design/category/education-and-learning): 4 brands. - [Mobile Platforms](https://www.shadcn.io/design/category/mobile-platforms): 3 brands. - [Real Estate & Property](https://www.shadcn.io/design/category/real-estate-and-property): 1 brand. ## MCP server - [MCP server](https://www.shadcn.io/mcp): one MCP server over HTTP (https://www.shadcn.io/api/mcp) gives your AI agent every component, block and icon, with live search, docs and installs in your framework: 22 tools, with Pro. - [Amazon Q](https://www.shadcn.io/mcp/amazon-q.md): Add the shadcn MCP to Amazon Q Developer CLI through mcp-remote. Signed in, the config on this page already holds your URL. - [Cline](https://www.shadcn.io/mcp/cline.md): Add the shadcn MCP to Cline as a remote server in its settings. Signed in, the config on this page already holds your URL. - [Frameworks and bases](https://www.shadcn.io/mcp/frameworks.md): How the shadcn MCP picks a component for your stack. React on Base UI, Ark, Radix, or React Aria; Vue, Svelte, and Solid on Ark UI. - [Gemini CLI](https://www.shadcn.io/mcp/gemini-cli.md): Add the shadcn MCP to Gemini CLI with one HTTP server in ~/.gemini/settings.json. Signed in, the config already holds your URL. - [get_block](https://www.shadcn.io/mcp/tools/get-block.md): Fetch one shadcn block in a single call: its category, the targets it comes in and what it uses. Add the install command and its FAQ in the same response. - [get_component](https://www.shadcn.io/mcp/tools/get-component.md): Fetch one shadcn component in a single call: what it is, its parts, and its demos. Ask for the install and a usage snippet in the same response. - [get_component_api](https://www.shadcn.io/mcp/tools/get-component-api.md): Read one part of a component's API: its props, which are required, and the keys. Ask for a single prop when you don't need the whole page. - [get_component_docs](https://www.shadcn.io/mcp/tools/get-component-docs.md): Read a component's docs page as Markdown, for the framework you pass. Use it when you want the written guide, not only the props. - [get_demo](https://www.shadcn.io/mcp/tools/get-demo.md): Get one demo's code, with imports pointed at your components. It also lists the components it uses and the packages it still needs. - [get_design](https://www.shadcn.io/mcp/tools/get-design.md): Get a brand's DESIGN.md for the project root: colors, type, spacing, and components. Pass sections when you only want the tokens. - [get_guide](https://www.shadcn.io/mcp/tools/get-guide.md): Read a shadcn guide as Markdown: forms, styling, dark mode, colors, or right-to-left. Pass sections when you only need part of it. - [get_icon](https://www.shadcn.io/mcp/tools/get-icon.md): Get icons for your framework: an import when the set has a package, or a component to drop in. Pass several names to add them at once. - [get_install_command](https://www.shadcn.io/mcp/tools/get-install-command.md): Get the CLI command that installs a component, with your token in the URL. React and Solid use shadcn; Vue and Svelte use their own CLI. - [get_install_plan](https://www.shadcn.io/mcp/tools/get-install-plan.md): Get every file an install writes, plus the packages and CSS, without running a CLI. Use it when the agent can't run a shell command. - [get_project_setup](https://www.shadcn.io/mcp/tools/get-project-setup.md): Set up a project for shadcn.io once: the init command, the theme, and the aliases. React gets the CLI preset; Vue, Svelte, and Solid get their own. - [Kilo Code](https://www.shadcn.io/mcp/kilo-code.md): Add the shadcn MCP to Kilo Code as a streamable HTTP server in .kilocode/mcp.json. Signed in, the config already holds your URL. - [list_blocks](https://www.shadcn.io/mcp/tools/list-blocks.md): List the shadcn block categories, or every block in one category by group. Add detail for each block's description, then get_block adds one. - [list_components](https://www.shadcn.io/mcp/tools/list-components.md): List every shadcn component for one framework and base, grouped by category. Add detail when you need each item's description and kind. - [list_icon_libraries](https://www.shadcn.io/mcp/tools/list-icon-libraries.md): List the icon sets, most used first, with size, license, and npm package. Use it to pick the set that matches the icons already in the project. - [MCP clients](https://www.shadcn.io/mcp/clients.md): A setup guide for each of 38 clients, plus any other that speaks MCP. Each page has the config, with your URL filled in when you're signed in. - [MCP server](https://www.shadcn.io/mcp/introduction.md): The shadcn MCP server gives your agent the registry: search, docs, and install. It covers React, Vue, Svelte, and Solid, plus 294k icons. - [MCP tools](https://www.shadcn.io/mcp/tools.md): The 22 tools on the shadcn MCP, one page each. What the tool is for, its inputs, a prompt that calls it, and a real response. - [OpenAI Codex](https://www.shadcn.io/mcp/openai-codex.md): Add the shadcn MCP to OpenAI Codex with one entry in ~/.codex/config.toml. Signed in, the config on this page already holds your URL. - [OpenCode](https://www.shadcn.io/mcp/opencode.md): Add the shadcn MCP to OpenCode with one entry in opencode.json. Signed in, the config on this page already holds your URL. - [plan_page](https://www.shadcn.io/mcp/tools/plan-page.md): Plan a whole page as a stack of shadcn blocks for a brief: hero, features, pricing and more, each with a pick and alternatives, ready to install. - [Prompting](https://www.shadcn.io/mcp/prompts.md): What to ask the shadcn MCP so your agent calls the tools. Name the server, describe the job, and name the framework when it can't see the project. - [Quickstart](https://www.shadcn.io/mcp/quickstart.md): Connect the shadcn MCP and add a component in about a minute. Copy your URL, paste it into your editor, then ask for a date picker. - [Roo Code](https://www.shadcn.io/mcp/roo-code.md): Add the shadcn MCP to Roo Code as a streamable HTTP server in .roo/mcp.json. Signed in, the config already holds your URL. - [search_blocks](https://www.shadcn.io/mcp/tools/search-blocks.md): Find a shadcn block by what it does, such as a pricing section with a yearly toggle. Hits name the category and group, and get_block adds one. - [search_components](https://www.shadcn.io/mcp/tools/search-components.md): Find a shadcn component by what it does, such as a modal or a date range. The best match comes first, aliases included, with the demo to open. - [search_demos](https://www.shadcn.io/mcp/tools/search-demos.md): Find a demo of a pattern across every component, such as a controlled dialog. The best match comes first, and get_demo returns its code. - [search_designs](https://www.shadcn.io/mcp/tools/search-designs.md): Find a brand's DESIGN.md by name, product, or color, such as stripe or fintech. Each match includes the name, categories, and palette. - [search_icons](https://www.shadcn.io/mcp/tools/search-icons.md): Search icon sets by name or by meaning. A query like delete finds the trash can, and several queries can run in one call. - [search_templates](https://www.shadcn.io/mcp/tools/search-templates.md): Find a template to start from by what the app is, such as a SaaS dashboard or a blog. Each match has its code, a live demo, and its page. - [Security and limits](https://www.shadcn.io/mcp/security.md): Your shadcn MCP token, what the server can see, and the rate limit. The tools only read the registry. They never see your files. - [Troubleshooting](https://www.shadcn.io/mcp/troubleshooting.md): Fix a shadcn MCP connection that fails, a 401 or 403, or an agent that never calls the tools. Start by calling whoami yourself. - [whoami](https://www.shadcn.io/mcp/tools/whoami.md): See the account on this MCP connection: email, plan, and how many calls are left this minute. Use it right after setup to confirm the token. - [Claude Code](https://www.shadcn.io/mcp/claude-code): Add the shadcn MCP to Claude Code with one terminal command: every component, 6,181 blocks and 294k icons, searched and installed from your terminal. - [Claude Desktop](https://www.shadcn.io/mcp/claude-desktop): Connect shadcn.io to Claude Desktop with one custom connector: Claude plans pages from 6,181 real blocks, finds icons and gives installs for your framework. - [ChatGPT](https://www.shadcn.io/mcp/chatgpt): Connect the shadcn MCP to ChatGPT as a custom plugin, then plan pages from 6,181 blocks, read real component props and get each install from a chat. - [Antigravity](https://www.shadcn.io/mcp/antigravity): Connect the shadcn MCP to Google Antigravity with one serverUrl in mcp_config.json: the App, IDE and CLI agents get every component, 6,181 blocks and 294k icons. - [Cursor](https://www.shadcn.io/mcp/cursor): Add the shadcn MCP to Cursor with one click or one mcp.json entry, and Agent installs real components, 6,181 blocks and 294k icons into your project. - [Kiro](https://www.shadcn.io/mcp/kiro): Connect the shadcn MCP to Kiro with one mcp.json entry: its agent finds components, 6,181 blocks and 294k icons, and installs them as your spec's tasks run. - [Augment Code](https://www.shadcn.io/mcp/augment-code): Connect the shadcn MCP to Augment Code in VS Code, JetBrains or Auggie: its Agent finds, reads and installs components, 6,181 blocks and 294k icons. - [Windsurf](https://www.shadcn.io/mcp/windsurf): Set up the shadcn MCP in Windsurf, now Devin Desktop: one mcp_config.json entry lets its agent install real components, 6,181 blocks and 294k icons. - [VS Code](https://www.shadcn.io/mcp/vs-code): Set up the shadcn MCP for Copilot in VS Code with one .vscode/mcp.json, then search and install components, 6,181 blocks and 294k icons from chat. - [Visual Studio](https://www.shadcn.io/mcp/visual-studio): Connect the shadcn MCP to GitHub Copilot in Visual Studio 2022 and 2026 with one .mcp.json: every component, 6,181 blocks and 294k icons in agent mode. - [Copilot Coding Agent](https://www.shadcn.io/mcp/copilot-coding-agent): Add the shadcn MCP to GitHub Copilot's coding agent in your repository's MCP settings, and the issues you assign come back as PRs built from real components. - [Copilot CLI](https://www.shadcn.io/mcp/copilot-cli): Connect the shadcn MCP to GitHub Copilot CLI: every component, 6,181 blocks and 294k icons for your terminal agent, from one entry in mcp-config.json. - [JetBrains](https://www.shadcn.io/mcp/jetbrains): Connect the shadcn MCP to AI Assistant in IntelliJ IDEA, WebStorm or PyCharm: Chat, Junie and Claude Agent get every component, 6,181 blocks and 294k icons. - [Trae](https://www.shadcn.io/mcp/trae): Add the shadcn MCP to Trae in Settings > MCP, and its Agent finds and installs every component, 6,181 blocks and 294k icons for React, Vue, Svelte or Solid. - [Qwen Code](https://www.shadcn.io/mcp/qwen-code): Connect the shadcn MCP to Qwen Code with one httpUrl entry or qwen mcp add, then let it search 6,181 blocks, components and 294k icons from your terminal. - [Warp](https://www.shadcn.io/mcp/warp): Add the shadcn MCP to Warp under Settings → Agents → MCP servers, and its agent installs any component, 6,181 blocks and 294k icons from your terminal. - [Amp](https://www.shadcn.io/mcp/amp): Connect Amp to the shadcn MCP in one command, then let it pull components, 6,181 blocks and 294k icons into CLI threads, orbs and Linear issues. - [LM Studio](https://www.shadcn.io/mcp/lm-studio): Connect the shadcn MCP to LM Studio through mcp.json: your local model searches every component, 6,181 blocks and 294k icons, then hands you the install. - [Crush](https://www.shadcn.io/mcp/crush): Connect Crush, Charm's terminal agent, to the shadcn MCP with one HTTP server in crush.json: every component, 6,181 blocks and 294k icons, on any model. - [BoltAI](https://www.shadcn.io/mcp/boltai): Connect the shadcn MCP to BoltAI on macOS through mcp-remote, so any tool-calling model can search components, 6,181 blocks and 294k icons in chat. - [Rovo Dev](https://www.shadcn.io/mcp/rovo-dev): Connect the shadcn MCP to Atlassian Rovo Dev, CLI and IDE: every component, 6,181 blocks and 294k icons, looked up and installed from a prompt. - [Zencoder](https://www.shadcn.io/mcp/zencoder): Add the shadcn MCP to Zencoder from Agent Tools, and its Coding Agent searches 6,181 blocks, 294k icons and every component, then installs them in your IDE. - [Qodo Gen](https://www.shadcn.io/mcp/qodo-gen): Add the shadcn MCP to Qodo Gen, now the Qodo IDE plugin: its agent finds components, 6,181 blocks and 294k icons and installs them in VS Code or JetBrains. - [Perplexity](https://www.shadcn.io/mcp/perplexity): Connect the shadcn MCP to Perplexity's Mac app or as a remote connector: real props, demos and installs for every component and 6,181 blocks, in your answers. - [Factory](https://www.shadcn.io/mcp/factory): Add the shadcn MCP to Factory's Droid CLI with droid mcp add: 22 read-only tools for components, 6,181 blocks and 294k icons, at your autonomy level. - [Pi](https://www.shadcn.io/mcp/pi): Connect Pi, the terminal coding agent, to the shadcn MCP with one pi mcp add: every component, 6,181 blocks and 294k icons, installed from your repo. - [OpenClaw](https://www.shadcn.io/mcp/openclaw): Save the shadcn MCP on your OpenClaw Gateway with one command, then message your agent from Telegram, Slack or WhatsApp for components, blocks and icons. - [Manus](https://www.shadcn.io/mcp/manus): Connect shadcn.io to Manus as a custom MCP: its tasks plan pages from 6,181 real blocks, pick from 294k icons and hand you installs for any framework. - [AnythingLLM](https://www.shadcn.io/mcp/anythingllm): Connect the shadcn MCP to AnythingLLM Desktop or Docker with one JSON entry. Its agent finds components, 6,181 blocks and 294k icons, even on a local model. - [Hermes](https://www.shadcn.io/mcp/hermes): Give Hermes Agent the shadcn MCP with one mcp_servers entry: every component, 6,181 blocks and 294k icons, found and installed from your terminal or chat. - [Zed](https://www.shadcn.io/mcp/zed): Connect the shadcn MCP to Zed with one context_servers entry: the Zed Agent finds components, 6,181 blocks and 294k icons, and installs them for you. ## Tools - [All tools](https://www.shadcn.io/tools): 382 free tools that run in the browser: nothing is uploaded, and no account is needed. - [Hash generators](https://www.shadcn.io/tools/hash): 64 tools. SHA-2, SHA-3, BLAKE, MD5, CRC and the rest, for text or a file, with HMAC. - [Encoders and decoders](https://www.shadcn.io/tools/encoding): 32 tools. Base64, Base32, Base58, hex, binary and the other alphabets, both ways. - [PNG tools](https://www.shadcn.io/tools/png): 46 tools. Convert, compress, make transparent, recolor and inspect PNG files. - [JPG tools](https://www.shadcn.io/tools/jpg): 44 tools. Convert, compress and edit JPG files without uploading them. - [WebP tools](https://www.shadcn.io/tools/webp): 44 tools. Convert, compress and edit WebP files without uploading them. - [AVIF tools](https://www.shadcn.io/tools/avif): 37 tools. Convert and edit AVIF, the next-generation image format, in the browser. - [ICO tools](https://www.shadcn.io/tools/ico): 37 tools. Favicons and Windows icons: make, convert and fix ICO files. - [SVG tools](https://www.shadcn.io/tools/svg): 39 tools. Rasterize, convert, edit and encode SVG files. - [Image tools](https://www.shadcn.io/tools/image): 5 tools. Background removal, compression, conversion and color correction. - [File tools](https://www.shadcn.io/tools/file): 2 tools. PDFs and ZIP archives, handled in the browser. - [Media tools](https://www.shadcn.io/tools/media): 3 tools. Audio, video and your devices, without an upload. - [Text tools](https://www.shadcn.io/tools/text): 7 tools. Case, counts, diffs, code, rich text and placeholder copy. - [Data tools](https://www.shadcn.io/tools/data): 6 tools. JSON, CSV, number bases, colors and QR codes. - [Math and finance](https://www.shadcn.io/tools/math): 7 tools. Calculators and converters for numbers, dates, units and money. - [Productivity](https://www.shadcn.io/tools/productivity): 2 tools. Invoices and to-dos, kept in your browser. - [Security and dev tools](https://www.shadcn.io/tools/security): 7 tools. Passwords, UUIDs, regexes, cron expressions and scanners. ## Plans and license - [Pricing](https://www.shadcn.io/pricing): the Individual, Team and Organization plans, monthly, yearly or lifetime, and what each includes. - [License](https://www.shadcn.io/license): what the free code and a Pro license let you build, and where. ## Optional - [Awesome shadcn/ui](https://www.shadcn.io/awesome): curated shadcn/ui resources from the community: components, registries, animations, templates and tools. - [Showcase](https://www.shadcn.io/showcase): production apps built with shadcn.io. - [Reviews](https://www.shadcn.io/reviews): what developers say about shadcn.io. - [Changelog](https://www.shadcn.io/changelog): the releases. - [Tailwind colors](https://www.shadcn.io/colors): the Tailwind CSS palette in HEX, RGB, HSL, CSS variables and classes. - [Easings](https://www.shadcn.io/easings): CSS easing curves: shape your own on a live plot, watch it move, copy it as CSS, a Tailwind class or a @theme variable. - [Terms of Service](https://www.shadcn.io/terms) - [Privacy Policy](https://www.shadcn.io/privacy)