Shadcn Registry

If your project already uses the Shadcn CLI, you can pull Plex UI components with a single command. The registry is a thin layer over the @plexui/ui npm package: the CLI installs the package, drops a typed re-export in your components/ui/, and you import from @/components/ui/* exactly like native Shadcn components.

Prerequisites

• A Next.js / React project with Shadcn initialised (npx shadcn init)
• Path aliases configured (the default @/components setup works out of the box)

Install the styles once

Plex UI ships its own design tokens and CSS modules. Pull the style entry first. This installs the npm package and drops a CSS entrypoint:

npx shadcn@latest add https://plexui.com/r/styles.json

The generated app/plexui.css imports the Plex UI styles and points Tailwind at the package, so Tailwind compiles the utility classes the components use. Import it from your global stylesheet right after Tailwind, not from JavaScript:

/* app/globals.css */
@layer theme, base, components, utilities;
@import "tailwindcss";
@import "./plexui.css";

The @layer line keeps Plex UI's reset ahead of Tailwind's preflight (the Installation guide explains why). The @source path inside plexui.css is relative to that file: with a src/app directory, change it to ../../node_modules/@plexui/ui.

You only need to do this once for the whole project.

Add components

Each component is a separate registry entry. Install only what you use:

# One command per component
npx shadcn@latest add https://plexui.com/r/button.json
npx shadcn@latest add https://plexui.com/r/input.json
npx shadcn@latest add https://plexui.com/r/dialog.json
npx shadcn@latest add https://plexui.com/r/menu.json
npx shadcn@latest add https://plexui.com/r/badge.json
npx shadcn@latest add https://plexui.com/r/alert.json

Then use them like any Shadcn component:

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

export default function Example() {
  return (
    <form>
      <Input placeholder="Email" />
      <Button type="submit">Subscribe</Button>
      <Badge color="info">New</Badge>
    </form>
  )
}

What the registry does

The Shadcn CLI treats Plex UI the same way it treats any registry:

1. Reads the JSON at plexui.com/r/<name>.json
2. Installs listed npm dependencies (@plexui/ui)
3. Writes a typed re-export at components/ui/<name>.tsx
4. Recursively fetches registryDependencies (pulls in styles.json on first use)

Unlike classic Shadcn components, which copy the full source into your repo, Plex UI components stay inside @plexui/ui, so you always get bug fixes and new features with a single npm upgrade @plexui/ui. The local components/ui/*.tsx file is a one-line re-export that keeps imports identical to native Shadcn components, so your team can mix both libraries without friction.

Index

The full list of available components lives at plexui.com/r. See each component's docs page for props and examples.

Vue

For Vue projects initialised with shadcn-vue (npx shadcn-vue@latest init), the same registry exists for @plexui/vue under plexui.com/r/vue. Every component with a Vue page has an entry, and each one writes a re-export at components/ui/<name>/index.ts:

npx shadcn-vue@latest add https://plexui.com/r/vue/styles.json
npx shadcn-vue@latest add https://plexui.com/r/vue/button.json
npx shadcn-vue@latest add https://plexui.com/r/vue/dialog.json

The styles entry installs @plexui/vue and @plexui/styles and writes src/assets/plexui.css. Import it from your main stylesheet right after Tailwind (e.g. src/assets/main.css: @import "tailwindcss"; then @import "./plexui.css";), not from JavaScript, so Tailwind compiles the utility classes the components use. In Nuxt, move it next to your stylesheet and adjust its @source path, which is relative to the file. Then use the components from @/components/ui/*:

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
</script>

The Vue guide covers the Vite plugin and SSR setup, and the full list lives at plexui.com/r/vue.