Skip to content

README.md

Latest commit

 

History

History
90 lines (67 loc) · 2.93 KB

README.md

File metadata and controls

90 lines (67 loc) · 2.93 KB

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 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';

Contributing

See CONTRIBUTING.md for getting started, useful commands, and how to add a new component.