---
name: "@bits-ui"
slug: "bits-ui"
description: "Bits UI — a curated, open-source registry of reusable React & Next.js components, hooks, and utilities (shadcn-compatible). Focused on accessibility, composability, and production-ready primitives to accelerate design systems and developer workflows."
category: "Forms"
tags: ["accessibility", "blocks", "design-system", "forms", "hooks", "media"]
framework: "react"
license: null
author: "chisomuma"
website: "https://bits-ui.netlify.app"
github: "https://github.com/chisomuma/bits-ui"
registry: "https://bits-ui.netlify.app/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 6
generated_at: "2026-09-21T01:50:16.753Z"
---

# @bits-ui

Bits UI — a curated, open-source registry of reusable React & Next.js components, hooks, and utilities (shadcn-compatible). Focused on accessibility, composability, and production-ready primitives to accelerate design systems and developer workflows.

## Links

- Website: https://bits-ui.netlify.app
- GitHub: https://github.com/chisomuma/bits-ui
- Registry JSON: https://bits-ui.netlify.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/bits-ui
- This file: https://sh4dcn.vercel.app/md/bits-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://bits-ui.netlify.app/r/registry.json
pnpm dlx shadcn@latest add https://bits-ui.netlify.app/r/registry.json
bunx shadcn@latest add https://bits-ui.netlify.app/r/registry.json
# clone the source repo
git clone https://github.com/chisomuma/bits-ui.git
# fetch the raw registry index
curl -s https://bits-ui.netlify.app/r/registry.json
```

## Components (6)

| name | type | description | install |
| --- | --- | --- | --- |
| complex-component | registry:component | A complex component showing hooks, libs and components. | `npx shadcn@latest add https://bits-ui.netlify.app/r/complex-component.json` |
| example-with-css | registry:component | A login form with a CSS file. | `npx shadcn@latest add https://bits-ui.netlify.app/r/example-with-css.json` |
| color-palette | registry:component | Generate and copy curated color palettes for design work. | `npx shadcn@latest add https://bits-ui.netlify.app/r/color-palette.json` |
| json-formatter | registry:component | A simple, fast tool to format, minify, copy, or download JSON payloads for debugging and sharing. | `npx shadcn@latest add https://bits-ui.netlify.app/r/json-formatter.json` |
| star-rating | registry:component | A small, accessible star rating component for reviews and feedback collection. | `npx shadcn@latest add https://bits-ui.netlify.app/r/star-rating.json` |
| hero-carousel | registry:component | A 3-step hero carousel with animated step cards for landing pages. | `npx shadcn@latest add https://bits-ui.netlify.app/r/hero-carousel.json` |

## For AI agents

```text
You are adding components from @bits-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/bits-ui.md) for the component list.
2. Fetch the machine-readable index: https://bits-ui.netlify.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: bits-ui).
```