The Tale design system
Build application screens with @tale/ui and public websites with @tale/marketing-ui. Use the guides and live examples to choose and connect the components.
20 guides · @tale/ui and @tale/marketing-ui · MIT licensed
Components in a sample workspace
This illustration uses the shipped components and follows your selected theme. Try the interactive examples in the guides.
Where to go next
Choose a guide for setup, a design decision, or the screen you are building.
Getting startedInstall the packages, learn how they relate, and set up theming and translations.4 guidesFoundationsThe tokens underneath every component — colour, type, spacing, icons, accessibility.5 guidesComponentsChoose component states and connect their props, callbacks, and accessible names.8 guidesPatternsCompose collection and settings screens, including search, drafts, and save behavior.2 guidesMarketing UIThe site chrome, the marketing primitives and the demo frames that build tale.dev.1 guide
Install it in your own repository
The packages ship TypeScript source. Try a snapshot branch, then pin a release tag and commit the lockfile for a reproducible installation.
package.json
{
"dependencies": {
"@tale/ui": "github:tale-project/tale#dist/ui",
"react": "19.2.5",
"react-dom": "19.2.5",
"tailwindcss": "4.2.2"
}
}Start with the introduction
It explains the two languages, how the packages relate, and what belongs in a service instead.