NextJs Installation

Install and Configure JamsrUI in your Next.js project.

Kickstart with our Next.js Starter 🚀

Everything is setup to use JamsrUI

Install Packages

Use your preferred package manager to install JamsrUI:

npm install @jamsr-ui/react framer-motion

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 globals.css to include JamsrUI components:

// globals.css
@import "tailwindcss";

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

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