⋅
Getting started
For designersFor developersGitHub repos & resourcesSupport
Foundation
Orbit principlesAccessibilityBorder radiusesColors
Design tokens
IntroductionInstallationGlobal design tokensComponent design tokens
ElevationIconsIllustrationsSpacingTypographyTailwind
Components
AccordionAirportIllustrationAlertBadgeBadgeListBadgePrimitiveBoxBreadcrumbsButtonButtonGroupButtonLinkButtonMobileStoreButtonPrimitiveCallOutBannerCardCarrierLogoCheckboxChoiceGroupCollapseCountryFlagCouponDialogDrawerEmptyStateFeatureIconGridHeadingHideHorizontalScrollIconIllustrationIllustrationPrimitiveInlineInputFieldInputFileInputGroupInputSelectItineraryLayoutLinkListListListChoiceLoadingModalNavigationBarNotificationBadgeOrbitProviderPaginationPopoverPortalRadioSeatSegmentedSwitchSelectSeparatorServiceLogoSkeletonSkipLinkSkipNavigationSliderSocialButtonStackStepperStopoverArrowSwitchTableTabsTagTextTextLinkTextareaTileTileGroupTimelineToastTooltipTruncateWizard
Design patterns
Progressive disclosureChoosing components for actionsDesigning formsForms and errors
Development
Guides
Developing layoutsUsing component types
Utilities
Media queriesRight-to-left languagesSlide animation
Hooks
useClickOutsideuseFocusTrapuseIntersectuseLockScrollinguseMediaQueryuseRandomId
Migration guides
v24v23v22v21v20v19v18v17v16v15v14v12v11v10v9v7
For Kiwi.com use
Brand
Brand guidelines
Content
Voice & toneGrammar & mechanicsGlossarySocial mediaTechnical content
Guides
Biz Dev assetsPreparing carrier logosFigma
Getting started
For designersFor developersGitHub repos & resourcesSupport
Foundation
Orbit principlesAccessibilityBorder radiusesColors
Design tokens
IntroductionInstallationGlobal design tokensComponent design tokens
ElevationIconsIllustrationsSpacingTypographyTailwind
Components
AccordionAirportIllustrationAlertBadgeBadgeListBadgePrimitiveBoxBreadcrumbsButtonButtonGroupButtonLinkButtonMobileStoreButtonPrimitiveCallOutBannerCardCarrierLogoCheckboxChoiceGroupCollapseCountryFlagCouponDialogDrawerEmptyStateFeatureIconGridHeadingHideHorizontalScrollIconIllustrationIllustrationPrimitiveInlineInputFieldInputFileInputGroupInputSelectItineraryLayoutLinkListListListChoiceLoadingModalNavigationBarNotificationBadgeOrbitProviderPaginationPopoverPortalRadioSeatSegmentedSwitchSelectSeparatorServiceLogoSkeletonSkipLinkSkipNavigationSliderSocialButtonStackStepperStopoverArrowSwitchTableTabsTagTextTextLinkTextareaTileTileGroupTimelineToastTooltipTruncateWizard
Design patterns
Progressive disclosureChoosing components for actionsDesigning formsForms and errors
Development
Guides
Developing layoutsUsing component types
Utilities
Media queriesRight-to-left languagesSlide animation
Hooks
useClickOutsideuseFocusTrapuseIntersectuseLockScrollinguseMediaQueryuseRandomId
Migration guides
v24v23v22v21v20v19v18v17v16v15v14v12v11v10v9v7
For Kiwi.com use
Brand
Brand guidelines
Content
Voice & toneGrammar & mechanicsGlossarySocial mediaTechnical content
Guides
Biz Dev assetsPreparing carrier logosFigma
  • Orbit.kiwi/
  • Components/
  • Interaction

Interaction

Collapse

Hides long or complex information under a block that can be hidden.

SegmentedSwitch

Showing multiple choices from which only one can be selected.

Slider

Enables selection from a range of values.

Stepper

Enables incremental changes of a counter without a direct input.

Switch

Offers a control to toggle a setting on or off.

Tag

Offers a label that can optionally be selected and unselected or removed.

Component status
·
Storybook
·
Playroom
·
Changelog
·
Themer
Design tokens
v10.1.0
·
React components
v24.0.0
·
Developer mode
Opens components on the React tab by default.
Built & maintained by Kiwi.com
Open sourced with ❤ for travel