# Tatum Design System

> React component library and Tailwind plugin for Tatum's UI. Published on npm as `@tatumio/tatum-design-system` (MIT); install with `npm install @tatumio/tatum-design-system`. Requires React 19.

How to build with TDS — which component to use, semantic Tailwind tokens, setup — is in the TDS skill. Start there rather than inferring rules from the lists below.

## Usage

- [TDS skill](https://tatum-desing-system-ed3d1a.gitlab.io/skill/SKILL.md): workflow, component selection and self-checks
- [Component index](https://tatum-desing-system-ed3d1a.gitlab.io/skill/references/component-index.md): every component with its purpose, variants and composition notes
- [Tokens](https://tatum-desing-system-ed3d1a.gitlab.io/skill/references/tokens.md): semantic colours and `tatum-*` spacing, radius, typography and shadow classes
- [Design guidelines](https://github.com/tatumio/tatum-design-system-guidelines): layout and composition in the TDS look, with or without the React package
- Exact props and variants: the type declarations in the installed package, `node_modules/@tatumio/tatum-design-system/dist/types/components/<Name>/<Name>.d.ts`

## Components

- [AddressHandle](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-addresshandle--docs)
- [Alert](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-alert--docs)
- [Autosuggest](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-autosuggest--docs)
- [Badge](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-badge--docs)
- [Button](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-button--docs)
- [Card](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-card--docs)
- [Carousel](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-carousel--docs)
- [ChainIcon](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-chainicon--docs)
- [Checkbox](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-checkbox--docs)
- [CodeHighlight](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-codehighlight--docs)
- [Combobox](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-combobox--docs)
- [CommandLine](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-commandline--docs)
- [DatePicker](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-datepicker--docs)
- [DateRangePicker](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-daterangepicker--docs)
- [Dialog](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-dialog--docs)
- [Dropdown](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-dropdown--docs)
- [FeaturedIcon](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-featuredicon--docs)
- [FileIcon](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-fileicon--docs)
- [GradientBorder](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-gradientborder--docs)
- [Input](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-input--docs)
- [MultiSelect](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-multiselect--docs)
- [Pagination](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-pagination--docs)
- [PricingCard](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-pricingcard--docs)
- [ProgressBar](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-progressbar--docs)
- [ProgressCircle](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-progresscircle--docs)
- [RadioGroup](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-radiogroup--docs)
- [Skeleton loader](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-skeleton-loader--docs)
- [Slider](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-slider--docs)
- [SortableList](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-sortablelist--docs)
- [Switch](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-switch--docs)
- [Table](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-table--docs)
- [Tabs](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-tabs--docs)
- [TextArea](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-textarea--docs)
- [Toast](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-toast--docs)
- [Tooltip](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/docs/components-tooltip--docs)

## Foundations (Tailwind plugin)

- [Borders and Shadows](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/story/tailwind-plugin-borders-and-shadows--border-radius)
- [Colors](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/story/tailwind-plugin-colors--color-palette)
- [Transitions](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/story/tailwind-plugin-transitions--transition-properties)
- [Typography](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/story/tailwind-plugin-typography--sizes)
- [Z-Index](https://tatum-desing-system-ed3d1a.gitlab.io/?path=/story/tailwind-plugin-z-index--corner-stacked-squares)

## Optional

- [Storybook index](https://tatum-desing-system-ed3d1a.gitlab.io/index.json): every story, by `id`; open one at `https://tatum-desing-system-ed3d1a.gitlab.io/?path=/story/<id>`