Feedback01
Approval Gate
An inline request from an agent to run a command: the tool, the command, a clock that holds while you read, and two keys to answer with.
new2 deps
Copy the code.Keep the code.
Animated React components that install into your repo and stay there.
- Components
- 07
- Categories
- 04
- WCAG 2.2
- AA
- Licence
- MIT
Install
Straight into your project
Join UI is a shadcn-compatible registry. Point the CLI at the @joinui namespace and it resolves dependencies, writes the files and leaves the rest of your codebase alone.
pnpm dlx shadcn@latest add @joinui/<component>Featured
Start with these
The components most projects reach for first.
- Text Effects02
Carbon Copy
A headline that is set, then copied: the first line inks up, and each line after it peels off the last with the changed words turning over.
new1 dep - Marketing03
Glass Crest
A hero section led by an arc of tinted glass discs, solved from a count and a spread, that assembles on mount and then answers only the pointer.
newUpdated1 dep - Feedback04
Tool Trace
A run log for agent tool calls: the step in flight opens itself, writes its output a line at a time, then folds away and goes still.
newUpdated2 deps
Browse by category
Recently added
Newest in the registry
The most recent additions, newest first.
- Data Display01
Agent Hive
A honeycomb of frosted glass with one tinted tile that travels to whatever you pick, an action, and the queue of runs it dispatches.
stable1 dep - Data Display02
Focus Stack
A coil of pills that keeps one item in focus and lets the rest twist away, turned either by a timer or by the page scroll.
stableUpdated1 dep - Data Display03
Status Timeline
A colour-coded step tracker for orders, deployments and onboarding, still at rest and animated only when a step advances.
stableUpdated2 deps
Principles
Built like a developer tool
Six rules the registry is held to, each one carrying the artefact it cashes out as — the path, the property, the command. They are the reason a component can be dropped into an existing codebase without a migration, and the reason the source is worth reading once it lands there.
Open code, not a black box
The CLI writes real files into your repository. Read them, edit them, delete the parts you do not need — there is no wrapper package to fight.
components/joinui/*.tsx
One click to an AI-ready prompt
Every component page ships a structured prompt with props, accessibility rules and the full source, generated from the same metadata that builds the page.
Copy prompt → prompt.txt
WCAG 2.2 AA as the baseline
Keyboard paths, focus management, live regions and reduced-motion fallbacks are part of each component, not a later pass.
:focus-visible · aria-live
Animation that stays cheap
Transform and opacity only, listeners scoped to the viewport, and every effect degrading to a static state when motion is turned down.
transform · opacity
A real shadcn registry
Namespaced items, resolved dependencies and validated schemas — installable by name or by URL, from any project.
@joinui/<component>
Typed end to end
Strict TypeScript with exported prop types. No `any`, no ambient globals, no build-time surprises.
tsc --noEmit
For agents
Hand the whole component to your agent
One button copies a structured brief: the stack, the install path, dependencies, every supported prop, the accessibility and motion requirements, and the complete source. Built from the same metadata as the component page, so it can never describe a prop that does not exist.
prompt.txt
Add the <Component> component to my existing Next.js application. Project stack: - Next.js (App Router) - React 19 with Server Components - TypeScript in strict mode - Tailwind CSS v4 with CSS-variable design tokens Requirements: - Install all required dependencies. - Place the component at components/joinui/<component>.tsx. - Use the project's existing `cn` utility … - Respect `prefers-reduced-motion: reduce`. - Do not modify unrelated files.