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

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>

Complete application controls

The difficult screens are already working.

DOM Studio goes beyond buttons and cards. These controls handle dense data, ordering, scheduling, files, keyboard interaction, and server-shaped state while your application keeps ownership of the records.

DataGrid ->Typed filters, multi-sort, selection, virtual rows, custom cells, pagination, and remote query state.Kanban ->Controlled rows and columns, keyboard movement, drag ordering, async creation, and custom cards.Media browser ->Folder navigation, uploads, selection, file details, grid and list modes, and application-owned storage.Calendar ->Container-responsive month planning, date windows, custom day content, and drag-to-reschedule workflows.

Live product workspace

Switch views, move work, or open the media picker. These are the real components.

Explore data components

Open the picker to browse folders, change view, select a file, and return its application-owned media id.

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

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 difficult screens are already working.

The library covers the product surfaces teams actually ship.

A homepage should prove the kit works.

Start anywhere, then keep going.