Getting Started

Learn how to install and set up Aviris UI in your React project. Follow these steps to get up and running quickly.

Install Aviris UI

Install Aviris UI using your preferred package manager:

Terminal

pnpm add @aviris/ui

This will install the core package along with its peer dependencies.

Configure Tailwind CSS

Add the following to your tailwind.config.js:

tailwind.config.js

import { avirisPreset } from "@aviris/ui/preset"

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ... your content paths
    "./node_modules/@aviris/ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  presets: [avirisPreset],
}

Add Required Providers

Wrap your app with the required providers:

app/layout.tsx

import { ThemeProvider } from "@aviris/ui/components/theme-provider"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Start Using Components

Import and use components in your application:

app/login/page.tsx

import { Button } from "@aviris/ui/components/ui/button"
import { Input } from "@aviris/ui/components/ui/input"

export default function LoginForm() {
  return (
    <form className="space-y-4">
      <Input
        type="email"
        placeholder="Email"
      />
      <Input
        type="password"
        placeholder="Password"
      />
      <Button type="submit">
        Sign In
      </Button>
    </form>
  )
}

Next Steps

  • Explore the components in the documentation
  • Learn about customizing components and themes
  • Check out the example applications
  • Join our Discord community for support