Signoz Components Library

React component library powered by Turborepo, React, and Storybook.

Install & Use

To use the Signoz components library, you need to install the following packages:

pnpm add @signozhq/design-tokens @signozhq/ui

In your app’s main CSS file (e.g. index.css or global.css), import the following css:

@import "@signozhq/design-tokens/dist/style.css";
@import '@signozhq/design-tokens/dist/themes/signoz-tokens.css';

Then you need to add the data attribute in your element body or html to select the theme:

<html lang="en" data-theme="default">

If you want to toggle/change between themes, you just need to update the value of the attribute data-theme.

tip: Take a look at ./apps/docs/blue-demo.css to learn how to create a new theme.

How to use with Tailwind

In case you want to have our design tokens exposed directly to Tailwind, you can install the following package:

pnpm add @signozhq/tailwind-config

And then import the following css:

@import 'tailwindcss';
@config "@signozhq/tailwind-config";
@import '@signozhq/tailwind-config/global.css';

Storybook

To learn more about the available components, take a look at: https://periscope.signoz.io/

Available Packages

Package	Description
@signozhq/tailwind-config	Tailwind config, design tokens, and global.css (required first)
@signozhq/ui	All UI components (single package with subpath exports)

All components live in @signozhq/ui. Import from the barrel or from the component's own subpath — both are published, and both tree-shake:

import { Badge } from '@signozhq/ui';         // barrel
import { Badge } from '@signozhq/ui/badge';   // subpath

The full set:

import { AlertDialog } from '@signozhq/ui';
import { AlertStrip } from '@signozhq/ui';
import { Avatar } from '@signozhq/ui';
import { Badge } from '@signozhq/ui';
import { Breadcrumb } from '@signozhq/ui';
import { Button } from '@signozhq/ui';
import { ButtonGroup } from '@signozhq/ui';
import { Calendar } from '@signozhq/ui';
import { Callout } from '@signozhq/ui';
import { Checkbox } from '@signozhq/ui';
import { Combobox } from '@signozhq/ui';
import { Command } from '@signozhq/ui';
import { DatePicker } from '@signozhq/ui';
import { Dialog } from '@signozhq/ui';
import { Divider } from '@signozhq/ui';
import { Drawer } from '@signozhq/ui';
import { Dropdown } from '@signozhq/ui';
import { Input } from '@signozhq/ui';
import { Kbd } from '@signozhq/ui';
import { Pagination } from '@signozhq/ui';
import { Progress } from '@signozhq/ui';
import { PinList } from '@signozhq/ui';
import { Pill } from '@signozhq/ui';
import { Popover } from '@signozhq/ui';
import { RadioCards } from '@signozhq/ui';
import { RadioGroup } from '@signozhq/ui';
import { Resizable } from '@signozhq/ui';
import { Select } from '@signozhq/ui';
import { Skeleton } from '@signozhq/ui';
import { Slider } from '@signozhq/ui';
import { Spinner } from '@signozhq/ui';
import { Switch } from '@signozhq/ui';
import { Table } from '@signozhq/ui';
import { Tabs } from '@signozhq/ui';
import { TextEllipsis } from '@signozhq/ui';
import { Toaster } from '@signozhq/ui';
import { ToggleGroup } from '@signozhq/ui';
import { Tooltip } from '@signozhq/ui';
import { Typography } from '@signozhq/ui';

@signozhq/ui/testing holds helpers for stories and tests, and is not in the barrel. ForceOpenProvider holds open the popup of every Select, Combobox, Dropdown and Tooltip under it, which none of them takes as a prop:

import { ForceOpenProvider } from '@signozhq/ui/testing';

render(<Select aria-label="Framework" placeholder="Pick one" items={items} />, {
	wrapper: ForceOpenProvider,
});

PersistToastsProvider keeps every toast of a Toaster under it on screen: no timer closes one, the stack shows them all whatever the limit, and it stays spread. A story of a page shows the toasts the page raises without mocking toast:

import { PersistToastsProvider } from '@signozhq/ui/testing';

<PersistToastsProvider>
	<Page />
	<Toaster />
</PersistToastsProvider>;

Contributing

Start with CONTRIBUTING.md: setup, commands, and how to add a component.

Doc	Read it for
CONTRIBUTING.md	Setup, commands, adding a component
COMPONENT_GUIDELINES.md	The standard every component is held to
BUILD.md	Why the packaging, build and CSS work this way
COMPONENT_AUDIT_RUBRIC.md	Scoring an existing component
VISUAL_TESTING.md	Chromatic and the run-visual-testing label
RELEASE.md	How a version ships, and how to cut a hotfix