Installation

Get Veloria UI set up in your Next.js or React project in four steps.

Requirements

React 18 or later
Tailwind CSS v3 or later
Node.js 18 or later

Step 1 — Install

Choose your package manager:

bash

$npm install veloria-ui
# or
pnpm add veloria-ui
# or
yarn add veloria-ui
# or
bun add veloria-ui

Step 2 — Import styles

Add the stylesheet to your root layout. This imports the CSS design tokens (colors, radius, fonts) for both light and dark mode.

// app/layout.tsx
import "veloria-ui/styles";

Step 3 — Configure Tailwind

Add the veloriaPlugin to your tailwind.config.ts. This maps all the CSS custom properties to Tailwind utility classes like bg-primary, text-muted-foreground, and border-border.

// tailwind.config.ts
import type { Config } from "tailwindcss";
import { veloriaPlugin } from "veloria-ui/tailwind";
 
const config: Config = {
  darkMode: ["class"],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  plugins: [veloriaPlugin],
};
 
export default config;

Step 4 — Add VeloriaProvider

Wrap your app with VeloriaProvider. This sets up the Toast notification context and the global Tooltip provider. Without it, toasts and tooltips will not work.

// app/layout.tsx
import "veloria-ui/styles";
import { VeloriaProvider } from "veloria-ui/provider";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <VeloriaProvider>{children}</VeloriaProvider>
      </body>
    </html>
  );
}

Start using components

Import any component directly from veloria-ui:

tsx

import { Button, Card, CardContent, Input } from "veloria-ui";
 
export default function Page() {
  return (
    <Card>
      <CardContent className="flex flex-col gap-4 p-6">
        <Input placeholder="Email" type="email" />
        <Button variant="solid">Continue</Button>
      </CardContent>
    </Card>
  );
}

Next upTheming