logo

Installation

How to install and setup Jamsr UI in your project.

JamsrUI is currently in development and it is not stable.
JamsrUI is only supported in Next.js

Get started with JamsrUI Next.js template

OR
1

Install Packages

To Install JamsrUI, run one of the following commands in your terminal:

pnpm add @jamsr-ui/react framer-motion
2

Hoisted Dependencies Setup

Note: This step is only for those who use pnpm to install. If you install JamsrUI using other package managers, please skip this step.

If you are using pnpm, you need to add the following line to your .npmrc file to hoist our packages to the root node_modules.

public-hoist-pattern[]=*@jamsr-ui/*

After modifying the .npmrc file, you need to delete the previous node_modules and reinstall again to ensure that the dependencies are installed correctly

3

Tailwind CSS Setup

JamsrUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official installation guide to install Tailwind CSS. Then you need to add the following code to your tailwind.config.js file:

Note: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT node_modules
// 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;

4

Provider Setup

It is essential to add the JamsrUIProvider at the root of your application.

import { UIProvider } from "@jamsr-ui/react";
          
function App() {
  return (
    <UIProvider>
      <YourApplication />
    </UIProvider>
  );
}