Skip to main content
Everything you need to make Velt’s collaboration UI (comments, sidebar, notifications, reactions, presence, and more) match your design: from changing a color to building a 100% custom UI.

UI Customization Plugin

Turn a Figma design into verified Velt UI customization (comments + notifications) in Cursor or Claude Code.

Storybook

Explore Velt components and primitives interactively: states, props, and layouts in a live playground.

Theme Playground

Visually customize Velt themes and copy the generated CSS variables.
This guide explains the customization model from first principles, then gives you a repeatable workflow for turning a design, such as a Figma file, into a working Velt implementation. It covers UI customization only. It does not cover auth, permissions, data providers, or self-hosting, except the one setup flag (shadowDom) that customization depends on.

​
The one idea to remember

Velt owns the behavior, data, and real-time sync. You own the presentation. Every customization approach in this guide is just a different amount of “you own the presentation”: from recolor it to rebuild it from scratch.

​
The four layers (in 10 seconds)

Ordered by how you should reach for them: CSS → Wireframes → Primitives → Headless: Default preference: wireframes for structural changes, and you can mix layers freely, even on the same surface. How it works teaches the model; Combining approaches covers mixing.

​
How to use this guide

Read in this order:
  1. How it works: the mental model. (5 min)
  2. Decision tree: pick the right approach for your design.
  3. Setup: prerequisites, the shadowDom rule, and where to put your code.
  4. The approach you picked: open its page under Approaches in the sidebar.
  5. The feature you’re customizing: comments run through the approach guides; every other feature area under Components opens with an overview page (Customize by feature is the index). A piece not showing? It may be off by default.
  6. Reference: look up exact names (variables, classes, slots, props, hooks) while you build. If a name isn’t there, it doesn’t exist: don’t guess.
Design already in Figma? You can skip the manual workflow: the UI Customization Plugin runs this whole loop (pick approach → build → verify) for you.