Futuristic airport terminal showcasing Orbit components with a maine coon cat

Orbit Components: Elevating React Development with Kiwi.com's Design System

The Orange Cat
The Orange Cat

In the ever-evolving world of React development, finding a comprehensive and user-friendly component library can be a game-changer. Enter Orbit Components, a powerful React component library developed by Kiwi.com. This library is designed to streamline the process of building Kiwi.com’s products while ensuring consistency and elevating user experience across the board.

Unlocking the Power of Orbit Components

Orbit Components is more than just a collection of UI elements. It’s a complete design system that aims to bring order and consistency to all of Kiwi.com’s products and processes. By using this library, developers can significantly increase the speed and efficiency of their design and build processes.

Key Features

  • Comprehensive Component Set: From basic elements to complex structures, Orbit offers a wide range of components to cover various UI needs.
  • Tailwind CSS Integration: Orbit leverages Tailwind CSS for styling, providing a flexible and customizable design system.
  • TypeScript Support: Full TypeScript definitions are included, enhancing developer experience and code quality.
  • Accessibility Focus: Many components are designed with accessibility in mind, improving the overall user experience.
  • Responsive Design: Components are built to be responsive, adapting seamlessly to different screen sizes.
  • Theming Capabilities: Easily customize the look and feel of components to match your brand.

Getting Started with Orbit

Installation

To begin your journey with Orbit Components, you’ll need to install the package in your React project. You can do this using npm or yarn:

# Using npm
npm install @kiwicom/orbit-components

# Using yarn
yarn add @kiwicom/orbit-components

Setting Up Fonts

Orbit Components uses the Roboto font family. To ensure proper styling, include the following in your HTML or CSS:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700"
  rel="stylesheet"
/>

Or in your CSS:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700");

Basic Usage

Once installed, you can start using Orbit components in your React application. Here’s a simple example using the Alert component:

import React from "react";
import Alert from "@kiwicom/orbit-components/lib/Alert";

const MyComponent: React.FC = () => {
  return <Alert>Welcome to Orbit Components!</Alert>;
};

export default MyComponent;

Diving Deeper: Advanced Usage

Theming with OrbitProvider

For projects requiring custom theming, Orbit offers the OrbitProvider component. This allows you to wrap your application and provide a custom theme:

import React from "react";
import { OrbitProvider, defaultTheme } from "@kiwicom/orbit-components";

const customTheme = {
  ...defaultTheme,
  palette: {
    ...defaultTheme.palette,
    primary: {
      light: "#5f8afa",
      normal: "#0000ff",
      dark: "#000080",
    },
  },
};

const App: React.FC = () => {
  return (
    <OrbitProvider theme={customTheme}>
      {/* Your app components */}
    </OrbitProvider>
  );
};

export default App;

Responsive Design with Box

The Box component is a versatile tool for creating responsive layouts. Here’s an example of how to use it:

import React from "react";
import Box from "@kiwicom/orbit-components/lib/Box";
import Text from "@kiwicom/orbit-components/lib/Text";

const ResponsiveLayout: React.FC = () => {
  return (
    <Box
      display="flex"
      flexDirection={{ mobile: "column", desktop: "row" }}
      alignItems="center"
      padding="large"
    >
      <Box marginBottom={{ mobile: "medium", desktop: "none" }}>
        <Text>Left content</Text>
      </Box>
      <Box marginLeft={{ desktop: "large" }}>
        <Text>Right content</Text>
      </Box>
    </Box>
  );
};

export default ResponsiveLayout;

Form Handling with InputField and Button

Orbit provides components for building interactive forms. Here’s a simple form example:

import React, { useState } from "react";
import InputField from "@kiwicom/orbit-components/lib/InputField";
import Button from "@kiwicom/orbit-components/lib/Button";
import Stack from "@kiwicom/orbit-components/lib/Stack";

const SimpleForm: React.FC = () => {
  const [email, setEmail] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Submitted email:", email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Stack spacing="medium">
        <InputField
          label="Email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <Button submit>Subscribe</Button>
      </Stack>
    </form>
  );
};

export default SimpleForm;

Harnessing the Power of Tailwind CSS

Orbit Components leverages Tailwind CSS for styling, providing a powerful and flexible design system. To use Tailwind with Orbit, you’ll need to install and configure it in your project. Orbit provides a preset configuration through the @kiwicom/orbit-tailwind-preset package.

Here’s how you can set up Tailwind CSS with Orbit:

  1. Install the necessary packages:
npm install tailwindcss @kiwicom/orbit-tailwind-preset
  1. Create a tailwind.config.js file in your project root and add the Orbit preset:
module.exports = {
  presets: [require("@kiwicom/orbit-tailwind-preset")],
  // Add any custom configurations here
};
  1. Include Tailwind in your CSS:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

With this setup, you can now use Tailwind classes alongside Orbit components, giving you even more flexibility in styling your application.

Conclusion

Orbit Components offers a robust solution for developers looking to build consistent, accessible, and visually appealing React applications. With its comprehensive set of components, Tailwind CSS integration, and TypeScript support, it streamlines the development process while maintaining high standards of design and functionality.

Whether you’re building a simple website or a complex web application, Orbit Components provides the tools you need to create outstanding user interfaces. By leveraging this library, you can focus on crafting unique user experiences while relying on Orbit’s solid foundation of pre-built components and design principles.

As you continue to explore Orbit Components, you’ll discover even more ways to enhance your React development workflow. Happy coding!

Comments