ShadCN/UI Components Demo

A comprehensive showcase of beautifully designed components built with Radix UI and Tailwind CSS

React
TypeScript
Tailwind CSS
ShadCN/UI

Alerts

Display important messages and notifications

Buttons

Various button styles and sizes

Variants

Sizes

With Icons

Form Elements

Inputs, labels, and form controls

Interactive Counter

Click the buttons to change the count

0

Current count

Badges

Various badge styles and colors

Status Badges

Active
Pending
Draft
Cancelled

Custom Badges

Success
Warning
Info
New

Tabs

Organize content into switchable panels

Overview

This is the overview tab. Here you can see a summary of your data and key metrics. The content is organized in a clean, accessible way.

42
Total Users
98%
Uptime
1.2k
Page Views

Dialog Example

Modal dialogs for important actions

Sheet Example

Slide-out panels for additional content

ShadCN/UI Integration Complete! 🎉

All components are working and styled consistently. Ready for your application!