zeekay
464e1eece0
A version written into a manifest is written into every manifest that wants it, which is how eslint came to exist in a hundred and four forms across this estate and how a package came to resolve twice at run time. The catalog moves the number out of the manifest: a manifest names the package, the workspace names the version. Four are held below their latest because the newer release cannot be used, and the reason is recorded rather than the version alone: @noble/hashes 2 renamed every subpath the web3 stack imports, @splinetool/runtime 2 depends on a package that was never published, @dynamic-labs 5.4.1 the same, and react-resizable-panels 3 points its types condition at the bundle.
3.4 KiB
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.
Theme layer
@signozhq/theme carries the [data-theme-color] accent overrides and the base
element defaults (global border colour, keyboard focus ring, page background):
pnpm add @signozhq/theme
@import "@signozhq/design-tokens/dist/style.css";
@import "@signozhq/design-tokens/dist/themes/signoz-tokens.css";
@import "@signozhq/theme";
Storybook
To learn more about the available components, take a look at: https://periscope.signoz.io/
Available Packages
| Package | Description |
|---|---|
@signozhq/theme |
Accent overrides and base element defaults (import 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 { Avatar } from '@signozhq/ui';
import { Badge } from '@signozhq/ui';
import { Breadcrumb } 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 { Divider } from '@signozhq/ui';
import { Drawer } from '@signozhq/ui';
import { DropdownMenu } from '@signozhq/ui';
import { Input } from '@signozhq/ui';
import { InputNumber } from '@signozhq/ui';
import { Kbd } from '@signozhq/ui';
import { Pagination } from '@signozhq/ui';
import { Progress } from '@signozhq/ui';
import { PinList } from '@signozhq/ui';
import { Popover } from '@signozhq/ui';
import { RadioGroup } from '@signozhq/ui';
import { ResizablePanelGroup } from '@signozhq/ui';
import { Select } from '@signozhq/ui';
import { Skeleton } from '@signozhq/ui';
import { Slider } 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 { Toggle } from '@signozhq/ui';
import { ToggleGroup } from '@signozhq/ui';
import { Tooltip } from '@signozhq/ui';
import { Typography } from '@signozhq/ui';
Contributing
See CONTRIBUTING.md for getting started, useful commands, and how to add a new component.