ContentStudio Design System

Vue component library and theme tooling for ContentStudio.

Local Development

pnpm install
pnpm build:watch
pnpm dev:docs

Package Usage

Import the compiled component styles and the components you need:

import '@contentstudio/ui/dist/style.css'
import { Button } from '@contentstudio/ui'

Tailwind v4 Consumer Setup

For consumer-generated CSTU utilities like bg-cstu-primary-500, import the package theme adapter in your app CSS:

@import "tailwindcss";
@import "@contentstudio/ui/theme.css";

This is the primary integration path for Tailwind v4 consumers.

Runtime Theme Updates

The compiled component CSS already includes the default runtime variables. To override them dynamically:

import { generatePalette, applyTheme } from '@contentstudio/ui'

const palette = generatePalette({ primary: '#ff0066' })
applyTheme(palette)

If you are using SSR, generate and inline the variables during rendering to avoid FOUC.

Tailwind integration is CSS-first in v4. Consumer apps should use @contentstudio/ui/theme.css, not a JS Tailwind config adapter.