Component registry 21 compatibility items · full catalog linked below

Install the source. Own the page.

Start with one default

Use the installable starter and defaults by job. The source registry is the recommended React install path.

The full catalog has 62 published items: base styles, components, evidence grammars and specialist compositions. The family below remains installable for existing consumers. Use the inventory to see each item's role.

21.

Compatibility family · 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

A static manifest. One live action-search-bar island below proves the runtime.

§1 · How you consume it

Every item installs with the shadcn CLI from its r/<name>.json manifest.

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

Prerequisite: do Option A first (contract.css + shadcn.css). See ADOPTING.md §Option A.

§2 · The first 21 of 62 registry items

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

Names link to the live manifest. Swap the red leaf for any other name. Full list: registry.json.

№

Name · manifest

Kind

Install

toolbarMulti-action toolbar

component

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

loaderConcentric conic loader

component

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

particle-buttonButton with a particle burst

component

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

social-buttonExpanding share-channel row

component

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

slide-text-buttonVertical text-slide link button

component

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

avatar-pickerProfile-setup card

component

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

team-selectorAvatar-stack stepper

component

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

action-search-barCommand-style search

component

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

ai-input-searchAuto-resizing prompt input

component

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

attract-buttonMagnet-attracting particle button

component

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

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

component

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

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

component

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

command-buttonCMD-K affordance button

component

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

type-writerSequenced typing + caret

component

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

dynamic-textCycling-greeting reveal

component

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

sliced-textHover-driven sliced-letter reveal

component

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

scroll-textScroll-locked active word

component

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

shimmer-textSingle-gradient shimmer sweep

component

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

utilscn() class composer

lib

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

use-debounceDebounces a changing value

hook

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

use-auto-resize-textareaGrows a textarea with content

hook

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

§3 · Running here, in /preview/

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

React islands: add a [data-kokonut] placeholder and the script tag (#443).

§4 · Where the shapes come from

KokonutUI, MIT — kept as authored.

Of the 21 shown, 18 are components (17 KokonutUI, 1 Motion Primitives), plus 2 hooks and a helper. All MIT (see Motion). Only color is remapped.

Registry registry.json → r/*.json · Install npx shadcn@4.19.0 add · Color bridged to the contract