Getting Started

Components

Installation

Memphi UI ❤️ Next.js. Get started in minutes with our step-by-step installation guide.

1
Create Project

Run the init command to create a new Next.js project or to setup an existing one:

Terminal
npx create-next-app@latest my-memphi-app --typescript --tailwind --eslint --app

This creates a new Next.js project with TypeScript and Tailwind CSS configured.

2
Install Dependencies

Install the required dependencies for Memphi UI components:

Terminal
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge

What these packages do:
• @radix-ui/react-slot - Accessible component composition
• class-variance-authority - Type-safe component variants
• clsx - Conditional class names
• tailwind-merge - Merge Tailwind classes safely

3
Add Utilities

Create the utility function for merging classes. Add this to lib/utils.ts:

lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

4
Add Theme

Add Memphi UI colors to your Tailwind configuration. Update your globals.css:

globals.css

   @theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --font-sans: var(--font-comic-neue);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
// ... (click expand to see more)

5
Add Fonts (Optional)

We use Comic Neue for that playful Memphis feel. Add it to your layout:

app/layout.tsx
import { Comic_Neue } from 'next/font/google'
import './globals.css'

const comicNeue = Comic_Neue({
  variable: '--font-comic-neue',
  subsets: ['latin'],
  weight: ['300', '400', '700'],
})

export default function RootLayout({
  children,
}: {
// ... (click expand to see more)

Then update your Tailwind config to use the font:

tailwind.config.js (add to theme.extend)
fontFamily: {
  sans: ['var(--font-comic-neue)', 'Comic Neue', 'cursive'],
}

✓
That's it! 🚀

Now you can start using Memphi UI components in your project. You can install them manually by copying the code.

Manual Installation

Copy the component code from our documentation and paste it into your project.

shadcn CLI (Coming Soon)

Install components directly via the shadcn CLI for even faster setup.

Example Usage:

Example Component
import { Button } from "@/components/memphi/button"

export default function MyPage() {
  return (
    <div className="p-8">
      <Button>Hello Memphi UI!</Button>
      <Button variant="outline" shadowColor="oklch(0.6 0.2 240)">
        Custom Shadow
      </Button>
    </div>
  )
}

What's Next?

Explore our components and start building amazing interfaces with Memphis flair!