GistUI's design system: one plain-CSS stylesheet for every framework.

npm install @gistui/styles

import "@gistui/styles/styles.css";

• Everything is in @layer gistui, so your own CSS wins without !important.
• With Tailwind (and shadcn/ui), import this stylesheet before your Tailwind CSS. It sets the layer order theme, base, gistui, components, utilities: above Tailwind's reset, below its utilities, so utility classes passed through classNames still win.
• Customise with --gistui-* tokens on .gistui (or the tokens prop), the data-gistui-color, data-gistui-radius and data-gistui-density presets, and per-component hooks: data-gistui="Card", data-v, data-tone.

All packages

GistUI is one project in several packages, released together under one version.

| Package | What it is | |---|---| | @gistui/react | React renderer and default components | | @gistui/vue | Vue 3.5+ and Nuxt | | @gistui/svelte | Svelte 5 and SvelteKit | | @gistui/solid | Solid and SolidStart | | @gistui/vanilla | Vanilla JavaScript renderer, no framework | | @gistui/catalog | Component schemas, the system prompt and the agent skill | | @gistui/styles | One stylesheet for every framework | | @gistui/server | Stream reading, validation and repair on the server | | @gistui/chat | Headless chat store, model adapters, React chat layouts | | @gistui/core | The language: streaming parser, validator, autofix, prompt generator | | @gistui/headless | Shared internals: engine, themes, forms | | @gistui/widgets | Shared internals: charts, Markdown |

Licence

MIT