# The Tale design system

> Documentation for @tale/ui and @tale/marketing-ui — the components, tokens and patterns every Tale interface is built from.

## Components

- [App shell](https://ui.tale.dev/docs/components/app-shell.md): Mount application providers once, then compose a page header, content area, and responsive navigation.
- [Button](https://ui.tale.dev/docs/components/button.md): Choose an action style, name icon controls, and handle loading or unavailable actions without losing context.
- [Data table](https://ui.tale.dev/docs/components/data-table.md): Connect rows, search, selection, loading, and paging to one consistent list surface.
- [Dialog](https://ui.tale.dev/docs/components/dialog.md): Open a labelled modal, manage confirmation state, and return focus to a useful place.
- [Input](https://ui.tale.dev/docs/components/input.md): Build labelled text fields with validation, read-only states, and appropriate password or secret handling.
- [Tabs and navigation](https://ui.tale.dev/docs/components/tabs-and-navigation.md): Choose local panels or route navigation, preserve drafts deliberately, and keep every destination reachable.
- [Toast](https://ui.tale.dev/docs/components/toast.md): Show brief completion feedback, avoid duplicate viewports, and keep essential information on the page.

## Foundations

- [Accessibility](https://ui.tale.dev/docs/foundations/accessibility.md): Combine the components with clear names, keyboard paths, readable contrast, and motion-aware behavior.
- [Colours](https://ui.tale.dev/docs/foundations/colors.md): Choose semantic surface, text, status, and chart colors that can adapt to light and dark themes.
- [Icons](https://ui.tale.dev/docs/foundations/icons.md): Use consistent Lucide glyphs, supply accessible names, and preserve usable pointer targets.
- [Spacing and layout](https://ui.tale.dev/docs/foundations/spacing-and-layout.md): Align controls, choose shared containers, and keep content usable when the available width changes.
- [Typography](https://ui.tale.dev/docs/foundations/typography.md): Choose text styles without confusing visual size with the page's semantic heading structure.

## Getting started

- [Internationalization](https://ui.tale.dev/docs/getting-started/i18n.md): Supply translated component labels, merge service catalogs, and keep locale behavior consistent.
- [Installation](https://ui.tale.dev/docs/getting-started/installation.md): Connect source imports, styles, translations, and providers to render your first Tale control.
- [Introduction](https://ui.tale.dev/docs/getting-started/introduction.md): Choose the Tale UI package for your screen and find a working example to build from.
- [Theming](https://ui.tale.dev/docs/getting-started/theming.md): Enable light and dark themes, choose semantic colors, and apply an optional host accent.

## Marketing UI

- [Marketing UI overview](https://ui.tale.dev/docs/marketing-ui/overview.md): Build public-facing page sections with host-owned copy, routing, and clearly labelled product illustrations.

## Patterns

- [List page](https://ui.tale.dev/docs/patterns/list-page.md): Build a collection screen with one create action, connected search, and honest loading and empty states.
- [Settings page](https://ui.tale.dev/docs/patterns/settings-page.md): Align configuration fields and connect Save, Discard, validation, and unsaved-change protection.

## Optional

- [Tale documentation](https://tale.dev/docs)
- [GitHub](https://github.com/tale-project/tale)