Architecture Overview

A comprehensive design system and private component registry built on shadcn/ui.

Product Summary

Evolphin UI is an internal design system that provides:

Private Component Registry — Install components via CLI with @evolphin/ namespace
Documentation Site — Interactive docs with live component previews
54+ UI Components — All shadcn/ui components, customizable for your brand

Key Benefits

Feature	Description
One Command Install	`pnpm dlx shadcn@latest add @evolphin/button`
Full Ownership	Components copied to your project, not locked to a package
Zero Drift	Docs and registry always in sync (same source)
Professional Docs	MDX-based with live previews, code examples, API tables

Tech Stack

Layer	Technology	Version
Framework	Next.js	16.1.1
Language	TypeScript	5.x
Styling	Tailwind CSS	4.x
Component Base	shadcn/ui	latest
Documentation	Fumadocs + MDX	3.x
Package Manager	pnpm	10.x
Build System	Turbopack	(built-in)

Core Dependencies

react / react-dom 19.x - next 16.x - tailwindcss 4.x - class-variance-authority — Variant styling - clsx + tailwind-merge — Class utilities

@radix-ui/react-* — Accessible unstyled components - lucide-react — Icon library

react-hook-form — Form handling - @hookform/resolvers — Schema integration - zod — Schema validation

cmdk — Command palette - sonner — Toast notifications - vaul — Drawer component - recharts — Charts - embla-carousel-react — Carousel - react-day-picker — Calendar

Architecture Diagram

┌─────────────────────────────────────────────────────────┐
│                    Evolphin UI Repo                     │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  registry/default/ui/           content/docs/           │
│  ├── button.tsx                 └── components/         │
│  ├── card.tsx         ───────►      ├── button.mdx     │
│  └── ...                            └── ...             │
│       │                                  │              │
│       ▼                                  ▼              │
│  shadcn build              Next.js App Router           │
│       │                          │                      │
│       ▼                          ▼                      │
│  public/r/*.json           /docs/components/*           │
│  (Registry)                (Documentation)              │
│                                                         │
└─────────────────────────────────────────────────────────┘

Flow

Components are authored in registry/default/ui/
shadcn build generates JSON files in public/r/
MDX docs import and demo the same components
Consumers install via shadcn add @evolphin/[name]

Project Structure

evolphin-ui

content

docsMDX documentation

registry

default/ui54 UI components

default/hooksCustom hooks

default/blocksComposite blocks

src

appNext.js routes

componentsCustom components

libUtilities & config

public

rGenerated registry JSON

source.config.tsFumadocs MDX config

mdx-components.tsxMDX component mapping

registry.jsonRegistry definition

components.jsonshadcn config

Scripts

Command	Description
`pnpm dev`	Start development server (Turbopack)
`pnpm build`	Build registry + Next.js app
`pnpm registry:build`	Generate registry JSON files only
`pnpm lint`	Run ESLint
`pnpm start`	Start production server

Consumer Setup

Configure components.json

{
  "registries": {
    "@evolphin": "https://ui.evolphin.com/r/{name}.json"
  }
}

Install Components

pnpm dlx shadcn@latest add @evolphin/button @evolphin/card

shadcn/ui

The foundation of our component library

Radix UI

Accessible component primitives

Tailwind CSS

Utility-first CSS framework

Next.js

React framework for production

Search

Architecture Overview

shadcn/ui

Radix UI

Tailwind CSS

Next.js

On this page