Design systems

revenexx maintains two design systems, each documented as its own living library. Use them so what you build looks and behaves like the rest of the platform — and so you inherit accessible, themeable components instead of rebuilding them.

• Studio Design System is for back-office and Cockpit-style interfaces. Reach for it when you're building an App's admin UI or any operator-facing tool.
• Cover Design System is for storefronts. Reach for it when you're building or theming a Storefront — it's the component vocabulary behind Cover themes, and it pairs with theme tokens for white-labeling.

Install

Both packages are on the public npm registry. No token or .npmrc is needed.

Studio

npm install @revenexx/studio

Then wire up the styles once, in your main CSS file. The @source path is relative to that file:

@import "tailwindcss";
@import "@revenexx/studio/tokens";
@import "@revenexx/studio/fonts";
@source "../node_modules/@revenexx/studio/dist";

Without the @source line the components render unstyled. After that, import components by name: import { Button, Card } from '@revenexx/studio'.

Cover

npm install @revenexx/cover

Add it as a layer in nuxt.config.ts. Your app must also register the modules the layer relies on and the de and en locales:

export default defineNuxtConfig({
  extends: ['@revenexx/cover'],
})

Each package's README on npm lists its exports and components in full. The library sites linked above are still being built, so use the README for reference until they are live (as of 2026-10).