Install with React

Add the Edmi registry to a shadcn/ui project.

Edmi UI for React is a shadcn registry built on Base UI and Tailwind v4.

Install everything

New project (the edmi base: theme, fonts, utils and every component):

npx shadcn@latest init https://viandwi24.github.io/edmi-ui/r/react/edmi.json

pnpm dlx shadcn@latest init https://viandwi24.github.io/edmi-ui/r/react/edmi.json

yarn dlx shadcn@latest init https://viandwi24.github.io/edmi-ui/r/react/edmi.json

bunx shadcn@latest init https://viandwi24.github.io/edmi-ui/r/react/edmi.json

Existing shadcn project, after registering @edmi-ui in components.json (step 2 below):

npx shadcn@latest add @edmi-ui/theme @edmi-ui/all --overwrite

pnpm dlx shadcn@latest add @edmi-ui/theme @edmi-ui/all --overwrite

yarn dlx shadcn@latest add @edmi-ui/theme @edmi-ui/all --overwrite

bunx shadcn@latest add @edmi-ui/theme @edmi-ui/all --overwrite

npx shadcn@latest add @edmi-ui/patterns

pnpm dlx shadcn@latest add @edmi-ui/patterns

yarn dlx shadcn@latest add @edmi-ui/patterns

bunx shadcn@latest add @edmi-ui/patterns

all is every Edmi component; patterns is every ✦ pattern block (headers, stat tiles, tickers, feeds and more). Add both for everything. --overwrite replaces the stock shadcn files with the Edmi versions.

Prefer to pick components one at a time? Follow the steps below.

1. Initialise shadcn

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx shadcn@latest init

2. Register Edmi

Add the registry to components.json:

{
  "registries": {
    "@edmi-ui": "https://viandwi24.github.io/edmi-ui/r/react/{name}.json"
  }
}

3. Install the base (tokens, theme, fonts)

npx shadcn@latest add @edmi-ui/edmi

pnpm dlx shadcn@latest add @edmi-ui/edmi

yarn dlx shadcn@latest add @edmi-ui/edmi

bunx shadcn@latest add @edmi-ui/edmi

4. Add components

npx shadcn@latest add @edmi-ui/button @edmi-ui/card

pnpm dlx shadcn@latest add @edmi-ui/button @edmi-ui/card

yarn dlx shadcn@latest add @edmi-ui/button @edmi-ui/card

bunx shadcn@latest add @edmi-ui/button @edmi-ui/card

Components that exist in stock shadcn replace the stock file; use --overwrite when asked.

Registry items

Besides the components, the registry ships a few entry items. They are not components, so they are not in the sidebar.

edmi: the base (theme, fonts, utils and every component) for a fresh project.
theme: the Edmi tokens, @theme map and base layer on their own.
all: every Edmi component. patterns: every ✦ pattern block. ai-all: every Edmi AI component.
font-instrument-sans, font-jetbrains-mono, font-sora: the three fonts, one item each.
utils: the cn helper (React only; Vue and Svelte use the one from your own init).
ai-use-controllable-state: the controlled/uncontrolled state hook that the AI components share.

Elevation ✦

Every Edmi component renders flat out of the box: a solid fill and a 1px border. Depth is the elevation prop ("sunken", "flat", "raised", "floating", default "auto"), or a whole subtree at once with ElevationProvider.

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ElevationProvider } from "@/components/ui/elevation"

export function Example() {
  return (
    <>
      {/* one component */}
      <Button elevation="raised">Get started</Button>

      {/* a page where every role takes its level: actions up, fields down, overlays float */}
      <ElevationProvider mode="layered">
        <Card>…</Card>
      </ElevationProvider>
    </>
  )
}

Components that take elevation (default "auto"):

Actions: Button, Button Group, Badge, Toggle, Toggle Group (the ON item rises), Kbd
Forms: Input, Textarea, Input Group, Input OTP, Select (trigger), Native Select, Checkbox (checked box), Switch (thumb), Slider (thumbs), Calendar and Date Picker (selected day; the level sits on the shell), choice cards and Questionnaire options
Display: Card, Inset Panel, Empty (media)
Overlays: Dialog, Alert Dialog, Popover, Toast
Navigation: Menubar, Pagination (active link), Tabs (active trigger), Dropdown and Context menus
Conversation: Reactions
Patterns and the AI pack: forward elevation to the Card, Button or surface they render

Pick flat for dense app UI and layered mode for pages that should feel tactile. Read the Elevation guide for the philosophy, the role table and the nesting rule; each component page has an Elevation ✦ section.

Icons

Icons follow your project’s components.json iconLibrary. Registry sources use <IconPlaceholder lucide="…" phosphor="…" … />, which the CLI rewrites to your library on install (lucide, tabler, hugeicons, phosphor or remixicon). Edmi’s own default is Phosphor; an existing shadcn project keeps whatever it already uses.

Dark mode

Add the dark class to <html>. Tokens are CSS variables, so no provider is required.