⋅
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/
  • Layout

Layout

Box

Offers a universal building block for layouts.

Grid

Implements a CSS grid valid even in older browsers.

HorizontalScroll

Groups items onto one accessible row even on small screens.

Inline

Adds spacing among inline components.

Layout

Displays content in a responsive column layout.

Stack

Lay out components with consistent spacing in a row or column.

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