Install with Svelte

Edmi UI for Svelte is a shadcn-svelte registry built on Bits UI, Svelte 5 runes and Tailwind v4. shadcn-svelte installs registry items by URL.

Install everything

shadcn-svelte installs by URL:

npmpnpmyarnbun

npx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/theme.json https://viandwi24.github.io/edmi-ui/r/svelte/all.json --overwrite

pnpm dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/theme.json https://viandwi24.github.io/edmi-ui/r/svelte/all.json --overwrite

yarn dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/theme.json https://viandwi24.github.io/edmi-ui/r/svelte/all.json --overwrite

bunx --bun shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/theme.json https://viandwi24.github.io/edmi-ui/r/svelte/all.json --overwrite

npmpnpmyarnbun

npx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/patterns.json

pnpm dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/patterns.json

yarn dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/patterns.json

bunx --bun shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/patterns.json

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-svelte files with the Edmi versions.

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

1. Initialise shadcn-svelte

npmpnpmyarnbun

npx shadcn-svelte@latest init

pnpm dlx shadcn-svelte@latest init

yarn dlx shadcn-svelte@latest init

bunx --bun shadcn-svelte@latest init

2. Install the base and components

npmpnpmyarnbun

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

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

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

bunx --bun shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/edmi.json

npmpnpmyarnbun

npx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/button.json

pnpm dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/button.json

yarn dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/button.json

bunx --bun shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/button.json

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 lang="ts">
  import { Button } from "$lib/components/ui/button"
  import * as Card from "$lib/components/ui/card"
  import { ElevationProvider } from "$lib/components/ui/elevation"
</script>

<!-- 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.Root>…</Card.Root>
</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 shadcn-svelte rewrites to your library on install. Edmi’s own default is Phosphor; an existing project keeps its own library.

Dark mode

Add the dark class to <html>.