Temaron
Admin

Temaron Design System

Comprehensive showcase of all Shadcn UI components

Theme Switcher
Toggle between light, dark, and system themes

Click the theme toggle to switch between light, dark, and system preferences

Buttons
Different button variants and sizes
Badges & Toggle
Status indicators and toggle buttons
DefaultSecondaryDestructiveOutline
Alerts & Toast
Notifications and messages
Avatar
User profile pictures
CNTM
Accordion
Collapsible content sections

Collapsible
Simple show/hide content
Tabs
Organize content in tabs
Content for Tab 1
Dialog, Drawer & Credenza
Modal and drawer overlays
Popover & Tooltip
Contextual overlays
Form Elements
Inputs, textareas, and form controls
Progress & Slider
Progress indicators and value sliders
33%
50
Table
Data tables
A list of example users
NameEmailRoleStatus
John Doejohn@example.comAdminActive
Jane Smithjane@example.comUserInactive
Pagination
Page navigation
Scroll Area
Styled scrollable container
Scrollable item 1
Scrollable item 2
Scrollable item 3
Scrollable item 4
Scrollable item 5
Scrollable item 6
Scrollable item 7
Scrollable item 8
Scrollable item 9
Scrollable item 10
Scrollable item 11
Scrollable item 12
Scrollable item 13
Scrollable item 14
Scrollable item 15
Scrollable item 16
Scrollable item 17
Scrollable item 18
Scrollable item 19
Scrollable item 20
Skeleton
Loading placeholders
Separator
Visual dividers
Section 1
Section 2
Section 3
Typography
Text styles and hierarchy

Heading 1

Heading 2

Heading 3

Heading 4

This is regular body text at the base size.

This is smaller, muted text often used for descriptions.

This is extra small text for captions.

Theme Colors
Color palette from Shadcn theme variables

Background

Foreground

Primary

Secondary

Muted

Accent