Pre-built Shadcn/UI blocks and components, ported and optimized for Bun full-stack environments.

Shadcn/UI is incredible, but deploying a full-stack app using it inside a Bun container is a different story. Standard Next.js setups don't translate cleanly — there's configuration friction around bundling, server-side rendering, API routes, and containerization that adds up fast.

BunCN eliminates that friction. Every block here is pre-configured and tested against a Bun-native server with React Router, Tailwind CSS v4, and PostgreSQL. Clone it, grab the blocks you need, or use the whole thing as a starter for your next project.

These are official Shadcn blocks and high-value community patterns we plan to port:

Official Shadcn Blocks

• Dashboard (sidebar + charts + data table)
• Sidebar variants (collapsible, icon-only, file tree, calendar, nested)
• Login / Signup pages (forms, social providers, two-column layouts)

High-Value Community Patterns

• Charts (area, bar, line, pie, radar — via Recharts)
• Settings pages
• Kanban boards
• Calendar views
• File upload interfaces
• Rich text editors (Plate, ProseMirror-based)

Moving from a standard Next.js + Shadcn setup to Bun full-stack required these structural changes:

git clone https://github.com/chikingsley/buncn
cd buncn
bun install
cp .env.example .env

Start a local PostgreSQL instance with Docker and seed it:

bun run db:start
bun run db:setup

bun run dev

The server starts at http://localhost:3000 with hot reload.

bun run build
bun run start

src/
├── app/                    # Block implementations
│   ├── data-grid/          # Data grid block
│   ├── data-grid-live/     # Real-time grid block
│   ├── mail/               # Mail client block
│   ├── media-player/       # Media player block
│   └── components/         # Tasks table block
├── components/
│   ├── ui/                 # Base Shadcn components
│   ├── data-grid/          # Reusable grid components
│   ├── data-table/         # Reusable table components
│   └── layouts/            # Layout wrappers
├── db/                     # Schema, migrations, seeds
├── hooks/                  # Custom React hooks
├── lib/                    # Utilities
├── routes/                 # Page components
├── server/                 # Bun API server
├── styles/                 # Global CSS
└── types/                  # TypeScript definitions

• Port official Shadcn blocks (dashboard, sidebar, login, signup)
• Add chart examples (area, bar, line, pie via Recharts)
• Build settings pages, kanban boards, and calendar views

• Detailed architectural comparison: Next.js vs Bun full-stack
• Containerization and deployment guide (Docker, Fly.io, Railway)
• Per-block documentation with usage examples

• Research and implement a BunCN component registry
• bunx buncn add <block> CLI for pulling blocks into existing projects
• Version tracking against Bun and Shadcn updates

• Accept community block contributions
• Integrate popular community patterns (from the 127+ Shadcn registries)
• Benchmark Bun full-stack vs Next.js performance

BunCN's current blocks are ported from two sources. This section documents what came from where and what changed in the process.

The original is a Next.js App Router project using Drizzle ORM, React Server Components, and unstable_cache / revalidateTag for caching.

What we kept:

• TanStack Table column definitions, filter operators, and sorting logic
• Data grid components: cell variants (short-text, long-text, number, select, multi-select, checkbox, date, URL, file), virtualization, keyboard navigation, clipboard, undo/redo, context menu, search
• Data table components: pagination, column headers, toolbar, faceted filters, date filters, slider filters, sort/filter lists, view options, skeleton
• Custom hooks: useDataTable, useDataGrid and its sub-hooks (keyboard, editing, clipboard, selection, navigation, search, focus, undo-redo)
• URL state management via nuqs
• Zod validation schemas

What we changed:

What we added:

• Bun-native HTTP server with all REST API endpoints (/api/tasks, /api/skaters)
• SQL migrations and seed scripts runnable via bun run db:setup
• Docker Compose for local PostgreSQL
• Event-driven UI refresh (tasks:changed custom events)

The original is a UI-only demo — 7 files, 17 hardcoded emails, no database, no working actions. Most buttons (Reply, Forward, Archive, Trash, Search) are non-functional stubs.

What we kept:

• 3-panel resizable layout (nav, list, display) using react-resizable-panels
• Component structure: Mail, MailNav, MailList, MailDisplay, AccountSwitcher
• Visual design: badge variants, unread indicators, avatar with initials, relative timestamps
• Shadcn/UI component usage: Tabs, ScrollArea, Tooltip, Popover, DropdownMenu, Calendar, etc.

What we changed:

What we added:

• Full database layer: schema, migrations, seed data
• REST API: GET/PATCH/DELETE /api/mails, GET /api/mails/folder-counts
• Server-side query builder with folder filtering, search, and unread-only mode
• Custom event system (mails:changed) for cross-component data refresh
• Zod validation schemas for mail operations
• 8 label types (work, personal, important, social, updates, forums, shopping, promotions)
• 6 working folders (inbox, drafts, sent, junk, trash, archive) with real counts

What's still UI-only:

• Reply, Reply All, Forward
• Snooze
• Account switching (dropdown works, but all accounts show same data)
• Mark as unread, Star thread, Add label, Mute thread

• shadcn/ui — UI components and original mail example
• sadmann7/shadcn-table — Original data table and data grid implementation
• Vercel — React best practices referenced throughout