SWAN
SWAN Design System
    OverviewDesignersDevelopersReact setupVanilla setupTokensCollaborationNewExpansion PacksDeprecationMigrationInternationalizationAI-Assisted DevelopmentThemingNew
    OverviewESLint pluginStylelint pluginSWAN OverlayCodemodsLive playground
    OverviewAccessibilityAll TokensColorCore PropsPage LayoutIconsModesResponsive SystemSpaceTypography
    OverviewAccordionAdaptive CarouselAlert BoxAnchor BarAspect RatioAvatarBannerBase TileBounded ContentBoxBreadcrumbsButtonButtonbarCalloutCardCarouselDeprecatedCheckboxCollapsibleColor SwatchesComboboxConvenience ElementsCountDate CalendarNewDate PickerNewDividerDropdownEmpty StateError BoundaryFieldsetFile DropzoneFile InputFile TileFlexBoxFluid ImageFormGridHeading (H1–H6)HiddenIcon ButtonLeft Hand NavigationLightboxNewLinkListListboxMenuModal DialogPage WrappersPaginationPipe SeparatorPopoverPrice BarPricingProgress BarProgressive ImagePromo CodeRadio ButtonRangeRatings StarsResponsive ImageSearch InputSelection SetSkeleton TextSpinnerSquare Image ContainerStandard TileStatus MessageStep IndicatorTableTabsText AreaText InputThumbnails HeroDeprecatedTime PickerNewToggle SwitchTypographyUncustomizable MarkupVisibleVisually HiddenZoom ControlsZoomable ImageNew
    OverviewButton PlacementDestructive ActionsFile UploadCommunicating System FeedbackNewDate & TimeNew
    OverviewCTAsCurrencyDate and TimeError StatesNumbersPhone Numbers
    SWAN
    SWAN Design System
      Show all code
      SWAN
      SWAN Design System
        OverviewDesignersDevelopersReact setupVanilla setupTokensCollaborationNewExpansion PacksDeprecationMigrationInternationalizationAI-Assisted DevelopmentThemingNew
        OverviewESLint pluginStylelint pluginSWAN OverlayCodemodsLive playground
        OverviewAccessibilityAll TokensColorCore PropsPage LayoutIconsModesResponsive SystemSpaceTypography
        OverviewAccordionAdaptive CarouselAlert BoxAnchor BarAspect RatioAvatarBannerBase TileBounded ContentBoxBreadcrumbsButtonButtonbarCalloutCardCarouselDeprecatedCheckboxCollapsibleColor SwatchesComboboxConvenience ElementsCountDate CalendarNewDate PickerNewDividerDropdownEmpty StateError BoundaryFieldsetFile DropzoneFile InputFile TileFlexBoxFluid ImageFormGridHeading (H1–H6)HiddenIcon ButtonLeft Hand NavigationLightboxNewLinkListListboxMenuModal DialogPage WrappersPaginationPipe SeparatorPopoverPrice BarPricingProgress BarProgressive ImagePromo CodeRadio ButtonRangeRatings StarsResponsive ImageSearch InputSelection SetSkeleton TextSpinnerSquare Image ContainerStandard TileStatus MessageStep IndicatorTableTabsText AreaText InputThumbnails HeroDeprecatedTime PickerNewToggle SwitchTypographyUncustomizable MarkupVisibleVisually HiddenZoom ControlsZoomable ImageNew
        OverviewButton PlacementDestructive ActionsFile UploadCommunicating System FeedbackNewDate & TimeNew
        OverviewCTAsCurrencyDate and TimeError StatesNumbersPhone Numbers
        • SWAN
        • Foundations
        Get started
        Resources and guidance to help you get started with SWAN.
        Designers

        Designers

        A designer introduction to SWAN
        Developers

        Developers

        A developer introduction to SWAN
        Configuring React Projects

        React setup

        Integrating SWAN with modern React projects (Vite, Next.js, CRA, and Gatsby)
        Page Setup

        Vanilla setup

        What each page needs to support SWAN
        Tokens

        Tokens

        How to use SWAN tokens
        Contributing to SWAN

        Collaboration

        New
        How we work together to build faster, better, and more consistent experiences.
        Expansion Packs

        Expansion Packs

        An introduction to Expansion Packs
        Deprecation

        Deprecation

        Why and what we deprecate in SWAN
        Migration

        Migration

        SWAN design system migration documentation.
        Internationalization

        Internationalization

        Internationalization in the SWAN design system.
        AI-Assisted Development

        AI-Assisted Development

        Speed up UI creation with SWAN's AI tools.
        Theming

        Theming

        New
        SWAN theming enables brand expression within a shared UI platform

        Other useful pages

        SWAN Proxy AvailabilitySWAN versionsChangelog
        Vista
        Terms of usePrivacy policyLegal notice