DOM Studio

Getting started

Install

Tailwind CSS v4

Start in one line, then move the theme into your app when you want full control.

1. Install the package

DOM Studio requires Vue 3 and Tailwind CSS v4. Install it with your normal package manager, then import only the components you use.

sh
npm install @getdom/studio
js
import { DomButton, DomCard } from '@getdom/studio';

2. Quick start

Best for trying DOM Studio

This single import includes Tailwind, DOM Studio's component styles, and its default light and dark themes.

js
import '@getdom/studio/style.css';

3. Recommended: own your theme

Put these imports and theme values in your app's main stylesheet. DOM Studio supplies the Tailwind source and semantic utility names; your project owns the actual colours and radius.

css
/* src/app.css */
@import "tailwindcss";
@import "@getdom/studio/tailwind.css";

:root,
[data-theme="light"] {
	color-scheme: light;
	--radius: 0.625rem;
	--shadow-xs: 0 1px 1px rgb(15 23 42 / 0.04);
	--shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
	--shadow-md: 0 3px 8px -2px rgb(15 23 42 / 0.12);
	--shadow-lg: 0 8px 20px -6px rgb(15 23 42 / 0.16);
	--shadow-xl: 0 18px 44px -18px rgb(15 23 42 / 0.24);
	--shadow-2xl: 0 24px 60px -18px rgb(15 23 42 / 0.24);
	--canvas: #fff;
	--canvas-fg: oklch(0.145 0 0);
	--primary: oklch(0.205 0 0);
	--primary-fg: oklch(0.985 0 0);
	--secondary: oklch(0.97 0 0);
	--secondary-fg: oklch(0.205 0 0);
	--muted: oklch(0.97 0 0);
	--muted-fg: oklch(0.5 0 0);
	--accent: oklch(0.97 0 0);
	--accent-fg: oklch(0.205 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--destructive-fg: oklch(0.985 0 0);
	--success: oklch(0.57 0.194 149.35);
	--success-fg: oklch(0.985 0 0);
	--warning: oklch(0.7 0.2 84);
	--warning-fg: oklch(0.28 0.07 46);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);
}

Add a dark theme only if your app needs one. These defaults are a starting point, not a required visual identity.

css
[data-theme="dark"] {
	color-scheme: dark;
	--shadow-xs: 0 1px 1px rgb(0 0 0 / 0.28);
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.34);
	--shadow-md: 0 8px 18px -10px rgb(0 0 0 / 0.52);
	--shadow-lg: 0 16px 34px -18px rgb(0 0 0 / 0.58);
	--shadow-xl: 0 24px 52px -24px rgb(0 0 0 / 0.68);
	--shadow-2xl: 0 34px 76px -30px rgb(0 0 0 / 0.72);
	--canvas: oklch(0.145 0 0);
	--canvas-fg: oklch(0.985 0 0);
	--primary: oklch(0.922 0 0);
	--primary-fg: oklch(0.205 0 0);
	--secondary: oklch(0.269 0 0);
	--secondary-fg: oklch(0.985 0 0);
	--muted: oklch(0.269 0 0);
	--muted-fg: oklch(0.708 0 0);
	--accent: oklch(0.269 0 0);
	--accent-fg: oklch(0.985 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--destructive-fg: oklch(0.985 0 0);
	--success: oklch(0.696 0.17 162.48);
	--success-fg: oklch(0.145 0 0);
	--warning: oklch(0.769 0.188 70.08);
	--warning-fg: oklch(0.145 0 0);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(1 0 0 / 15%);
	--ring: oklch(0.556 0 0);
}

Optional headless components

Register the framework-neutral dom-* custom elements once in your app entry point.

js
import '@getdom/studio/headless';

Which stylesheet should I use?

style.css

Complete quick start. Tailwind and the default theme are included.

tailwind.css

Recommended. Compiles the components against your app-owned theme.

theme.css

Copyable DOM Studio defaults when you want a fuller starting point.