kagadmodyaa

Components 55 free components for React and Tailwind

Accessible building blocks you copy into your project with the shadcn CLI and then own: change the markup, the styles and the behaviour like any other file.

55 components

  • Button

    3 examples

    A button, with every variant and size you need — nothing you don’t.

  • Badge

    2 examples

    A small status or category label, in four variants.

  • Input

    2 examples

    A text input for forms — text, email, file and every native type.

  • Textarea

    2 examples

    A multi-line text input for longer form answers.

  • Label

    1 example

    An accessible label for form controls.

  • Checkbox

    2 examples

    A checkbox with checked, unchecked and indeterminate states.

  • Switch

    2 examples

    A toggle switch for on/off settings.

  • Tabs

    1 example

    A set of layered panels, one visible at a time.

  • Accordion

    2 examples

    A vertically stacked set of collapsible panels.

  • Alert

    2 examples

    A short, prominent message calling out information.

  • Card

    1 example

    A container for grouping related content and actions.

  • Tooltip

    1 example

    A short popup shown on hover or focus.

  • Dialog

    1 example

    A modal window layered above the page, with focus trapped inside.

  • Sheet

    2 examples

    A panel that slides in from an edge of the screen.

  • Popover

    1 example

    A rich popup anchored to a trigger, opened by click.

  • Dropdown Menu

    2 examples

    A menu of actions and options, opened from a trigger.

  • Select

    2 examples

    A dropdown for choosing one option from a list.

  • Slider

    2 examples

    An input for choosing a numeric value from a range.

  • Progress

    2 examples

    A bar showing the completion progress of a task.

  • Toast

    3 examples

    A short, auto-dismissing notification.

  • Avatar

    2 examples

    A user's profile picture, with initials as a fallback.

  • Skeleton

    1 example

    A placeholder shown while content is loading.

  • Separator

    1 example

    A thin line separating content, horizontal or vertical.

  • Table

    1 example

    Semantic parts for laying out tabular data.

  • Alert Dialog

    2 examples

    A modal that interrupts to ask for confirmation before an important action.

  • Radio Group

    2 examples

    A set of radio buttons where exactly one option can be chosen.

  • Toggle

    3 examples

    A two-state button that can be pressed on or off.

  • Toggle Group

    2 examples

    A row of toggles where one or several can be pressed.

  • Collapsible

    2 examples

    A panel that expands and collapses, with a height animation.

  • Context Menu

    2 examples

    A menu of actions opened by right-click or long-press.

  • Aspect Ratio

    2 examples

    Holds content to a fixed width-to-height ratio.

  • Scroll Area

    2 examples

    A scrollable region with slim, themed scrollbars.

  • Kbd

    2 examples

    Keycaps for showing keyboard keys and shortcuts.

  • Spinner

    2 examples

    An accessible loading indicator that rotates.

  • Input OTP

    2 examples

    A one-time-code input split into slots, with paste and autofill.

  • Drawer

    2 examples

    A bottom sheet you can drag down to dismiss.

  • Command

    2 examples

    A fast, keyboard-driven command palette with search, groups and shortcuts.

  • Combobox

    2 examples

    An input with a filterable list of options — pick one, or several as chips.

  • Calendar

    3 examples

    A month grid for picking a date or a range, fully keyboard navigable.

  • Date Picker

    2 examples

    A button that opens a calendar in a popover to choose a date or a range.

  • Carousel

    3 examples

    A swipeable set of slides with previous and next controls.

  • Resizable

    3 examples

    Panels separated by draggable handles — resize by mouse, touch or keyboard.

  • Field

    2 examples

    A labelled form control with a description and validation errors, plus a form that checks them all.

  • Input Group

    2 examples

    An input with icons, text and buttons attached on either side.

  • Button Group

    3 examples

    Buttons joined into one segmented control — horizontal, vertical or split.

  • Native Select

    2 examples

    The browser’s own select, styled to match.

  • Empty

    2 examples

    An empty state with an icon, a message and actions.

  • Item

    2 examples

    A row with media, text and actions — for settings and lists.

  • Navigation Menu

    2 examples

    A top navigation bar with animated dropdown panels and links.

  • Menubar

    2 examples

    A desktop-style menu bar with submenus, checkboxes, radios and shortcuts.

  • Sidebar

    2 examples

    An app sidebar that collapses to icons, and becomes a sheet on mobile.

  • Data Table

    2 examples

    A sortable, filterable, paginated table built on TanStack Table.