Vesture
Get started

Getting started

Introduction

Vesture is a React component library where every visual value — color, spacing, radius, shadow, type, motion — comes from a single token contract defined in @vesture/tokens. Components never hardcode a color or a pixel value; they read vars.* instead. Apply a different theme class to the page and the entire library restyles itself, with zero changes to component code.

Install

Install the component package and a theme. @vesture/tokens ships a neutral default theme; @vesture/theme-retro is a second, visually distinct theme built on the exact same contract.

terminal
npm install @vesture/react @vesture/tokens

Import the stylesheets

Each package ships CSS you import once, high up in your app.

app/globals.css
@import "@vesture/tokens/styles.css";
@import "@vesture/react/styles.css";

Apply a theme

Put the theme class on <html> (or another true ancestor of <body>) — not an inner wrapper <div>. Several components (Modal, Tooltip, Popover, DropdownMenu) render through a React portal directly into document.body, and CSS custom properties only cascade down the DOM tree they're declared on. A theme class on a wrapper div would never reach a portaled node.

app/layout.tsx
import { defaultThemeClass } from "@vesture/tokens";

export default function RootLayout({ children }) {
  return (
    <html className={defaultThemeClass}>
      <body>{children}</body>
    </html>
  );
}

Render a component

app/page.tsx
import { Button, Card, Stack } from "@vesture/react";

export default function Page() {
  return (
    <Card elevation="raised" style={{ padding: 24 }}>
      <Stack gap="sm">
        <h2>Welcome back</h2>
        <Button onClick={() => alert("Hi!")}>Get started</Button>
      </Stack>
    </Card>
  );
}

Next steps