Component registry 16 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.

19.
16 components toolbar · loader · particle/social/slide-text buttons
avatar-picker · team-selector · action / ai-input search
attract-button · command-button
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
These are React components — they do not render live in this static preview garden, and that is expected. This card is the manifest, not a playground. The registry layer adopts third-party component design and is not editorial-doctrine gated — the rest of preview/ is the doctrine surface. Color is the only thing the contract enforces here: every item resolves through the contract tokens. For the components running and theme-switchable, see the live demo — fourteen rendered against the contract with the 8-theme switcher; two more (type-writer, attract-button) are installable but held off the grid (reflow + decorative-hover noise).
§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
01
toolbarMulti-action toolbar
component
npx shadcn@latest add …/r/toolbar.json
02
loaderConcentric conic loader
component
npx shadcn@latest add …/r/loader.json
03
particle-buttonButton with a particle burst
component
npx shadcn@latest add …/r/particle-button.json
04
social-buttonExpanding share-channel row
component
npx shadcn@latest add …/r/social-button.json
05
slide-text-buttonVertical text-slide link button
component
npx shadcn@latest add …/r/slide-text-button.json
06
avatar-pickerProfile-setup card
component
npx shadcn@latest add …/r/avatar-picker.json
07
team-selectorAvatar-stack stepper
component
npx shadcn@latest add …/r/team-selector.json
08
action-search-barCommand-style search
component
npx shadcn@latest add …/r/action-search-bar.json
09
ai-input-searchAuto-resizing prompt input
component
npx shadcn@latest add …/r/ai-input-search.json
10
attract-buttonMagnet-attracting particle button
component
npx shadcn@latest add …/r/attract-button.json
11
command-buttonCMD-K affordance button
component
npx shadcn@latest add …/r/command-button.json
12
type-writerSequenced typing + caret
component
npx shadcn@latest add …/r/type-writer.json
13
dynamic-textCycling-greeting reveal
component
npx shadcn@latest add …/r/dynamic-text.json
14
sliced-textHover-driven sliced-letter reveal
component
npx shadcn@latest add …/r/sliced-text.json
15
scroll-textScroll-locked active word
component
npx shadcn@latest add …/r/scroll-text.json
16
shimmer-textSingle-gradient shimmer sweep
component
npx shadcn@latest add …/r/shimmer-text.json
17
utilscn() class composer
lib
npx shadcn@latest add …/r/utils.json
18
use-debounceDebounces a changing value
hook
npx shadcn@latest add …/r/use-debounce.json
19
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.

The sixteen components are adapted from KokonutUI, used 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