⋅
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/
  • Design patterns

Design patterns

Choosing components for actions

How to select which Orbit component to use for your actions

Designing forms

How to put together forms to make them easy to complete

Forms and errors

Design forms with help and error messages that progressively guide users to completion

Progressive disclosure

Simplify your designs while keeping all information and options available

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