Installation

Get started with Vera UI, a modern React component library built with accessibility and customization in mind.

Requirements

Make sure you have Node.js 22+ and a React project set up before installing Vera UI.

React: ^18.2.0 || ^19.0.0
React DOM: ^18.2.0 || ^19.0.0
Node.js: >=22

Install the Package

Install Vera UI

npm install @helgadigitals/vera-ui

pnpm add @helgadigitals/vera-ui

yarn add @helgadigitals/vera-ui

Install Peer Dependencies

Depending on your needs, you may need to install additional peer dependencies:

# For forms
npm install react-hook-form zod

# For routing (optional)
npm install react-router-dom

# For advanced table features
npm install @tanstack/react-table

# For date handling
npm install date-fns

# For forms
pnpm add react-hook-form zod

# For routing (optional)
pnpm add react-router-dom

# For advanced table features
pnpm add @tanstack/react-table

# For date handling
pnpm add date-fns

# For forms
yarn add react-hook-form zod

# For routing (optional)
yarn add react-router-dom

# For advanced table features
yarn add @tanstack/react-table

# For date handling
yarn add date-fns

Set Up Tailwind CSS

Vera UI is built with Tailwind CSS v4. Install Tailwind CSS v4 based on your framework:

npm install @tailwindcss/vite tailwindcss

pnpm add @tailwindcss/vite tailwindcss

yarn add @tailwindcss/vite tailwindcss

npm install @tailwindcss/postcss

pnpm add @tailwindcss/postcss

yarn add @tailwindcss/postcss

Configure Tailwind CSS

With Tailwind CSS v4, configuration is much simpler. No tailwind.config.js file is needed.

Configure Tailwind CSS based on your framework:

Add the Tailwind plugin to your Vite configuration:

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Add the Tailwind plugin to your Next.js configuration:

next.config.js

import tailwindcss from '@tailwindcss/vite'

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // Enable CSS imports in the app directory
    turbo: {
      rules: {
        '*.css': {
          loaders: ['@tailwindcss/vite'],
        },
      },
    },
  },
}

export default nextConfig

Or if using the App Router, you can also configure it in your postcss.config.js:

postcss.config.js

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Add CSS Variables

Add the required imports to your main CSS file (e.g., globals.css):

src/globals.css

@import "@helgadigitals/vera-ui/dist/vera-ui.css";
@import "tailwindcss";


### Import Vera UI Styles

Import your CSS file in your main application file:

```tsx title="src/main.tsx" {3}
import React from 'react'
import ReactDOM from 'react-dom/client'
import './globals.css'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Quick Start

Now you can start using Vera UI components in your React application:

src/App.tsx

import { Button, Card, CardContent, CardHeader, CardTitle } from '@helgadigitals/vera-ui'

function App() {
  return (
    <div className="p-8">
      <Card className="w-96">
        <CardHeader>
          <CardTitle>Welcome to Vera UI</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="mb-4 text-muted-foreground">
            A modern React component library built for accessibility and customization.
          </p>
          <Button>Get Started</Button>
        </CardContent>
      </Card>
    </div>
  )
}

export default App

Next Steps

Explore the Components to see all available components
Check out Examples for real-world use cases
Learn about Contributing to help improve Vera UI

🎉 You're all set! Start building beautiful interfaces with Vera UI components.

Installation

On this page