mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
Vinicius LourençoandGitHub
cd86872e1c
* refactor(storybook): add design tokens doc & improve menu organization * fix(turbo): generate components using new structure * refactor(sidebar): change from experimental to old components
81 lines
2.6 KiB
Plaintext
81 lines
2.6 KiB
Plaintext
import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
|
<Meta title="Intro" />
|
|
|
|
# Getting Started
|
|
|
|
React component library powered by Turborepo, React, and Storybook. This guide explains how to install and use the Signoz components in your app.
|
|
|
|
## Install & Use
|
|
|
|
Install the packages you need, use the following command:
|
|
|
|
```bash
|
|
pnpm add @signozhq/tailwind-config @signozhq/design-tokens @signozhq/ui
|
|
```
|
|
|
|
In your app's main CSS file (e.g. `index.css` or `global.css`), import Tailwind and the shared config, then the tailwind-config **global.css**. The order matters:
|
|
|
|
```scss
|
|
@import 'tailwindcss';
|
|
@config "@signozhq/tailwind-config";
|
|
@import '@signozhq/tailwind-config/global.css';
|
|
@import "@signozhq/design-tokens/dist/style.css";
|
|
@import '@signozhq/design-tokens/dist/themes/signoz-tokens.css';
|
|
@source "./node_modules/@signozhq/*";
|
|
```
|
|
|
|
> It's important to use `@source` with the path to the `node_modules/@signozhq/*` directory to ensure that the components using Tailwind classes are able to resolve the correct Tailwind config.
|
|
|
|
If you use Vite with the Tailwind plugin, you can also configure via vite.config:
|
|
|
|
```js
|
|
import tailwindConfig from '@signozhq/tailwind-config';
|
|
import tailwindcss from '@tailwindcss/vite';
|
|
|
|
export default {
|
|
plugins: [tailwindcss(tailwindConfig)],
|
|
};
|
|
```
|
|
|
|
Then add the data attribute on your `body` or `html` to select the theme:
|
|
|
|
```html
|
|
<html lang="en" data-theme="default">
|
|
```
|
|
|
|
To toggle or change themes, update the value of the `data-theme` attribute.
|
|
|
|
> **Tip:** See the Storybook app's `blue-demo.css` for an example of creating a new theme.
|
|
|
|
## Available Packages
|
|
|
|
All components live in `@signozhq/ui`. Import by subpath:
|
|
|
|
```ts
|
|
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 { 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 { Toaster } from '@signozhq/ui';
|
|
import { Switch } from '@signozhq/ui';
|
|
import { Table } from '@signozhq/ui';
|
|
import { Tabs } from '@signozhq/ui';
|
|
import { ToggleGroup } from '@signozhq/ui';
|
|
import { Tooltip } from '@signozhq/ui';
|
|
```
|
|
|
|
Use the sidebar to explore each component and the **Design System** section for tokens, colors, typography, and spacing.
|