SWAN Design System

Overview Designers Developers React setup Vanilla setup Tokens Migration Intercompatibility Contribution

Overview Accessibility All Tokens Color Constants Core props Glossary Grid Layout Icons Modes Responsive System Space Typography

Overview Accordion Alert Box Anchor Bar Aspect Ratio Avatar Banner Bounded Content Box Breadcrumbs Button Buttonbar Callout Card Carousel Checkbox Collapsible Color Swatches Combobox Component Utilities Convenience Elements Count Divider Dropdown Error Boundary Fieldset File Input FlexBox Fluid Image Form Grid Heading (H1–H6)Hidden Left Hand Navigation Link List Listbox Menu Modal Dialog Page Wrappers Pagination Pipe Separator Popover Price Bar Pricing Progress Bar Progressive Image Promo Code Radio Button Range Ratings Stars Responsive Image Search Input Selection Set Skeleton Text Spinner Square Image Container Standard Tile Step Indicator Table Tabs Text Area Text Input Thumbnails Hero Toggle Switch Typography Uncustomizable Markup Visible Visually Hidden Zoom Controls

SWAN Design System

Show all code

SWAN Design System

Overview Designers Developers React setup Vanilla setup Tokens Migration Intercompatibility Contribution

Overview Accessibility All Tokens Color Constants Core props Glossary Grid Layout Icons Modes Responsive System Space Typography

Overview Accordion Alert Box Anchor Bar Aspect Ratio Avatar Banner Bounded Content Box Breadcrumbs Button Buttonbar Callout Card Carousel Checkbox Collapsible Color Swatches Combobox Component Utilities Convenience Elements Count Divider Dropdown Error Boundary Fieldset File Input FlexBox Fluid Image Form Grid Heading (H1–H6)Hidden Left Hand Navigation Link List Listbox Menu Modal Dialog Page Wrappers Pagination Pipe Separator Popover Price Bar Pricing Progress Bar Progressive Image Promo Code Radio Button Range Ratings Stars Responsive Image Search Input Selection Set Skeleton Text Spinner Square Image Container Standard Tile Step Indicator Table Tabs Text Area Text Input Thumbnails Hero Toggle Switch Typography Uncustomizable Markup Visible Visually Hidden Zoom Controls

Live playground

SWAN
Live playground

Loader...

Terms of use Privacy policy Legal notice