logo

Vite Installation

Install and Configure JamsrUI in your Vite project.

Kickstart with our Vite Starter 🚀

Everything is setup to use JamsrUI

OR
1

Install Vite

Start by creating a new React project using Vite

2

Set Up Tailwind CSS

Install Tailwind CSS

3

Install Packages

Use your preferred package manager to install JamsrUI:

npm install @jamsr-ui/react framer-motion
4

Edit index.css file

// index.css
@import "tailwindcss";

/* add these two lines */
@import "@jamsr-ui/theme/styles.css";
@source "../../node_modules/@jamsr-ui";
/* add these two lines */
5

Wrap Your Application with UIProvider

To enable JamsrUI components, wrap your application with the UIProvider.

// app/layout.tsx
import { UIProvider } from "@jamsr-ui/react";
          
function App() {
  return (
    <html lang="en">
      <body>
        <UIProvider>
          {children}
        </UIProvider>
      </body>
    </html>
  );
}
6

Enjoy and Explore JamsrUI Components

You're all set! Start using JamsrUI components in your project. Here's an example of implementing a button component:

import { Button } from "@jamsr-ui/react";

export const ButtonExample = () => {
  return (
    <div className="flex gap-4">
      <Button color="default">Default</Button>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="success">Success</Button>
      <Button color="warning">Warning</Button>
      <Button color="danger">Danger</Button>
    </div>
  );
};