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.

Add the following line to your .npmrc file:
```
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: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@jamsr-ui/*/dist/*.js",
  ],
  ...
});
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/page.ts
import { UIProvider } from "@jamsr-ui/react";
          
function App() {
  return (
    <UIProvider>
      <YourApplication />
    </UIProvider>
  );
}

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