← demo-app

Component Library

Every building block available from @/components/wireframe, rendered for reference.

Buttons

Variants
Sizes
Disabled

Form controls

Input
Textarea
Label + Input
Select
Checkbox
Toggle
Input OTP
Rating

Selection

Selection card
Avatar picker

Data display

Badge
DefaultSecondarySuccessWarningDestructiveOutline
Avatar
Progress
70%
Skeleton
Card
Card title

Some supporting copy inside a card.

Table

NameRoleStatus
Maya ChenDesignerActive
Devon ParkEngineerAway

Disclosure & navigation

Tabs

Overview panel content.

Accordion

Tooltip

Overlays & feedback

Dialog
Alert dialog
Toast

Charts

Bar chart
Line chart

Annotations

Highlight
This is important text.
Underline
A key idea here.
Box
Boxed
Circle
Circled
Bracket
Bracketed
Crossed off
Done

Decorative

Divider
Arrow
Circle badge
1
2
Doodle
Heart / Star
Sticky note
Remember this!
Torn edge

Icons

Scribble icons
react-doodle-icons

Wireframe helpers

Image placeholder
Image
Video placeholder
Video
Browser frame
example.com
Page content