DOM Studio

Getting started

Install the DOM Studio Vue Component Library

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. The npm package is the shortest path to a working component and the starting point for either installation route.

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

2. Quick npm trial

Best for trying DOM Studio

This single import includes Tailwind, DOM Studio's component styles, and its default light and dark themes. It is designed to get the first render working with minimum fuss.

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

3. Own the source

The copied component becomes yours

Copying the maintained source puts the components and their internal dependencies inside your application. You can edit, adapt, and maintain them like the rest of your codebase.

Run this after installing the package, then switch component imports to the local Vue entry point. Examples in the component documentation do this automatically when you choose Own the source.

sh
mkdir -p src/dom-studio
cp -R node_modules/@getdom/studio/src/. src/dom-studio/
js
import { DomButton, DomCard } from './dom-studio/pages/lib/vue/index.js';

4. Use your own stylesheet

Import Tailwind and DOM Studio's Tailwind integration once in your app stylesheet. Use the package path while consuming npm, or the local path after copying the source. Source-owned Vue examples intentionally contain no stylesheet import.

npm package

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

Owned source

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

5. Copy the theme into your stylesheet

Paste these semantic variables below the imports in your app stylesheet, then change them to match your product. The variables are the theme; DOM Studio supplies the component structure and the utilities that consume them.

Build the theme visually

Generate a starting point, tweak every token against live components, then copy the finished CSS into your stylesheet.

Open theme builder
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.