repository·master·Indexed 23 days ago
https://github.com/kiwicom/orbitA design system and component library for building travel products with consistent design and user experience. It includes @kiwicom/orbit-components, a set of React components such as Alert, Accordion, and AirportIllustration, and @kiwicom/babel-plugin-orbit-components to optimize bundle size by transforming destructured imports into granular, direct imports.
Orbit is more than a component library; it is a design system built on years of experience in travel products, incorporating accessibility, internationalization, advanced theming, and travel-specific components. The development of Orbit is guided by several core values intended to balance the needs of designers and developers:
Box component is a versatile layout primitive used to build UI structures. It supports a wide range of styling props including flexbox properties, spacing, positioning, and typography alignment. You can also specify different styles for different viewports using media query objects.Progressive disclosure is a design principle used to manage information overload by showing users only what they need at a given time to make a decision, while keeping secondary options just a tap away.
Use this principle to:
When deciding what to disclose progressively, ask:
getTokens function in your application, allowing you to apply custom themes to Orbit components.Because NotificationBadge is small and circular, it has strict content limitations:
The Breadcrumbs component adapts its content based on the screen size to maintain usability:
On larger screens, the component displays the full path:
On smaller screens, to avoid clutter and line-breaking issues, the component simplifies to a single option:
Whenever onMouseEnter, onFocus, or onClick events fire, the component calculates possible positions and applies the first valid one. You can influence this by providing a preferred placement. If the preferred position is unavailable, it falls back to a default order defined in the component's internal enum.
On mobile devices, users must click on the children to open the TooltipPrimitive.
To ensure the Tooltip renders in a specific location, add a div with id="tooltips" to your application. If this element is not found, the Tooltip will be rendered at the end of the DOM.
Distinguish between these three types of dashes:
1-hour flight, co-traveler).12:30–14:35, 1–2 days). When describing locations, replace with an arrow with spaces (e.g., Prague → Barcelona).We checked you in — now you can download your boarding passes.).When expandOnTileClick is set to true on an AccordionSection, the component automatically manages several ARIA attributes and keyboard behaviors to ensure the header acts as a functional interactive element:
role="button".aria-expanded is toggled between true and false based on the section's state.aria-controls is used to associate the header with its corresponding content section.tabIndex is set to 0, allowing the header to be included in the natural tab order.Keyboard Navigation Support:
<Accordion id="faq-accordion">
<AccordionSection id="section-1" header="What is Orbit?" expandOnTileClick>
Orbit is Kiwi.com's design system for creating consistent user experiences across products.
</AccordionSection>
<AccordionSection id="section-2" header="How do I use Accordion?" expandOnTileClick>
Import the Accordion and AccordionSection components and nest the sections within the accordion.
</AccordionSection>
</Accordion>circled badge, do not use the standard Badge component. Instead, use the NotificationBadge component.To help users match rows to columns in multi-column tables, Orbit tables feature a hover state. When a row is hovered, it receives a <InlineToken name="paletteCloudNormal" /> background, making the data easier to scan.
The Table component supports configuration for: