Documentation

Introduction

Welcome to ParamUI! A beautiful, accessible component library for React and Next.js.

What is ParamUI?

ParamUI is an open-source UI component library that provides beautifully designed, fully accessible components that you can copy and paste into your apps. Built with React and styled with Tailwind CSS, our components are:

✓Copy-Paste Ready: No npm install needed. Just copy the code.
✓Fully Customizable: Own the code. Modify as needed.
✓Accessible: Built with WAI-ARIA guidelines in mind.
✓Dark Mode: All components support dark mode out of the box.

Installation

Get started with ParamUI in just a few steps.

Install Dependencies

First, make sure you have Tailwind CSS installed in your project.

npm install tailwindcss postcss autoprefixer

Add CSS Variables

Add our CSS variables to your globals.css file.

:root {
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --background: #ffffff;
  --foreground: #09090b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
}

Copy Components

Browse our components and copy the ones you need into your project.

npx paramui add button card input

Button Component

A versatile button component with multiple variants and sizes.

Button.jsx

export function Button({ 
  children, 
  variant = "default",
  ...props 
}) {
  const variants = {
    default: "bg-primary text-primary-foreground",
    outline: "border border-border",
    secondary: "bg-secondary text-secondary-foreground",
    ghost: "hover:bg-muted",
  };

  return (
    <button
      className={`h-10 px-4 rounded-lg text-sm 
        font-medium ${variants[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

Next Steps

Now that you're set up, explore more of what ParamUI has to offer.

Browse Components

Explore 50+ components

View Templates

Production-ready templates

Customize Themes

Match your brand