The full component set
Accessible React components in the neobrutalist style — thick borders, hard shadows, loud color. Every one comes in a Radix UI and a Base UI flavor, installs with the shadcn CLI, and ships as code you own.
All components
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Alert
Displays a callout for user attention.
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Aspect Ratio
Displays content within a desired ratio.
Avatar
An image element with a fallback for representing the user.
Badge
Displays a badge or a component that looks like a badge.
Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Button
Displays a button or a component that looks like a button.
Button Group
A container that groups related buttons together with consistent styling.
Calendar
A calendar component that allows users to select a date or a range of dates.
Card
Displays a card with header, content, and footer.
Carousel
A carousel with motion and swipe built using Embla.
Checkbox
A control that allows the user to toggle between checked and not checked.
Collapsible
An interactive component which expands/collapses a panel.
Combobox
Autocomplete input with a list of suggestions.
Command
Command menu for search and quick actions.
Context Menu
Displays a menu of actions triggered by a right click.
Data Table
Powerful table and datagrids built using TanStack Table.
Date Picker
A date picker component with range and presets.
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Direction
A provider component that sets the text direction for your application.
Drawer
A drawer component for React.
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Empty
Use the Empty component to display an empty state.
Field
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Hover Card
For sighted users to preview content available behind a link.
Input
A text input component for forms and user data entry with built-in styling and accessibility features.
Input Group
Add addons, buttons, and helper content to inputs.
Input OTP
Accessible one-time password component with copy-paste functionality.
Item
A versatile component for displaying content with media, title, description, and actions.
Kbd
Used to display textual user input from keyboard.
Label
Renders an accessible label associated with controls.
Menubar
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
Native Select
A styled native HTML select element with consistent design system integration.
Navigation Menu
A collection of links for navigating websites.
Pagination
Pagination with page navigation, next and previous links.
Popover
Displays rich content in a portal, triggered by a button.
Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Resizable
Accessible resizable panel groups and layouts with keyboard support.
Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Select
Displays a list of options for the user to pick from—triggered by a button.
Separator
Visually or semantically separates content.
Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Sidebar
A composable, themeable and customizable sidebar component.
Skeleton
Use to show a placeholder while content is loading.
Slider
An input where the user selects a value from within a given range.
Sonner
An opinionated toast component for React.
Spinner
An indicator that can be used to show a loading state.
Switch
A control that allows the user to toggle between checked and not checked.
Table
A responsive table component.
Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Textarea
Displays a form textarea or a component that looks like a textarea.
Toggle
A two-state button that can be either on or off.
Toggle Group
A set of two-state buttons that can be toggled on or off.
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Typography
Styles for headings, paragraphs, lists, etc.