React component library powered by Turborepo, React, and Storybook.
To use the Signoz components library, you need to install the following packages:
pnpm add @signozhq/design-tokens @signozhq/uiIn 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.
In case you want to have our design tokens exposed directly to Tailwind, you can install the following package:
pnpm add @signozhq/tailwind-configAnd then import the following css:
@import 'tailwindcss';
@config "@signozhq/tailwind-config";
@import '@signozhq/tailwind-config/global.css';To learn more about the available components, take a look at: https://periscope.signoz.io/
| 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 by subpath:
import { AlertDialog } from '@signozhq/ui';
import { AnnouncementBanner } from '@signozhq/ui';
import { Badge } from '@signozhq/ui';
import { Button } 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 { Drawer } from '@signozhq/ui';
import { DropdownMenu } from '@signozhq/ui';
import { Input } from '@signozhq/ui';
import { Pagination } from '@signozhq/ui';
import { PinList } from '@signozhq/ui';
import { Popover } from '@signozhq/ui';
import { RadioGroup } from '@signozhq/ui';
import { ResizablePanelGroup } from '@signozhq/ui';
import { Switch } from '@signozhq/ui';
import { Table } from '@signozhq/ui';
import { Tabs } from '@signozhq/ui';
import { Toaster } from '@signozhq/ui';
import { Toggle } from '@signozhq/ui';
import { ToggleGroup } from '@signozhq/ui';
import { Tooltip } from '@signozhq/ui';See CONTRIBUTING.md for getting started, useful commands, and how to add a new component.