Aaroh by QuilonixAAROH
Back to Docs

Getting Started

Aaroh provides a collection of beautifully designed, accessible components for your next project.

1Installation

Install Aaroh and its peer dependencies via your package manager of choice.

npm install @aaroh/react-ui @aaroh/ui framer-motion

# or

pnpm add @aaroh/react-ui @aaroh/ui framer-motion

2Configure Tailwind

Aaroh components are built with Tailwind CSS. You'll need to wrap your Tailwind config with Aaroh's preset.

// tailwind.config.js

import { aarohPreset } from '@aaroh/ui/tailwind';

export default {

presets: [aarohPreset],

content: [

'./src/**/*.{js,ts,jsx,tsx,mdx}',

'./node_modules/@aaroh/react-ui/dist/**/*.js'

],

}

3Import Styles

Import the core CSS variables in your global stylesheet to enable theming.

@import '@aaroh/ui/styles.css';

@tailwind base;

@tailwind components;

@tailwind utilities;

4Usage

Now you're ready to start using components in your application.

import { Button } from '@aaroh/react-ui';

export default function App() {

return (

<Button variant="solid">Click Me</Button>

);

}