Quick Start

Overview

Evolphin UI is our internal component registry. It allows you to add components to your projects with a single command, without installing a heavy dependency package.

Prerequisite: Your project must be set up with Tailwind CSS and standard shadcn/ui configuration.

Setup Guide

Configure Registry

Add the Evolphin registry to your components.json file. This tells the CLI where to find our components.

{
  "registries": {
    "@evolphin": "https://evolphin-ui.vercel.app/r/{name}.json"
  }
}

Install Components

Now you can install components using the @evolphin namespace.

bash pnpm dlx shadcn@latest add @evolphin/button

bash npx shadcn@latest add @evolphin/button

bash yarn dlx shadcn@latest add @evolphin/button

bash bun x shadcn@latest add @evolphin/button

Use Component

The component is installed directly into your project's components/ui folder.

import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>Click me</Button>;
}

Testing Locally

If you are developing components and want to test them before publishing, run the registry locally.

1. Start the Registry

Clone the evolphin-ui repo and run:

pnpm install
pnpm dev
# Server runs at http://localhost:3000

2. Install from Localhost

In your consumer app, verify the component installation using the local URL:

pnpm dlx shadcn@latest add http://localhost:3000/r/button.json

Deployment & CI/CD

We use Vercel for deployment and GitHub Actions for verification.

CI Workflow

Triggers: Push to master and Pull Requests.
Jobs:
- lint: Checks code quality.
- build: key step running pnpm registry:build to generate public/r/*.json files.

Vercel Deployment

Branch: master automatically deploys to production.
Output: Static JSON files in /r/ are served with CORS enabled.

Always run pnpm registry:build locally before committing to ensure the JSON files are up to date.

Search

On this page