@revenexx/studio

The revenexx design system as a ready-to-import Vue 3 component library. ~60 accessible, unstyled-to-branded components (shadcn-vue / reka-ui under the hood) plus the revenexx tokens, brand font and Tailwind v4 theme — drop them into any Vite, Nuxt or Vue app and ship on-brand UI in minutes.

Why

• 🎨 Branded out of the box. Import one CSS line for the tokens and every component renders in the revenexx look — colours, radii, the Flink Neue Condensed brand font — with a full light and dark scale.
• 🧩 ~60 components, one import path. Buttons, dialogs, data tables, charts, calendars, command palettes, sidebars, forms… all tree-shakeable named exports from @revenexx/studio.
• ♿ Accessible by default. Built on reka-ui (headless, WAI-ARIA) — focus management, keyboard nav and screen-reader semantics come for free.
• ⚡ Tailwind v4 native. Ships an @theme inline token layer; no config file required. Still on a JS/TS Tailwind config? A preset is included.
• 🪶 Vue-first, framework-light. One peer dependency (vue ^3.5). ESM + types. Works in Vite, Nuxt (SPA or SSR) and plain Vue.
• 🔁 The same system the cockpit runs. These are the exact primitives behind the revenexx Cockpit — battle-tested, not a toy kit.

Contents

• Installation
• Quick start
• Tailwind v4 setup
• Using components
• Nuxt
• Theming & dark mode
• Package exports
• Components
• Tailwind JS/TS config (preset)
• TypeScript
• Troubleshooting

Installation

pnpm add @revenexx/studio    # or npm i / yarn add

Published to the public npm registry — no scope registry, no token, no .npmrc needed. Peer dependency: Vue 3.5+. Your app must use Tailwind CSS v4.

Quick start

1 — Wire up the styles (once, in your app's main CSS entry):

@import "tailwindcss";
@import "@revenexx/studio/tokens";   /* colours, radii, dark scale */
@import "@revenexx/studio/fonts";    /* Flink Neue Condensed brand font */

/* Let Tailwind v4 scan the shipped component classes */
@source "../node_modules/@revenexx/studio/dist";

2 — Use a component:

<script setup lang="ts">
import { Button, Card, CardHeader, CardTitle, CardContent } from '@revenexx/studio'
</script>

<template>
  <Card>
    <CardHeader><CardTitle>Revenue</CardTitle></CardHeader>
    <CardContent>
      <Button>Get started</Button>
    </CardContent>
  </Card>
</template>

That's it — the component is fully branded.

Tailwind v4 setup

Studio ships its theme as a Tailwind v4 token layer, so there's no JS config to maintain. Three pieces:

| Import | What it does | |---|---| | @import "@revenexx/studio/tokens"; | Registers the semantic colours (--primary, --card, …), radii and the @theme inline mapping, for both :root and .dark. Required. | | @import "@revenexx/studio/fonts"; | @font-face for Flink Neue Condensed + the --font-sans binding. Optional — drop it to use your own font. | | @source "…/@revenexx/studio/dist"; | Tells Tailwind's JIT to scan the component classes so they're generated in your build. Required, or components render unstyled. |

⚠️ The @source path is relative to your CSS file. Count the ../ needed to reach node_modules from where your main CSS lives. Forgetting this is the #1 "why are my components unstyled" cause.

Prefer the whole compiled sheet instead of scanning? Import @revenexx/studio/theme (the full studio.css) — larger, but zero @source wiring.

Using components

Every component is a named export — import only what you use and the bundler tree-shakes the rest:

import {
  Button,
  Dialog, DialogTrigger, DialogContent,
  Table, TableHeader, TableRow, TableCell,
  Select, SelectTrigger, SelectContent, SelectItem,
  cn,                       // the class-merge helper (clsx + tailwind-merge)
} from '@revenexx/studio'

cn(...) is exported for building your own variant-aware class strings, same as in shadcn-vue.

Nuxt

Works in Nuxt 3/4 (SPA or SSR). Add the CSS in your global stylesheet and import components directly — no module required:

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],   // contains the @import lines above
  vite: { plugins: [/* @tailwindcss/vite */] },
})

<script setup lang="ts">
import { Button } from '@revenexx/studio'
</script>

Auto-import: if you'd rather not import per-file, register a thin Nuxt layer/plugin that re-exports the components you use — but explicit imports keep bundles lean.

Theming & dark mode

Tokens are plain CSS variables with a :root (light) and .dark scale. Toggle the theme by putting dark on a parent (usually <html>):

document.documentElement.classList.toggle('dark')

Override any token in your own CSS — studio reads the variables at runtime, so this restyles every component at once:

:root { --primary: oklch(0.55 0.24 265); --radius: 0.5rem; }

Package exports

| Specifier | Contents | |---|---| | @revenexx/studio | All components + cn (ESM + .d.ts) | | @revenexx/studio/tokens | tokens.css — colours/radii/dark scale (@theme inline) | | @revenexx/studio/fonts | fonts.css — Flink Neue Condensed @font-face + woff2 | | @revenexx/studio/theme | studio.css — the full precompiled stylesheet | | @revenexx/studio/tailwind-preset | Preset for JS/TS Tailwind configs (see below) |

Components

Includes (shadcn-vue naming): accordion · alert · alert-dialog · aspect-ratio · avatar · badge · breadcrumb · button · button-group · calendar · card · carousel · chart · checkbox · collapsible · combobox · command · context-menu · dialog · drawer · dropdown-menu · empty · field · form · hover-card · input · input-group · input-otp · item · kbd · label · menubar · native-select · navigation-menu · number-field · pagination · pin-input · popover · progress · radio-group · range-calendar · resizable · scroll-area · select · separator · sheet · sidebar · skeleton · slider · sonner (toast) · spinner · stepper · switch · table · tabs · tags-input · textarea · toggle · toggle-group · tooltip.

Each family exports its sub-parts (Card, CardHeader, CardTitle, CardContent, …), matching the shadcn-vue API.

Tailwind JS/TS config (preset)

On Tailwind v4 the token layer is all you need. If you're still on a JS/TS config (or want the semantic colour aliases there), add the preset:

// tailwind.config.ts
import studioPreset from '@revenexx/studio/tailwind-preset'

export default {
  presets: [studioPreset],
}

TypeScript

Fully typed — component props and the cn helper ship .d.ts. No @types package needed. Requires a moduleResolution of bundler / node16 / nodenext so the exports map resolves.

Troubleshooting

| Symptom | Fix | |---|---| | Components render unstyled | The @source "…/@revenexx/studio/dist" path doesn't reach node_modules from your CSS file — fix the ../ depth. Or import @revenexx/studio/theme instead. | | Wrong / missing font | You didn't @import "@revenexx/studio/fonts";, or your own --font-sans overrides it later in the cascade. | | Colours look off / no dark mode | @revenexx/studio/tokens isn't imported, or nothing toggles the .dark class on an ancestor. | | Cannot find module '@revenexx/studio' types | Set moduleResolution to bundler (or nodenext) in tsconfig.json. | | Tailwind v3 project | Not supported — studio targets Tailwind v4. |