Components
Every component in one place — open any of them and switch between the preview and its markup.
Every component in the system. Open one and each demo has a Preview / Code toggle — flip to Code to read the markup and copy it straight out. Nothing here needs a build step: the markup plus the stylesheet is the whole runtime.
Tip
Press / anywhere to search, or use the Code toggle on any demo to copy its markup.Elements
Text elements
blockquote · pullquote · figure · note · drop cap
Tables
table · compact · definition list · rule list · steps
Quotes
inline · pullquote · section break
Code & syntax
codebox · line numbers · copy · light twin
Badge
tones · live · chip · timecode · kbd
Forms
Form control
input · textarea · states · search
Select
native, dressed
Checks & radios
check · radio · switch
Range
accent-filled track
Input group
prefix · suffix · button
Floating labels
rest → slate caption
Form layout
rows · fieldsets · actions
Components
Buttons
6 intents · 3 sizes · icons · states
Button group
segmented, aria-pressed
Card
media · body · meta · 6 layouts
Collection cards
one card per collection type
Accordion
native details · exclusive groups
Collapse
one panel
Dropdowns
menu · heads · dividers
Modal
real dialog · focus trap
Offcanvas
edge drawer
Popovers
Popover API · anchored
Tooltips
CSS only, from data-tip
Toasts
transient confirmations
Alerts
5 tones · dismissable
Progress
determinate · thin · labelled
Spinners
spinner · scan · skeletons
List group
rows in one surface
Carousel
scroll-snap, no trap
Marquee
looping strip, hover-pause
Navbar
alignment · menus · sheet · contexts
Navs & tabs
peer views
Breadcrumb
the trail back
Pagination
pages · pager
Close button
one dismiss affordance
Long-form content
headings … editor cards