Install with Vue

Edmi UI for Vue is a shadcn-vue registry built on Reka UI and Tailwind v4.

Install everything

After registering @edmi-ui in components.json (step 2 below):

npmpnpmyarnbun

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

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

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

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

npmpnpmyarnbun

npx shadcn-vue@latest add @edmi-ui/patterns

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

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

bunx shadcn-vue@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-vue files with the Edmi versions.

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

1. Initialise shadcn-vue

npmpnpmyarnbun

npx shadcn-vue@latest init

pnpm dlx shadcn-vue@latest init

yarn dlx shadcn-vue@latest init

bunx shadcn-vue@latest init

2. Register Edmi

Add the registry to components.json:

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

3. Install the base and components

npmpnpmyarnbun

npx shadcn-vue@latest add @edmi-ui/edmi

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

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

bunx shadcn-vue@latest add @edmi-ui/edmi

npmpnpmyarnbun

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

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

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

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

Registry items

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

• 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.
• fonts: Instrument Sans, JetBrains Mono and Sora are imported by theme; there are no separate font items.
• 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.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ElevationProvider } from "@/components/ui/elevation"
</script>

<template>
  <!-- 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>
</template>

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 import from @lucide/vue; shadcn-vue rewrites those imports to your library on install. Edmi’s own default is Phosphor; an existing shadcn-vue project keeps its own library. The demos on this site render the unrewritten sources.

Dark mode

Add the dark class to <html>.