ClankDesign
Clank Design/Component workshop

Clank Design · Framework 39 / Themes 10

Inspect every state.
Shape every surface.

A dependency-free component workshop built with the same Clank primitives it documents. Explore real keyboard behavior, semantic anatomy, agent metadata, and ten live token systems.

Live componentDialog

Invite a teammate

Try the modal, move through its fields with Tab, and press Escape to return.

39interactive families
10complete themes
32typed design tokens
0runtime dependencies
Theme presets

Change the entire system in one click.

Complete catalog

Built from real Clank controllers.

Every example is interactive
01
AccordionSingle or multiple expandable sections.
→02
AlertDialogA modal decision that cannot be dismissed accidentally.
→03
AutocompleteEditable free-form input with filtered suggestions.
→04
AvatarImage loading state with an accessible fallback.
→05
BottomSheetMobile-first modal surface with snap points, safe-area layout, and swipe dismissal.
→06
ButtonNative-first press behavior and agent metadata.
→07
CheckboxBinary or indeterminate choice with checked and unchecked native form projection.
→08
CheckboxGroupAn ordered group with independently checked values and an optional mixed-state parent.
→09
CollapsibleA controlled or uncontrolled expandable panel.
→10
ComboboxEditable input restricted to supplied values.
→11
ContextMenuPointer, touch, and keyboard context actions.
→12
DialogNested-safe modal or non-modal dialog behavior.
→13
DrawerDialog semantics with direction-aware swipe dismissal.
→14
FieldValidation and accessibility state shared by form parts.
→15
FieldsetNative grouping and disabled propagation for fields.
→16
FormMulti-field validation, submission, reset, and error focus.
→17
InputComposable native text input state.
→18
MenuActions, links, choices, groups, and nested submenus.
→19
MenubarCoordinated horizontal menus with roving focus.
→20
MeterAccessible scalar measurement over a bounded range.
→21
NavigationMenuFocus-safe site navigation with current links and flyout content.
→22
NumberFieldLocale-aware nullable numeric entry with zero-seeded stepping.
→23
OTPFieldOne-time-code entry with paste, masking, and autofill projection.
→24
PaginationCompact result navigation with clamped state and native page controls.
→25
PopoverAnchored interactive popup content.
→26
PreviewCardDelayed pointer and focus preview enhancement.
→27
ProgressDeterminate or indeterminate progress status.
→28
RadioOne-of-many radio selection with roving focus.
→29
ScrollAreaNative scrolling with accessible custom controls, zoom preservation, and RTL normalization.
→30
SelectSingle or multiple listbox selection.
→31
SeparatorSemantic or decorative horizontal and vertical separation.
→32
SliderSingle or range values with pointer, keyboard, and collision policies.
→33
SwitchBinary on/off setting with checked and unchecked native form projection.
→34
TabsManual or automatic tab activation with roving focus.
→35
ToastQueued live notifications with mounted-part ARIA, focus recovery, timers, promises, and swipe.
→36
ToggleA two-state pressed button.
→37
ToggleGroupSingle or multiple pressed-button selection.
→38
ToolbarA direction-aware collection of common controls.
→39
TooltipDelayed visual description for an already named trigger.
→