SWAN Design System

Overview Designers Developers React setup Vanilla setup Tokens CollaborationNew Expansion Packs Deprecation Migration Internationalization AI-Assisted Development ThemingNew

Overview ESLint plugin Stylelint plugin SWAN Overlay Codemods Live playground

Overview Accessibility All Tokens Color Core Props Page Layout Icons Modes Responsive System Space Typography

Overview Accordion Adaptive Carousel Alert Box Anchor Bar Aspect Ratio Avatar Banner Base Tile Bounded Content Box Breadcrumbs Button Buttonbar Callout Card CarouselDeprecated Checkbox Collapsible Color Swatches Combobox Convenience Elements Count Date CalendarNew Date PickerNew Divider Dropdown Empty State Error Boundary Fieldset File Dropzone File Input File Tile FlexBox Fluid Image Form Grid Heading (H1–H6)Hidden Icon Button Left Hand Navigation LightboxNew 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 Status Message Step Indicator Table Tabs Text Area Text Input Thumbnails HeroDeprecated Time PickerNew Toggle Switch Typography Uncustomizable Markup Visible Visually Hidden Zoom Controls Zoomable ImageNew

Overview Button Placement Destructive Actions File Upload Communicating System FeedbackNew Date & TimeNew

Overview CTAs Currency Date and Time Error States Numbers Phone Numbers

SWAN Design System

Show all code

SWAN Design System

Overview Designers Developers React setup Vanilla setup Tokens CollaborationNew Expansion Packs Deprecation Migration Internationalization AI-Assisted Development ThemingNew

Overview ESLint plugin Stylelint plugin SWAN Overlay Codemods Live playground

Overview Accessibility All Tokens Color Core Props Page Layout Icons Modes Responsive System Space Typography

Overview Accordion Adaptive Carousel Alert Box Anchor Bar Aspect Ratio Avatar Banner Base Tile Bounded Content Box Breadcrumbs Button Buttonbar Callout Card CarouselDeprecated Checkbox Collapsible Color Swatches Combobox Convenience Elements Count Date CalendarNew Date PickerNew Divider Dropdown Empty State Error Boundary Fieldset File Dropzone File Input File Tile FlexBox Fluid Image Form Grid Heading (H1–H6)Hidden Icon Button Left Hand Navigation LightboxNew 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 Status Message Step Indicator Table Tabs Text Area Text Input Thumbnails HeroDeprecated Time PickerNew Toggle Switch Typography Uncustomizable Markup Visible Visually Hidden Zoom Controls Zoomable ImageNew

Overview Button Placement Destructive Actions File Upload Communicating System FeedbackNew Date & TimeNew

Overview CTAs Currency Date and Time Error States Numbers Phone Numbers

Live playground

SWAN
Live playground

Loading...

Terms of use Privacy policy Legal notice