Prism Bits
Docs

How Prism Bits works.

Prism Bits is a copy-first component library: discover a bit, preview it, copy the source, then shape it to your product.

Browse components

Find UI bits by category, tag, difficulty, or use case.

Preview variants

Inspect the component in context before copying it into a project.

Copy code

Use source-first components designed to be readable and portable.

Customize

Adjust tokens, props, and styles without fighting a heavy abstraction.

Contribute

Add components through a simple registry structure and clear metadata.

Contributor guide

Add a component without guessing the structure.

Prism Bits keeps component contributions close to their framework and category. Every bit needs source files and a small metadata file. No manual registration is required.

  1. 1Pick a framework and category folder under registry.
  2. 2Create a slug folder for your bit, like react/buttons/glass-cta.
  3. 3Add the component source, optional preview.tsx for React, and meta.json. The site discovers it automatically.
  4. 4Run npm run dev and open /components/<category>/<slug> to check the live preview.
  5. 5Run npm run validate:registry, npm run lint, and npm run build before opening a pull request.

Folder examples

registry/react/buttons/glass-cta/component.tsx

registry/html-css-js/buttons/retro-shadow-button/index.html

registry/css-only/loaders/pulse-loader/style.css

registry/vue/modals/soft-modal/component.vue

registry/svelte/footers/project-footer/component.svelte

Live preview support

React, HTML/CSS/JS, and CSS-only components support live preview today.

Vue and Svelte components currently show code view only.

meta.json minimum

{
  "name": "Glass CTA",
  "slug": "glass-cta",
  "category": "buttons",
  "framework": "react",
  "description": "A polished call-to-action button pair.",
  "tags": ["button", "cta", "glass"],
  "status": "available",
  "author": {
    "name": "Contributor Name",
    "github": "github-username"
  }
}