A modern Design System built with Lit, Tailwind CSS, and Storybook. This project uses Vite for fast builds and supports component-based development using Web Components.
├── src
│ ├── components
│ │ ├── button
│ │ ├── headline
│ │ └── image
│ ├── layout
│ │ └── container
│ ├── css
│ │ ├── config
│ │ └── main.css
│ ├── index.ts
│ └── vite-env.d.ts
pnpm installpnpm run devpnpm run storybookpnpm run buildpnpm run build-storybook- Lit – Simple and fast Web Components.
- Tailwind CSS v4 – Utility-first CSS framework.
- Storybook – UI component explorer.
- Vite – Lightning fast build tool.
- vite-plugin-lit-css – Enables CSS imports in Lit components.
<ds-headline level="h2" size="large">
Hello World
</ds-headline>Supports dynamic heading levels and sizes using Tailwind classes.
<ds-button variant="primary">Click Me</ds-button>
<ds-button variant="secondary">Cancel</ds-button>Variants styled using Tailwind classes and customizable via props.
CSS is organized under src/css/:
main.css: Core utilities and Tailwind layer.config/colors.css: Custom color definitions.
Storybook stories are colocated with components (*.stories.ts). You can run visual regression tests and publish stories with Chromatic.
You can import your CSS using aliases like:
import style from '@css/main.css';Make sure your
vite.config.tsdefines the correct path aliases.
- Each component exports from an
index.tsfile. - Web components are defined using
@customElement. - Shared styles are managed using
unsafeCSS.
| Script | Description |
|---|---|
pnpm run dev |
Start Vite dev server |
pnpm run build |
Build project with TypeScript |
pnpm run preview |
Preview built app with Vite |
pnpm run storybook |
Start Storybook in dev mode |
pnpm run build-storybook |
Build static Storybook site |
MIT — Feel free to use and adapt.
Benedikt Grether
📧 info@benediktgrether.de
🌐 benediktgrether.de