⋅

Getting started

For designers For developers GitHub repos & resources Support

Foundation

Orbit principles Accessibility Border radiuses Colors

Design tokens

Introduction Installation Global design tokens Component design tokens

Elevation Icons Illustrations Spacing Typography Tailwind

Components

Accordion AirportIllustration Alert Badge BadgeList BadgePrimitive Box Breadcrumbs Button ButtonGroup ButtonLink ButtonMobileStore ButtonPrimitive CallOutBanner Card CarrierLogo Checkbox ChoiceGroup Collapse CountryFlag Coupon Dialog Drawer EmptyState FeatureIcon Grid Heading Hide HorizontalScroll Icon Illustration IllustrationPrimitive Inline InputField InputFile InputGroup InputSelect Itinerary Layout LinkList List ListChoice Loading Modal NavigationBar NotificationBadge OrbitProvider Pagination Popover Portal Radio Seat SegmentedSwitch Select Separator ServiceLogo Skeleton SkipLink SkipNavigation Slider SocialButton Stack Stepper StopoverArrow Switch Table Tabs Tag Text TextLink Textarea Tile TileGroup Timeline Toast Tooltip Truncate Wizard

Design patterns

Progressive disclosure Choosing components for actions Designing forms Forms and errors

Development

Guides

Developing layouts Using component types ESLint plugin

Utilities

Media queries Right-to-left languages Slide animation

Hooks

useClickOutside useFocusTrap useIntersect useLockScrolling useMediaQuery useRandomId

Migration guides

v15 v14 v12 v11 v10 v9 v7

For Kiwi.com use

Brand

Brand guidelines

Content

Voice & tone Grammar & mechanics Glossary Social media Technical content

Guides

Biz Dev assets Preparing carrier logos Figma

Getting started

For designers For developers GitHub repos & resources Support

Foundation

Orbit principles Accessibility Border radiuses Colors

Design tokens

Introduction Installation Global design tokens Component design tokens

Elevation Icons Illustrations Spacing Typography Tailwind

Components

Accordion AirportIllustration Alert Badge BadgeList BadgePrimitive Box Breadcrumbs Button ButtonGroup ButtonLink ButtonMobileStore ButtonPrimitive CallOutBanner Card CarrierLogo Checkbox ChoiceGroup Collapse CountryFlag Coupon Dialog Drawer EmptyState FeatureIcon Grid Heading Hide HorizontalScroll Icon Illustration IllustrationPrimitive Inline InputField InputFile InputGroup InputSelect Itinerary Layout LinkList List ListChoice Loading Modal NavigationBar NotificationBadge OrbitProvider Pagination Popover Portal Radio Seat SegmentedSwitch Select Separator ServiceLogo Skeleton SkipLink SkipNavigation Slider SocialButton Stack Stepper StopoverArrow Switch Table Tabs Tag Text TextLink Textarea Tile TileGroup Timeline Toast Tooltip Truncate Wizard

Design patterns

Progressive disclosure Choosing components for actions Designing forms Forms and errors

Development

Guides

Developing layouts Using component types ESLint plugin

Utilities

Media queries Right-to-left languages Slide animation

Hooks

useClickOutside useFocusTrap useIntersect useLockScrolling useMediaQuery useRandomId

Migration guides

v15 v14 v12 v11 v10 v9 v7

For Kiwi.com use

Brand

Brand guidelines

Content

Voice & tone Grammar & mechanics Glossary Social media Technical content

Guides

Biz Dev assets Preparing carrier logos Figma

Orbit.kiwi/
Components/
Responsive

Responsive

Hide

Hides content based on the viewport size.

Component status

·

·

·

Design tokens

v7.2.1

·

React components

v15.10.1

·

Developer mode

Opens components on the React tab by default.

Turn on dev mode

Built & maintained by Kiwi.com

Open sourced with

for travel