Accessible, beautifully designed components for vibe.js, adapted from shadcn/ui.
vibecn is not a component library you import from node_modules. The CLI copies .vibe source into your application, where you own it: read it, change it, keep it. Your app compiles the components with its own vibe.js compiler, so there is no runtime to install.
Documentation: https://vibecn.dev
This project is independent and not affiliated with or endorsed by shadcn/ui.
From the root of a vibe.js application that uses Tailwind CSS v4:
pnpm dlx @usevibejs/vibecn@latest init
pnpm add clsx tailwind-merge
pnpm dlx @usevibejs/vibecn@latest add button card inputImport the theme after Tailwind in your stylesheet:
@import 'tailwindcss';
@import './vibecn.css';Then use the components:
<script setup lang="ts">
import Button from './components/ui/Button.vibe';
</script>
<template>
<Button variant="outline">Hello vibecn</Button>
</template>
The installation guide covers the requirements, the import alias and dark mode. The CLI reference lists every command and option.
Use Node ^24.15.0 || >=26 and pnpm 12.14.0.
pnpm install
pnpm devpnpm dev starts the documentation site in site/. It installs every registry component into the site with the same installer a consumer app uses, so the docs always render the current source.
| Path | Contents |
|---|---|
registry/ui/ |
The component sources, one .vibe file per part. |
registry/lib/, registry/styles/ |
The cn() utility and the theme. |
src/ |
The CLI and installer. |
site/src/content/ |
Documentation pages in Markdown. <Example name="..." /> embeds a live example from site/src/examples/; <Installation /> renders the install instructions. |
site/src/examples/ |
Example components. Each one is rendered live and shown as code. |
- Add the source to
registry/ui/and its entry tosrc/registry.ts. - Add examples to
site/src/examples/and a page tosite/src/content/components/. - Cover its behavior in
test/components.vibe.test.tsand its page intest/site.integration.test.ts. - Run
pnpm changesetto describe the change.
pnpm check
pnpm test:integrationpnpm check runs formatting, lint, TypeScript and the unit and component tests with 100% per-file coverage of the CLI. pnpm test:integration builds everything, installs the packed npm artifact into a temporary app, validates the registry payloads and drives the documentation site in Chromium.
Releases use changesets and .github/workflows/release.yml, which publishes to npm through trusted publishing with provenance. pnpm build writes the site to site/dist/, including the registry JSON under /r/; npx wrangler deploy publishes it as the vibecn Cloudflare Worker configured in wrangler.jsonc.
MIT. See LICENSE, THIRD-PARTY-NOTICES.md and the upstream revision recorded there. Source installation includes both project and upstream MIT notices in vibecn.LICENSE.