Component registry · Subconscious

Component registry 18 components · 2 hooks · 1 lib · installed with the shadcn CLI

Borrowed shapes, our color.

The design system publishes a shadcn-compatible registry. Apps already on Tailwind v4 + shadcn/ui install components straight off Vercel — no copy-paste, no fork. The shapes are KokonutUI (MIT); the color is not. Every item is bridged to the two-token contract, so it recolors with data-theme and data-mode like any other surface.

21.

18 components toolbar · loader · particle/social/slide-text buttons
avatar-picker · team-selector · action / ai-input search
attract-button · command-button · hold-button
image-comparison (motion-primitives · first adoption)
type-writer · dynamic-text · sliced-text · scroll-text · shimmer-text

2 hooks use-debounce · use-auto-resize-textarea
1 lib the cn() class composer

Editor's noteNº 31 · static preview

The registry table below is a static manifest, not twenty-one eager React mounts. One live action-search-bar island appears below the table to prove the static-page runtime; the complete interactive inventory stays in the live demo. The registry layer adopts third-party component design and is not editorial-doctrine gated — the rest of preview/ is the doctrine surface. Every item still resolves through the contract tokens. Two installable components (type-writer, attract-button) remain outside the demo grid because their reflow or decorative-hover noise does not earn a default slot.

§1 · How you consume it

Every item installs the same way — the standard shadcn CLI, pointed at the item's r/<name>.json manifest on Pages. The CLI resolves registryDependencies on its own: the utils lib, the hooks, and shadcn primitives such as button / input / card / textarea.

$ npx shadcn@latest add https://design.subconscious.ai/r/toolbar.json

Prerequisite — the app's shadcn variables must already resolve to the contract pair. Do Option A first (copy contract.css + shadcn.css) so --background, --foreground, --primary, --border point at --backgroundColor / --color. Registry components carry no color of their own — they render in whatever the contract resolves. Full recipe: ADOPTING.md §Option D.

§2 · The nineteen registry items

Each row is one r/<name>.json manifest.

Names link to the live manifest published verbatim by Vercel. The add column is the exact command — swap the red leaf for any other name.

№

Name · manifest

Kind

Install

toolbarMulti-action toolbar

component

npx shadcn@latest add …/r/toolbar.json

loaderConcentric conic loader

component

npx shadcn@latest add …/r/loader.json

particle-buttonButton with a particle burst

component

npx shadcn@latest add …/r/particle-button.json

social-buttonExpanding share-channel row

component

npx shadcn@latest add …/r/social-button.json

slide-text-buttonVertical text-slide link button

component

npx shadcn@latest add …/r/slide-text-button.json

avatar-pickerProfile-setup card

component

npx shadcn@latest add …/r/avatar-picker.json

team-selectorAvatar-stack stepper

component

npx shadcn@latest add …/r/team-selector.json

action-search-barCommand-style search

component

npx shadcn@latest add …/r/action-search-bar.json

ai-input-searchAuto-resizing prompt input

component

npx shadcn@latest add …/r/ai-input-search.json

attract-buttonMagnet-attracting particle button

component

npx shadcn@latest add …/r/attract-button.json

hold-buttonPress-and-hold to commit — deliberate intent, sustained

component

npx shadcn@latest add …/r/hold-button.json

image-comparisonStated vs revealed in one drag · Motion Primitives, first adoption

component

npx shadcn@latest add …/r/image-comparison.json

command-buttonCMD-K affordance button

component

npx shadcn@latest add …/r/command-button.json

type-writerSequenced typing + caret

component

npx shadcn@latest add …/r/type-writer.json

dynamic-textCycling-greeting reveal

component

npx shadcn@latest add …/r/dynamic-text.json

sliced-textHover-driven sliced-letter reveal

component

npx shadcn@latest add …/r/sliced-text.json

scroll-textScroll-locked active word

component

npx shadcn@latest add …/r/scroll-text.json

shimmer-textSingle-gradient shimmer sweep

component

npx shadcn@latest add …/r/shimmer-text.json

utilscn() class composer

lib

npx shadcn@latest add …/r/utils.json

use-debounceDebounces a changing value

hook

npx shadcn@latest add …/r/use-debounce.json

use-auto-resize-textareaGrows a textarea with content

hook

npx shadcn@latest add …/r/use-auto-resize-textarea.json

§3 · Running here, in /preview/

One component, mounted inline — same DOM as this page.

React-as-islands. The bundle below scans for [data-kokonut] placeholders and renders each into the page DOM. No iframe; no per-page Vite app. Add a placeholder + the script tag and a kokonut component shows up where it belongs. See #443 for the migration sweep.

§4 · Where the shapes come from

KokonutUI, MIT — kept as authored.

Seventeen components are adapted from KokonutUI and one — image-comparison, the first Motion Primitives adoption — from Motion Primitives, both under the MIT license. Their shape and motion are preserved verbatim; only color is remapped to the contract tokens. The registry itself is build tooling plus content — registry.json + scripts/build-registry.mjs emit the r/*.json manifests. It never touches contract.css, derived.css, or _base.css, so the editorial doctrine and its CI gates stay independent of it. tests/registry-tokens.test.mjs gates that registry components stay bridged — no raw Tailwind palette classes, no framework imports.

Registry registry.json → r/*.json · Install npx shadcn@latest add · Shapes KokonutUI · MIT · Color bridged to the contract — theme-tracks · Prerequisite Option A first · Not an npm package · editorial-doctrine gated · live in this static garden