Installation

How to install and setup JamsrUI in your project.

Kickstart with our Next.js Starter 🚀

Everything is setup to use JamsrUI

Install Packages

Use your preferred package manager to install JamsrUI:

pnpm add @jamsr-ui/react framer-motion

Configure Hoisted Dependencies (pnpm users only)

If you're using pnpm, ensure that JamsrUI packages are hoisted to the root node_modules

Create .npmrc file at root and add the following line:
```
public-hoist-pattern[]=*@jamsr-ui/*
```
Delete the existing node_modules directory and reinstall dependencies:
```
pnpm install
```

Set Up Tailwind CSS

JamsrUI is built on Tailwind CSS. Follow the official Tailwind CSS installation guide to set it up in your project.

After setting up Tailwind CSS, modify your tailwind.config.ts to include JamsrUI components:

// tailwind.config.ts
import { withJamsrUI } from "@jamsr-ui/theme";
import type { Config } from "tailwindcss";

const config = withJamsrUI({
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    // Ensure it points to the ROOT node_modules
    "./node_modules/@jamsr-ui/*/dist/*.js",
  ],
}) satisfies Config;
export default config;

Note: For pnpm users in a monorepo setup, ensure the path points to the rootnode_modules

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>
  );
}

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>
  );
};