Introduction

Welcome to the Ember UI component registry! This is a collection of reusable UI components built on top of Radix UI primitives and styled with Tailwind CSS, designed to accelerate your development workflow.

Getting Started

To start using this registry, you must first have shadcn installed in your project. Follow the installation instructions if necessary.

Installation

How to install dependencies and structure your app.

Initialize shadcn/ui

npx shadcn@latest init

yarn shadcn@latest init

pnpm dlx shadcn@latest init

bunx --bun shadcn@latest init

Configure custom registry

Add the ember-ui registry to your components.json file:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide",
  "registries": {
    "@emberui": "https://ember-ui.com/r/{name}.json"
  }
}

Add Components

npx shadcn@latest add @emberui/complex-component

yarn shadcn@latest add @emberui/complex-component

pnpm dlx shadcn@latest add @emberui/complex-component

bunx --bun shadcn@latest @emberui/complex-component

Output:

✔ Checking registry.
✔ Created 6 files:
  - components/ui/card.tsx
  - app/pokemon/page.tsx
  - components/pokemon-card.tsx
  - components/pokemon-image.tsx
  - lib/pokemon.ts
  - hooks/use-pokemon.ts

Import the component into your project

Configure for AI Assistants (Optional)

Add the shadcn MCP server to your project

npx shadcn@latest mcp init

yarn shadcn@latest mcp init

pnpm dlx shadcn@latest mcp init

bunx --bun shadcn@latest mcp init

Once added, the mcp server will reference your components.json to consult with the various components and blocks available in the registry. For example, you can ask the assistant to "Build a landing page using components from the @emberui registry" or you could be more specific and ask "add a complex-component to my home page @app/page.tsx . use emberui shadcn mcp"

References

shadcn/ui - For style and registry distribution.
Tailwind CSS - For easily styling with utility first CSS