Developer mode

Opens components on the React tab by default.

Your bookmarks

orbit.kiwi
/ Components

Components

AirportIllustration Communicates information about specific airports in an interesting visual way.

Alert Breaks the main user flow to present information.

Figma React Sketch

Badge Presents users with short, relevant information.

Breadcrumbs Shows where the user is within the app hierarchy.

Button Displays a single important action a user can take.

ButtonGroup Groups multiple related actions a user can take.

ButtonLink Displays a single, less important action a user can take.

ButtonMobileStore AppStore and GooglePlay buttons.

CallOutBanner Encourages users to take an action to add additional services or the like.

Card Groups static content to make it easy to scan.

CarrierLogo Displays logos of transport carriers.

Checkbox Enables users to pick multiple options from a group.

ChoiceGroup Organizes checkboxes or radio buttons into a single related group.

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

CountryFlag Displays flags of countries from around the world.

Coupon Highlights promo codes.

Desktop Shows content only on desktop viewports.

DestinationCard Deprecated in favor of the more general PictureCard.

DestinationHeader Deprecated and not recommended for designs. We do have the more general PictureCard.

Dialog Prompts users to take or complete an action.

Drawer Wraps navigation or other content in a sidebar.

EmptyState Indicates when there’s no data to show, like when a search has no results.

FeatureIcon Draws attention to specific features.

Grid Implements a CSS grid valid even in older browsers.

Heading Shows the content hierarchy and improves the reading experience.

Hide Hides content based on the viewport size.

Icon Draws attention to specific actions and features.

Illustration Communicates information in an interesting visual way.

InputField Offers users a simple input for a form.

InputFile Enables users to upload a file to complete a form.

InputGroup Combines related inputs for a form.

InputStepper Enables incremental changes of a counter within a form.

Layout Displays content in a responsive column layout.

LinkList Groups related links, such as in a navigation menu.

List Shows related items.

ListChoice Shows one of a selectable list of items with similar structures.

Loading Lets users know that content is being loaded.

Mobile Shows content only on mobile viewports.

Modal Forces users to complete an action before continuing.

NavigationBar Wraps top-level navigation and branding.

NavigationList Deprecated in favor of LinkList.

NotificationBadge Shows simple, non-interactive information.

Pagination Lets users navigate through large collections of items.

PictureCard Displays a card with a picture and space for information and actions.

Popover Keeps additional content easily accessible while not cluttering up the page.

PricingTable Helps users understand different pricing plans to choose from.

Radio Enables users to pick exactly one option from a group.

RatingStars Shows a static rating of a service such as a hotel.

Seat Presents visual information about a seat.

Select Offers a simple form control to select from many options.

Separator Visually separates content with different purposes.

ServiceLogo Presents a logo for a common service.

Slider Enables selection from a range of values.

SocialButton Lets users sign in using a social service.

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

Stepper Enables incremental changes of a counter without a direct input.

StopoverArrow Shows how many stopovers there are between two locations.

Table Creates a table for your tabular content.

Tabs Separates content into groups while keeping the overall context constant.

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

Text Renders text blocks in styles to fit the purpose.

Textarea Enables users to add longer text to a form.

TextLink Makes text in paragraphs actionable.

Tile Groups actionable content to make it easy to scan.

TileGroup Wraps tiles to show related interactions.

Toast Shows a brief, informative message that will appear only for a short time.

Tooltip Shows additional context on tap or hover.

TripSector Deprecated in favor of the forthcoming ItinerarySector.

TripSegment Deprecated in favor of the forthcoming ItinerarySegment.