# Tenet UI (tenet-ui) > Documentation for tenet-ui, a React design system. Components import from `tenet-ui`, icons from `tenet-ui/icons`, and every app must import `tenet-ui/styles.css` once; theming is `data-color-mode="light|dark"` on . Component pages carry the usage guidelines, the type-derived props table (deprecated props name their replacement) and the story list; the Tokens page lists every CSS variable with light/dark values. - Prefer semantic tokens (`--fgColor-*`, `--bgColor-*`, `--borderColor-*`, `--space-*`) over raw values; the `base-*` palette is not for direct use. - Use the component for the job (Button, IconButton, Heading, Text, Table…) instead of raw HTML elements. - The deprecations registry on the Changelog page is the migration source between versions. ## Documentation Sets - [Abridged documentation](https://tenet-ui.pages.dev/llms-small.txt): a compact version of the documentation for Tenet UI (tenet-ui), with non-essential content removed - [Complete documentation](https://tenet-ui.pages.dev/llms-full.txt): the full documentation for Tenet UI (tenet-ui) - [Components](https://tenet-ui.pages.dev/_llms-txt/components.txt): One page per component: guidelines, props, examples. - [Foundations & patterns](https://tenet-ui.pages.dev/_llms-txt/foundations--patterns.txt): System-level guidance. ## Notes - The complete documentation includes all content from the official documentation - The content is automatically generated from the same source as the official documentation ## Optional - [Storybook (full story matrix)](https://tenet-ui.pages.dev/storybook) - [GitHub repository](https://github.com/apurvkhare/tenet-ui)