Getting Started

Begin your journey with Velra, a modern and accessible component toolkit for React and TypeScript. This guide will have you building confidently in just a few minutes.

Requirements

Make sure your project meets the following requirements.

React 18 or later
Tailwind CSS 4 or later
TypeScript enabled (recommended)
A modern bundler like Next.js or Vite

Installation

Pick your package manager and bring Velra into your project.

Install the core and utility packages:

npm install @velra/core @velra/utils

Configure your project

Get your environment ready to use Velra components.

Wrap your app with ThemeProvider to enable Velra's styling system.

import { ThemeProvider } from "@velra/core";

export default function MyApp() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

You're now ready to use Velra components anywhere in your app.

Try it out

Verify everything is working with a simple button.

import { Button } from "@velra/core";

export default function MyApp() {
  return (
    <Button>Click me</Button>
  );
}

Common Pitfalls

A few things that can trip you up when getting started.

Make sure ThemeProvider wraps your entire application.
Ensure your bundler supports ES modules and tree shaking.

Next Steps

Continue exploring Velra's capabilities.

Browse the component library
Explore utilities and hooks
Check out full examples