Installation

Get started quickly with our step-by-step guide to set up Elemnts UI in your project.

Setup Guide

Follow these steps to set up Elemnts UI and its styling engine, Panda CSS.

Prerequisites

Before you begin, make sure your Panda project is properly configured. If you haven't set it up yet, follow the Panda CSS Getting Started Guide to get started, then return here once complete.

Install dependencies

Elemnts UI is built on Ark UI as its headless foundation and uses Panda CSS for styling.

npm install @elemnts-ui/core @elemnts-ui/react
npm install -D @pandacss/dev

pnpm add @elemnts-ui/core @elemnts-ui/react
pnpm add -D @pandacss/dev

yarn add @elemnts-ui/core @elemnts-ui/react
yarn add --dev @pandacss/dev

bun add @elemnts-ui/core @elemnts-ui/react
bun add --dev @pandacss/dev

Initialize PandaCSS

Initialize Panda CSS in your project if you haven't already. Run the following command in your terminal:

npm run panda init --postcss

pnpm run panda init --postcss

yarn panda init --postcss

bun run panda init --postcss

Then, update your panda.config.ts to include the Elemnts base preset.

import { basePreset } from "@elemnts-ui/core/presets";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({          
  presets: [basePreset],
  include: [
    "src/**/*.{js,jsx,ts,tsx}",
    "node_modules/@elemnts-ui/react/dist/panda.buildinfo.json",
  ],
});

Add components

You can now start adding components to your project.

import { Button } from "@elemnts-ui/react";
export function Welcome() {
  return (
    <Button variant="primary">Get Started</Button>
  );
}

And you're good to go! Happy building!