vivatura Design System

Shared design system stack:

• Fractal for component documentation and previews
• Tailwind CSS for styling
• Vite for asset builds

Local Development

1. Install dependencies: npm ci
2. Start dev mode: npm run dev

npm run dev starts both processes:

• vite build --watch for CSS/assets in dist/assets
• fractal start --sync for the Fractal UI

Note: The Fractal preview wrapper loads the built CSS via ../style.css. Static files like SVGs can be added to src/assets and are served by Fractal at /assets/* (for example ../assets/logo.svg). The Tailwind source styles live in src/assets/css.

Build

• npm run build builds Vite assets first, then static Fractal docs.
• Static Fractal output is written to dist/docs.

Consumer Integration

• Preferred CSS import path: @import "@vivatura/design-system/style.css";
• Legacy path @import "@vivatura/design-system/dist/assets/style.css"; still works but is not recommended.

Components

• button: Primary and secondary button variants.
• navbar: Mobile navigation bar based on the Vivatura shop design.

Releases

• fractal.config.js reads project.version from package.json.
• Bump + tag with one command:
  • npm run release:patch
  • npm run release:minor
  • npm run release:major