Kitchen Sink
Every component on one page.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Design is not just what it looks like and feels like. Design is how it works. Every detail matters — the way text flows on a page, the spacing between elements, the careful balance of hierarchy.
When done right, typography becomes invisible, letting the content speak for itself.
Simplicity is the ultimate sophistication.
- Clean, semantic HTML structure
- Apple-inspired design tokens
- Dark mode support built-in
- Install the Tailwind CSS plugin
- Import the ciderui stylesheet
- Start building beautiful interfaces
Use the @import "ciderui" directive. Press Cmd + K to open the command palette. Use mark to highlight text. This is helper text.
Button
Form
Verification Code
Card
iCloud Storage
5 GB of 50 GB used
Weekly Summary
You closed 12 tasks this week. Keep up the great work.
Avatar & Badge
Callout
Software Update
A new version of macOS is available. Update now to get the latest features and security improvements.
List
Project Files
Last updated 2 hours ago
Profile verified
Click to view your profile settings.
Security Alert
New login detected from unknown device.
Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Credit Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-003 | Unpaid | Bank Transfer | $350.00 |
| Total | $750.00 | ||
Segmented Control
Overview content here.
Analytics content here.
Reports content here.
Breadcrumb
Pagination & Page Control
Progress & Activity Indicator
Popover
Dimensions
Set the dimensions for the layer.
Dialog
HUD
Kbd
Tag
Gauge
Navigation Bar
Toolbar
Separator
Search Field
Stepper
Token Field
Tooltip
Disclosure Group
General
About This Mac, Software Update, Storage
Appearance
Light, Dark, Auto — accent color and highlight color preferences
Accessibility
VoiceOver, Zoom, Display, Spoken Content