⋅
Getting started
For designers
For developers
GitHub repos & resources
Support
Foundation
Orbit principles
Accessibility
Border radiuses
Colors
Design tokens
Elevation
Icons
Illustrations
Spacing
Typography
Components
Action
Button
ButtonGroup
ButtonLink
ButtonMobileStore
SocialButton
TextLink
Structure
Accordion
Card
List
PricingTable
Separator
Table
Tabs
Tile
TileGroup
Information
Alert
Badge
BadgeList
NotificationBadge
Toast
Overlay
Dialog
Drawer
Modal
Popover
Tooltip
Input
Checkbox
ChoiceGroup
InputField
InputFile
InputGroup
InputStepper
ListChoice
Radio
Select
Textarea
Accessibility
SkipLink
SkipNavigation
Interaction
Collapse
Slider
Stepper
Switch
Tag
Visuals
AirportIllustration
CallOutBanner
CarrierLogo
CountryFlag
Coupon
FeatureIcon
Icon
Illustration
PictureCard
RatingStars
Seat
ServiceLogo
StopoverArrow
Text
Heading
Text
Progress indicators
EmptyState
Loading
Timeline
Wizard
Navigation
Breadcrumbs
LinkList
NavigationBar
Pagination
Layout
Box
Grid
HorizontalScroll
Inline
Layout
Stack
Responsive
Desktop
Hide
Mobile
Utility components
Portal
Sticky
Truncate
Primitives
BadgePrimitive
ButtonPrimitive
IllustrationPrimitive
Design patterns
Progressive disclosure
Choosing components for actions
Designing forms
Forms and errors
Development
Guides
Developing layouts
Dictionary
Using component types
Why we don't export styled components
ESLint plugin
Utilities
Media queries
Right-to-left languages
Hooks
useFocusTrap
useMediaQuery
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
Elevation
Icons
Illustrations
Spacing
Typography
Components
Action
Button
ButtonGroup
ButtonLink
ButtonMobileStore
SocialButton
TextLink
Structure
Accordion
Card
List
PricingTable
Separator
Table
Tabs
Tile
TileGroup
Information
Alert
Badge
BadgeList
NotificationBadge
Toast
Overlay
Dialog
Drawer
Modal
Popover
Tooltip
Input
Checkbox
ChoiceGroup
InputField
InputFile
InputGroup
InputStepper
ListChoice
Radio
Select
Textarea
Accessibility
SkipLink
SkipNavigation
Interaction
Collapse
Slider
Stepper
Switch
Tag
Visuals
AirportIllustration
CallOutBanner
CarrierLogo
CountryFlag
Coupon
FeatureIcon
Icon
Illustration
PictureCard
RatingStars
Seat
ServiceLogo
StopoverArrow
Text
Heading
Text
Progress indicators
EmptyState
Loading
Timeline
Wizard
Navigation
Breadcrumbs
LinkList
NavigationBar
Pagination
Layout
Box
Grid
HorizontalScroll
Inline
Layout
Stack
Responsive
Desktop
Hide
Mobile
Utility components
Portal
Sticky
Truncate
Primitives
BadgePrimitive
ButtonPrimitive
IllustrationPrimitive
Design patterns
Progressive disclosure
Choosing components for actions
Designing forms
Forms and errors
Development
Guides
Developing layouts
Dictionary
Using component types
Why we don't export styled components
ESLint plugin
Utilities
Media queries
Right-to-left languages
Hooks
useFocusTrap
useMediaQuery
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
/
Layout
/
HorizontalScroll
HorizontalScroll
Groups items onto one accessible row even on small screens.
Guidelines
React
GitHub
GitHub
GitHub
GitHub
Code editor
When to use
To present similar items (such as
cards
with baggage options) as a single row even on small screens.
When not to use
To add spacing to elements—use a
stack
.
To present items that can span multiple rows—use a flexible
box
.
Component status
n/a
Released
n/a
n/a
Writing
