Getting Started

A quick tutorial to get you up and running with Apsara.

Apsara is a pre-styled component library that is designed to work out of the box with minimal configuration.

Installation

Getting up and running is quick and easy.

1. Install Apsara

Install Apsara from your command line.

npm install @raystack/apsara

2. Import the CSS file

Import the global CSS file at the root of your application.

import "@raystack/apsara/style.css";

Using normalize.css

Apsara includes an optional normalize.css stylesheet to help ensure consistency across different browsers. Unlike a CSS reset, normalize.css preserves useful default styles while correcting inconsistencies in how browsers render HTML elements.

If you'd like to enable it, simply import the provided stylesheet in your project:

import "@raystack/apsara/normalize.css";

3. Start building

You are now ready to use Apsara components.

import { Button } from "@raystack/apsara/v1";
 
<Button variant="solid" color="accent">
  Click here!
</Button>;

On this page