> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation
> Learn how to install and set up Apsara in your React project
## Prerequisites
Before installing Apsara, make sure you have:
* **Node.js 22 or higher** installed on your system
* A React project with **React 18 or 19**
* Package manager: npm, yarn, or pnpm
Apsara requires React 18+ and Node.js 22+ to work properly.
## Install the package
Install Apsara using your preferred package manager:
```bash npm theme={null}
npm install @raystack/apsara
```
```bash yarn theme={null}
yarn add @raystack/apsara
```
```bash pnpm theme={null}
pnpm add @raystack/apsara
```
## Import styles
Apsara uses vanilla CSS for styling. You need to import the CSS file in your application root (e.g., `main.tsx`, `App.tsx`, or `_app.tsx`).
Add the following import at the top of your root file:
```tsx theme={null}
import "@raystack/apsara/style.css";
```
The CSS import should be done once at the root of your application.
For consistent cross-browser styling, you can also import the normalize CSS:
```tsx theme={null}
import "@raystack/apsara/normalize.css";
```
## TypeScript setup
Apsara is written in TypeScript and includes comprehensive type definitions. No additional setup is required - types are automatically included when you install the package.
```tsx theme={null}
import { Button, Flex } from "@raystack/apsara";
import type { ButtonProps } from "@raystack/apsara";
// TypeScript will automatically infer types
const MyComponent = () => {
return (
);
};
```
The `@types/react` peer dependency is optional. TypeScript will work with or without it.
## Package exports
Apsara provides several entry points for different use cases:
```tsx Components theme={null}
// Import components from the main entry
import { Button, Flex, Input } from "@raystack/apsara";
```
```tsx Icons theme={null}
// Import icons separately
import { IconName } from "@raystack/apsara/icons";
```
```tsx Hooks theme={null}
// Import hooks separately
import { useCopyToClipboard, useTheme } from "@raystack/apsara/hooks";
```
```css Styles theme={null}
/* Import CSS files */
@import "@raystack/apsara/style.css";
@import "@raystack/apsara/normalize.css";
```
## Basic setup example
Here's a complete example of setting up Apsara in a React application:
```bash theme={null}
npm install @raystack/apsara
```
```tsx App.tsx theme={null}
import "@raystack/apsara/style.css";
import { Button, Flex } from "@raystack/apsara";
function App() {
return (
My Apsara App
);
}
export default App;
```
Import and use any Apsara component in your application:
```tsx theme={null}
import { Button, InputField, Select } from "@raystack/apsara";
```
## Framework-specific setup
For Next.js applications, import the CSS in your root layout or `_app.tsx`:
```tsx app/layout.tsx theme={null}
import "@raystack/apsara/style.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
If using the Pages Router, import in `pages/_app.tsx` instead.
For Vite applications, import the CSS in your `main.tsx`:
```tsx main.tsx theme={null}
import React from "react";
import ReactDOM from "react-dom/client";
import "@raystack/apsara/style.css";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
);
```
For Create React App, import the CSS in your `index.tsx` or `App.tsx`:
```tsx index.tsx theme={null}
import React from "react";
import ReactDOM from "react-dom/client";
import "@raystack/apsara/style.css";
import App from "./App";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
);
```
## Peer dependencies
Apsara has the following peer dependencies:
* `react`: ^18 || ^19
* `react-dom`: ^18 || ^19
* `@types/react`: ^18 || ^19 (optional)
Make sure your project meets these peer dependency requirements to avoid compatibility issues.
## Next steps
Now that you have Apsara installed, you're ready to start building!
Follow the quick start guide to build your first component
Learn how to customize the look and feel
Browse the complete component library
Set up dark mode in your application