@docyrus/shadcn

All shadcn/ui components bundled in a single NPM package for AI Builder projects.

Why?

shadcn/ui uses a CLI-based approach that requires npx commands to install components. This is problematic for:

• AI Builder projects that need pre-bundled components
• Preview environments that block external requests
• Projects that want simpler dependency management

This package bundles all shadcn/ui components into a single NPM package with weekly updates.

Installation

pnpm add @docyrus/shadcn

Usage

Quick Start (Default Style)

import { Button, Card, Input, Dialog } from "@docyrus/shadcn";
import "@docyrus/shadcn/styles.css";

Default Style

import { Button, Card, Input, Dialog } from "@docyrus/shadcn/default";
import "@docyrus/shadcn/default/styles.css";

// Or import individual components (tree-shakeable)
import { Button } from "@docyrus/shadcn/default/button";

New York Style

import { Button, Card, Input, Dialog } from "@docyrus/shadcn/new-york";
import "@docyrus/shadcn/new-york/styles.css";

// Or import individual components
import { Button } from "@docyrus/shadcn/new-york/button";

Import Utilities

import { cn } from "@docyrus/shadcn/lib/utils";

Import Hooks

import { useMobile } from "@docyrus/shadcn/hooks/use-mobile";

Tailwind CSS Configuration

This package requires Tailwind CSS v3.4+ or v4.

Tailwind CSS v4

No additional configuration needed. Just import the styles.

Tailwind CSS v3

Add to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ... your content paths
    "./node_modules/@docyrus/shadcn/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your config
};

Available Components (53)

Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Breadcrumb, Button, Button Group, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Command, Context Menu, Dialog, Drawer, Dropdown Menu, Empty, Field, Form, Hover Card, Input, Input Group, Input Otp, Item, Kbd, Label, Menubar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toggle, Toggle Group, Tooltip

Hooks (1)

use-mobile

Updating Components

To sync with the latest shadcn/ui:

pnpm run sync
pnpm run build

Framework Configuration

Next.js

Add to next.config.js:

module.exports = {
  transpilePackages: ["@docyrus/shadcn"],
};

Vite

Add to vite.config.ts:

export default defineConfig({
  optimizeDeps: {
    include: ["@docyrus/shadcn"],
  },
});

CI/CD

This package uses GitHub Actions for automated releases:

• Release: Push to main triggers build, version bump, GitHub release, and NPM publish
• Weekly Sync: Every Monday at 09:00 UTC, syncs with latest shadcn/ui and creates a PR

License

MIT - Components are from shadcn/ui which is also MIT licensed.