Shadcn UI Component Test
Testing all installed components with custom healthcare theme
Color Palette
Healthcare-themed OKLCH color system
Primary
Blue #48/0.18/245
Accent
Teal #55/0.14/195
Success
Green #58/0.2/150
Destructive
Red #58/0.25/27
Secondary
Light Gray
Muted
Subtle Gray
Card
White Background
Background
Page Background
Typography
Inter variable font family
Heading 1 - 4xl Bold
Heading 2 - 3xl Semibold
Heading 3 - 2xl Semibold
Heading 4 - xl Medium
Body text - Base size, regular weight
Secondary text - Small size, muted color
Caption text - Extra small size
Code snippet Buttons
All button variants and sizes
Button Variants
Form Elements
Inputs, labels, and form controls
Sample Form
Test form inputs with healthcare theme
Input States
Different input variations
Badges
Status indicators and labels
Default Badge Secondary Destructive Outline
Use cases:
New In Progress Completed Urgent Pending
Cards
Content containers
Simple Card
Basic card with header and content
This is a simple card component demonstrating the healthcare theme styling.
With Statistics
Card showing data
1,234
Total patients
Action Card
Card with interactive elements
Click the button below to continue.
Loading States
Skeleton loaders and placeholders
Implementation Summary
What's been installed and configured
Theme Features
- ✓ Custom healthcare color scheme with OKLCH
- ✓ Inter variable font (self-hosted)
- ✓ Light mode only (as requested)
- ✓ Tailwind CSS v4 with CSS-first config
- ✓ Custom success color added
Components Installed
- 📦 52 standard shadcn components via CLI
- 📦 7 custom UI components from example
- 📦 All Radix UI primitives (27 packages)
- 📦 Form validation (react-hook-form + zod)
- 📦 Charts, carousels, and advanced components
Custom Components Available:
button-group empty field input-group item kbd spinner
Shadcn UI with Healthcare Theme • Astro + React • Tailwind CSS v4
All components ready for production use