Shadcn Base Components
Browse 168 Base components for shadcn/ui, including accordion, alert, alert dialog, avatar, badge, button and more. Preview each component live, then copy and paste the code or install it with the shadcn CLI. Built with shadcn/ui, Tailwind CSS and React.
Shadcn Base Components for Every Interface
Base components are the primitives every interface is built from: buttons, badges, cards, avatars, accordions, alerts, tooltips and skeletons. Each one comes in multiple variants built with shadcn/ui, Tailwind CSS and React, compatible with both Radix UI and Base UI.
What You Get With Base Components
- Actions: Button and button group variants with icons, loading states, sizes and split actions.
- Containers: Card layouts with headers, footers, actions and media, plus separators for structure.
- Status and identity: Badges and avatars with groups, fallbacks, status dots and sizes.
- Messaging: Alerts, alert dialogs and tooltips for inline and contextual feedback.
- Disclosure and loading: Accordions for FAQs and settings, and skeletons for loading states that match the final layout.
The Foundation of Your Design System
Every block, example and template in Shadcn UI Kit is built from these base components. Getting them right means everything above them stays consistent, from a single badge to a full dashboard.
Continue with form components for inputs and selects, or jump to blocks to see the base components composed into full sections.