UI Components

shadcn/ui components for building beautiful interfaces

30+ Components

shadcn/ui

Radix UI

Overview

Our UI components are built on top of shadcn/ui, which uses Radix UI primitives and Tailwind CSS. These components are fully accessible, customizable, and follow best practices for modern web development.

Framework: shadcn/ui + Radix UI

Styling: Tailwind CSS with custom theme

Accessibility: WCAG 2.1 Level AA compliant

Documentation: ui.shadcn.com

Components

Form Components

Button

src/components/ui/button.tsx

Versatile button component with multiple variants and sizes

Input

src/components/ui/input.tsx

Text input field with validation support

Textarea

src/components/ui/textarea.tsx

Multi-line text input for longer content

Label

src/components/ui/label.tsx

Accessible form labels with proper associations

Select

src/components/ui/select.tsx

Dropdown select component with search

Checkbox

src/components/ui/checkbox.tsx

Checkbox input with indeterminate state

Radio Group

src/components/ui/radio-group.tsx

Radio button group for single selection

Switch

src/components/ui/switch.tsx

Toggle switch for boolean values

Layout & Display

Card

src/components/ui/card.tsx

Container component for content grouping

Separator

src/components/ui/separator.tsx

Visual divider for content sections

Breadcrumb

src/components/ui/breadcrumb.tsx

Navigation breadcrumbs for hierarchy

Tabs

src/components/ui/tabs.tsx

Tabbed interface for content organization

Badge

src/components/ui/badge.tsx

Small label for status or categories

Avatar

src/components/ui/avatar.tsx

User profile picture with fallback

Skeleton

src/components/ui/skeleton.tsx

Loading placeholder for content

Overlays & Modals

Dialog

src/components/ui/dialog.tsx

Modal dialog for focused interactions

Sheet

src/components/ui/sheet.tsx

Slide-out panel from screen edges

Popover

src/components/ui/popover.tsx

Floating content container

Dropdown Menu

src/components/ui/dropdown-menu.tsx

Contextual menu with actions

Command

src/components/ui/command.tsx

Command palette for quick actions

Date & Time

Calendar

src/components/ui/calendar.tsx

Date picker calendar component

Custom Extensions

Image Uploader

src/components/ui/image-uploader.tsx

Image upload with preview and cropping

Table

src/components/ui/table.tsx

Data table with sorting and filtering

Installation & Usage

All UI components are installed via shadcn/ui CLI. Components are added to your project and can be customized directly in your codebase.

# Install a component
npx shadcn@latest add button

# Use in your code
import { Button } from "@/components/ui/button"

export function MyComponent() {
  return <Button>Click me</Button>
}