Introduction

@epilot/volt-ui is a tree-shakeable design system library for React applications. Built with Tailwind CSS v4, Radix UI primitives, and TypeScript.

Installation

npm install @epilot/volt-ui

CSS Variables and Classes Prefixing

Volt-UI library automatically prefixes CSS variables and classes to avoid conflicts with your application styles.

CSS Variables (--volt-)

All CSS variables in volt-ui are prefixed with --volt-. When you define variables in your styles, they are automatically prefixed during the build process.

In your source code:

/* src/styles/colors.css */
:root {
  --blue-1: #fcfdfe;
  --blue-9: #005eb4;
}

After build (automatically prefixed):

:root {
  --volt-blue-1: #fcfdfe;
  --volt-blue-9: #005eb4;
}

Using prefixed variables:

:root {
  /* Use the prefixed variable name */
  --custom-color: var(--volt-blue-9);
}

CSS Classes (.volt-)

All Tailwind utility classes in volt-ui components are automatically prefixed with .volt- during the build process.

In your source code:

<button className="bg-blue-500 text-white px-4 py-2">
  Click me
</button>

After build (automatically prefixed):

<button className="volt-bg-blue-500 volt-text-white volt-px-4 volt-py-2">
  Click me
</button>

This prefixing ensures that volt-ui styles are scoped and won't conflict with your application's existing styles.