Design kit: VOL UI

A design kit built for knowledge interfaces

VOL UI is the token set and component library behind every VOL screen. Use it to make your embeds and internal tools feel native next to the map.

Get started Read the docs

App.tsx

import "@vol/ui/styles.css";
import { Button, Card } from "@vol/ui";

export function Panel() {
  return <Card className="p-6"><Button chevron>Explore the map</Button></Card>;
}

Highlights

Why teams love Design kit

Design tokens

Colors, radii, shadows and type scales shipped as CSS variables.

React components

Buttons, cards, inputs and badges, accessible by default.

Tailwind ready

Works with Tailwind CSS v4 through a single stylesheet import.

Get started

Up and running in minutes

01Install @vol/ui
02Import the stylesheet
03Compose your interface

Explore more

Smarter, simpler exploration

Get started Talk to sales

Product of the day1st
Product of the week1st
Product of the month1st