For developers

Introduction ​

Let's explore the design system used at Semrush, which you can also integrate into your own projects. The design system has more than 70 React components, each of them accompanied by design guides, Figma components, usage examples and API descriptions. Additionally, we offer an extensive icons library and charts library.

Installation ​

All components are bundled together in a single package, making the installation process straightforward. For example:

pnpm add intergalactic

pnpm add intergalactic

npm install intergalactic

npm install intergalactic

After the installation, you can access each component at intergalactic/{component_name}.

Key features ​

We have developed this design system with a strong focus on flexibility and ease of use, resulting in several notable features described below:

Free template ​

Components often consist of complex HTML structures. To enhance flexibility, we provide a free template, allowing you to customize the internals of the components from the design system. Here's an example using the Button component:

import Button from 'intergalactic/button';

<Button>
  <Button.Addon>
    <Icon />
  </Button.Addon>
  <Button.Text>Button with icons</Button.Text>
  <Button.Addon>Whatever you want</Button.Addon>
</Button>;

import Button from 'intergalactic/button';

<Button>
  <Button.Addon>
    <Icon />
  </Button.Addon>
  <Button.Text>Button with icons</Button.Text>
  <Button.Addon>Whatever you want</Button.Addon>
</Button>;

This approach provides multiple benefits:

• The renderer is not constrained by our API.
• The API remains clean and consistent.
• You gain access to each part of the component.

Theme ​

You have the ability to change the default styles for your project. We offer design tokens that can be adjusted on a per-component basis or applied globally throughout the project. Additionally, we provide a mechanism for changing styles, enabling complete design customization and the extension of components with new properties.

Controlled & uncontrolled ​

Our components are designed to be controlled externally, meaning they do not have an internal state. This grants you complete control over the state and its changes. Each property that can be modified comes with a corresponding handler. For instance, visible is a property that you can set for a component, while onVisibleChange is the handler to which you subscribe and which is called when visible receives a new value.

If you choose not to set these properties, the component will operate in an uncontrolled mode. Furthermore, all properties that can be changed have an initial state located in the default + { Property name } property, which can be modified by assigning a different value. For example, if a tooltip has a visible property that is closed by default, you can set the defaultVisible={true} value to have it initially open.

Handlers ​

Consistency is crucial for a library as it ensures predictability. In our library, all event handlers follow the same format:

(value, event) => void | boolean

(value, event) => void | boolean

• The first argument is the value that results from the handler response.
• The second argument is the event that triggers this handler.

These handlers are especially convenient when using React hooks, as you no longer need to create custom handlers and extract values from the event. Instead, you can directly assign a function from the hook to the handler, as shown in this example using the Input component:

import React from 'react';
import Input from 'intergalactic/input';

export default () => {
  const [value, setValue] = React.useState('');

  return (
    <Input>
      <Input.Value value={value} onChange={setValue} />
    </Input>
  );
};

import React from 'react';
import Input from 'intergalactic/input';

export default () => {
  const [value, setValue] = React.useState('');

  return (
    <Input>
      <Input.Value value={value} onChange={setValue} />
    </Input>
  );
};

Merge props ​

For convenience, all properties are merged logically. Classname concatenations, styles merging, callback queues, and refs forking are all handled appropriately. Other properties are simply overwritten, eliminating the concern of accidentally breaking the component by setting props.

Refs ​

All our components return a DOM node in the ref property. This decision was made for several reasons:

• You can always obtain a DOM node to integrate with other libraries.
• The API becomes less cluttered without the need for props like innerRef, rootRef, and others.
• Rendering the class instance is considered a bad practice, as it reveals the internal workings of our code.

Base component ​

Underlying all our components is "Box", which serves as a foundational building block. By importing Box from intergalactic/flex-box, you can leverage its capabilities, including:

import { Box } from 'intergalactic/flex-box';

import { Box } from 'intergalactic/flex-box';

Box allows you to:

• Directly setting indents such as margin or padding in JSX:

<Box mr={5} p={1} />

<Box mr={5} p={1} />

• Setting sizes directly in JSX:

<Box h={10} wMax="300px" />

<Box h={10} wMax="300px" />

• Assigning a tag to a component. The tag can be a string or another component:

<Box tag="ul" />
<Box tag={Component} />

<Box tag="ul" />
<Box tag={Component} />

Box serves as the foundation for other components, making its features available throughout the entire library. For example:

import Button from 'intergalactic/button';

<Button tag="a" mb={2} w="200px">
  Still Box 🙀
</Button>;

import Button from 'intergalactic/button';

<Button tag="a" mb={2} w="200px">
  Still Box 🙀
</Button>;

Additionally, consider exploring the "Flex" component, which is a wrapper for Box and allows you to apply properties for CSS Flexbox:

import { Flex } from 'intergalactic/flex-box';

<Flex justifyContent="center" alignItems="center" />;

import { Flex } from 'intergalactic/flex-box';

<Flex justifyContent="center" alignItems="center" />;

Browser support ​

To ensure the best performance and user experience, we do not support legacy browsers. Our design system is optimized for the following browser versions: