DOM StudioOwn, edit, and ship

Build real app UI from primitives that already know the hard parts.

A complete Vue and Web Component UI system you can own, edit, and ship. Headless web components, polished Vue wrappers, app blocks, form schemas, mobile shells, Studio metadata, and LLM-ready docs work together in one editable library.

Browse the library See blocks

Studio workspace / launch-flow.vue

Revenue operations

A block-level dashboard built from the same primitives.

Primitives

48+

documented, linked, inspectable

UI layers

3

headless, Vue, blocks

Agent context

llms.txt

source-aware generation

Interaction stack

Menu, popover, tabs, toast, and links are active here.

wired

Dialog docs

Component mix

DomTreeView

DomTabs

DomPopover

DomToastStack

Schema-ready form controls

Component stack

headlessformsblocks

Primary primitive

Release date

Theme controls

Density

Radius

12px

Enable motion

Layer tree

Launch workflow

Toolbar

Invite dialog

Schema form

Toast feedback

Component stack

Combobox

Calendar

Popover

Tabs

editable usage

import { DomDialog, DomForm } from '@getdom/studio/vue';import '@getdom/studio/headless';import '@getdom/studio/style.css'; <DomDialog title="Invite teammate">	<DomForm :schema="inviteSchema" /></DomDialog>

More than a component shelf

The library covers the product surfaces teams actually ship.

Open playground

Application components

Menus, drawers, dialogs, command palettes, splitters, trees, tabs, toasts, and popovers for product surfaces.

Command paletteTree viewSplitter panelContext menuToastDialog

Form system

Fields, schema adapters, date pickers, class editors, tag inputs, validation, and generated form layouts.

FormFieldDate pickerTag comboboxJSON inputRange input

Headless elements

Framework-neutral custom elements for teams that want behavior, ARIA, and focus management without style lock-in.

DropdownPopoverDialogTabsTooltipCombobox

Blocks and mobile

Production-shaped dashboards, chat, mail, login, mobile shells, safe areas, action sheets, and app navigation.

DashboardChatMailLoginApp shellBottom nav

Try the pieces together

A homepage should prove the kit works.

This page is using the actual primitives: command palette, toast stack, dropdown, popover, tabs, tree view, combobox, tag combobox, radio group, range input, toggle, date picker, tooltip, and accordion.

AI builder guide

Answers without leaving the page

The same component contracts feed docs, Vue props, web components, inspector metadata, and LLM-facing guidance.

Yes. The headless layer registers framework-neutral custom elements for core interactions.

No. DOM Studio includes blocks for dashboard, chat, mail, forms, login, application layouts, and mobile shells.

Source path

import { DomDialog, DomForm } from '@getdom/studio/vue';import '@getdom/studio/headless';import '@getdom/studio/style.css';

Installable source, examples, and metadata stay close enough for people and agents to edit confidently.

Build real app UI from primitives that already know the hard parts.

The library covers the product surfaces teams actually ship.

A homepage should prove the kit works.

Start anywhere, then keep going.