MMridha UI

Docs

Installation

Mridha UI components are not a traditional npm package. You install each component's source code directly into your project — you own it, you modify it.

Requirements

Your project needs:

  • React 18+
  • Next.js 14+ (or any React framework)
  • Tailwind CSS v4
  • TypeScript (recommended)

Option A — shadcn CLI

The fastest way. The CLI fetches the component and its dependencies automatically.

npx shadcn@latest add @mridha/animated-gradient-button

Option B — Manual copy

Every component page has a full source code tab. Copy it into components/ui/ in your project.

# 1. Install the component's dependencies (listed on each component page)
pnpm add motion

# 2. Copy the .tsx source file into your project
# 3. Import and use it
import { AnimatedGradientButton } from "@/components/ui/animated-gradient-button";

CSS variables

Components use CSS custom properties for theming. Add these to your globals.css:

globals.css
:root {
  --color-accent: #3ecf8e;
  --color-accent-dim: #2a9e6a;
  --color-accent-glow: rgba(62, 207, 142, 0.15);
  --color-accent-subtle: rgba(62, 207, 142, 0.08);
  --color-accent-fg: #0d0d0f;
  /* ... see full token list on the Tailwind Setup page */
}