https://github.com/dedevsclub/vibes-ui
Registry UI for the vibes
https://github.com/dedevsclub/vibes-ui
Last synced: 10 months ago
JSON representation
Registry UI for the vibes
- Host: GitHub
- URL: https://github.com/dedevsclub/vibes-ui
- Owner: DeDevsClub
- Created: 2025-07-01T18:33:29.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-01T19:31:59.000Z (12 months ago)
- Last Synced: 2025-08-30T00:53:18.242Z (10 months ago)
- Language: TypeScript
- Homepage: https://vibes-ui-gamma.vercel.app
- Size: 1.39 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Registry Starter is a free, open-source template built with Next.js and Shadcn/ui Registry to accelerate your AI-Native Design System.
Deploy Your Own ·
Open in v0 ·
Theming ·
Running Locally ·
File Structure ·
Read Docs
## Deploy Your Own
You can deploy your own version of the Next.js Registry Starter to Vercel with one click:
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdedevsclub%2Fvibes-ui&project-name=my-registry&repository-name=my-registry&demo-title=Registry%20Starter&demo-description=Registry%20Starter%20is%20a%20free%2C%20open-source%20template%20built%20with%20Next.js%20and%20Shadcn%2Fui%20Registry%20to%20accelerate%20your%20AI-Native%20Design%20System.&demo-url=https%3A%2F%2Fui.vibes.guide&demo-image=%2F%2Fui.vibes.guide%2Fpreview.png)
## Open in v0
[](https://v0.dev/chat/api/open?title=Dashboard+Kit&prompt=These+are+existing+design+system+styles+and+files.+Please+utilize+them+alongside+base+components+to+build.&url=https%3A%2F%2Fui.vibes.guide%2Fr%2Fdashboard.json)
This registry application also exposes `Open in v0` buttons for each component. Once this application is deployed, the
`Open in v0` button redirects to [`v0.dev`](https://v0.dev) with a prepopulated prompt and a URL pointing back to this
registry's `/r/${component_name}.json` endpoint. This endpoint will provide v0 the necessary file information, content,
and metadata to start your v0 chat with your component, theme, and other related code.
These `/r/${component_name}.json` files are generated using `shadcn/ui` during the `build` and `dev` based on the
repository's [`registry.json`](./registry.json). For more information, refer to the
[documentation](https://ui.shadcn.com/docs/registry/registry-json).
## Theming
To use a custom theme for all the components, all you need to do is modify the CSS tokens in
[`tokens.css`](./src/app/tokens.css). More information on these practices can be found
on [ui.shadcn.com/docs](https://ui.shadcn.com/docs).
#### MCP
To use this registry with MCP, you must also edit [`registry.json`](./registry.json)'s first
`registry-item` named `registry`. This `registry:style` item also contains your design tokens that can be used with MCP.
For example, it looks like this:
```json
{
"name": "registry",
"type": "registry:style",
"cssVars": {
"light": {
"primary": "oklch(0.52 0.13 144.17)",
"primary-foreground": "oklch(1.0 0 0)",
"radius": "0.5rem",
...
},
"dark": {
"primary": "oklch(0.52 0.13 144.17)",
"primary-foreground": "oklch(1.0 0 0)",
...
}
},
"files": []
}
```
#### Fonts
To use custom fonts, you can either use [
`next/font/google`](https://nextjs.org/docs/pages/getting-started/fonts#google-fonts) or the [
`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) CSS rule. For example, `fonts.css` might look
like:
```css
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW5rygbi49c.woff2') format('woff2'),
url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW5rygbj49c.woff') format('woff');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD-w.woff2') format('woff2'),
url('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3g3D_w.woff') format('woff');
}
```
If you use `@font-face`, you will also need to modify [`tailwind.css`](src/app/tailwind.css) AND
[`tailwind.config.ts`](src/app/tailwind.config.ts) to map your custom fonts to Tailwind. Refer to this
[Tailwind documentation](https://tailwindcss.com/docs/font-family#customizing-your-theme)
## Running locally
```bash
pnpm install
pnpm dev
```
Your app should now be running on [localhost:3000](http://localhost:3000).
## File Structure
`app/(design)` routes contains the registry pages.
`app/starters` routes contains various starters (using either `minimal` and `shell` layouts)
`@/components` contains all compound components used in the registry
`@/components/ui` contains all base `shadcn/ui` used in the registry
`@/components/design` contains all components for this application
`@/hooks` contains all React hooks
`@/lib` contains all business logic & utils