🌼 DaisyUI Components Showcase

Welcome to the complete DaisyUI components showcase! This page demonstrates every major DaisyUI component.

🎯 Layout & Structure Components

Hero Component

Hero Section

This is a hero component with centered content.

🎨 Form Components

Input Fields

Text Input

Email Input

Select Component

Checkboxes & Radio Buttons

Checkboxes

Remember me

Subscribe to newsletter

Radio Buttons

Option 1

Option 2

Toggle Switches

Range Slider

0 25 50 75 100

File Input

Textarea

🎮 Interactive Components

Buttons (All Variants)

Button Variants

Button Sizes

Join Component (Button Groups)

Join Component

Filter Component

📊 Data Display Components

Cards

Shoes!

If a dog chews shoes whose shoes does he choose?

Card title!

If a dog chews shoes whose shoes does he choose?

Image Overlay

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos.

Avatar Component

Badges

Badge Component

Default

Primary

Secondary

Accent

Ghost

Info

Success

Warning

Error

Table Component

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

List Component

Recent Activity
01

John Doe

Updated profile
02

Jane Smith

Added new project

🚨 Feedback Components

Alerts

Alert Component

This is an info alert!

<div class="alert alert-success">
  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
  <span>This is a success alert!</span>
</div>

<div class="alert alert-warning">
  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg>
  <span>This is a warning alert!</span>
</div>

<div class="alert alert-error">
  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
  <span>This is an error alert!</span>
</div>

Progress Bars

Progress Component

Radial Progress

Radial Progress Component

70%

85%

60%

Rating Component

Countdown Component

days

hours

min

sec

Menu Component

Tabs Component

Tab content 1

<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 2</div>

<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 3" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 3</div>

Steps Component

Register
Choose plan
Purchase
Receive Product

Timeline Component

1984

First Macintosh computer
1998

iMac
2001

iPod
2007

iPhone

Modal Component

Drawer Component

Open drawer

Tooltip Component

🎨 Utility Components

Divider Component

Primary Divider

Secondary Divider

Kbd Component

ctrl shift del

Stack Component

Alert 1

Alert 2

Alert 3

Indicator Component

99+

content

📱 Media Components

Diff Component

Chat Component

Obi-Wan Kenobi 12:45

You were the chosen one!

Anakin 12:46

I hate you!

Mockup Components

Hi.

🎯 Summary

This comprehensive showcase demonstrates every major DaisyUI component including:

Layout: Hero, Footer, Drawer, Dock
Forms: Input, Select, Checkbox, Radio, Toggle, Range, File Input, Textarea
Interactive: Buttons (all variants), Join, Filter
Data Display: Cards, Avatar, Badges, Table, List, Timeline
Feedback: Alerts, Progress, Radial Progress, Rating, Countdown
Navigation: Menu, Tabs, Steps
Modals: Modal, Tooltip
Utilities: Divider, Kbd, Stack, Indicator
Media: Diff, Chat, Mockups

All components are fully functional and demonstrate DaisyUI’s comprehensive component library!

This showcase was created to demonstrate the complete DaisyUI component library with your Astro project.