Skip to content
Join UI

@joinui — open-code component registry

Components
you actually own

Accessible, animated React components for Next.js. Install them with the shadcn CLI, copy the source, or hand the generated prompt to your coding agent.

Browse componentsGet started
Components
02
Categories
01
Zero-dependency
00

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.

Registry setupFull installation guide
pnpm dlx shadcn@latest add @joinui/<component>

Principles

Built like a developer tool

  1. 01

    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.

  2. 02

    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.

  3. 03

    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.

  4. 04

    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.

  5. 05

    A real shadcn registry

    Namespaced items, resolved dependencies and validated schemas — installable by name or by URL, from any project.

  6. 06

    Typed end to end

    Strict TypeScript with exported prop types. No `any`, no ambient globals, no build-time surprises.

Featured

Start with these

The components most projects reach for first.

View all components
  • Data Display01

    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.

    new1 dep
  • Data Display02

    Status Timeline

    A colour-coded step tracker for orders, deployments and onboarding, still at rest and animated only when a step advances.

    new2 deps

Catalog

Browse by category

Every category that currently holds at least one component.

Recently added

Newest in the registry

The most recent additions, newest first.

See the full catalog
  • Data Display01

    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.

    new1 dep
  • Data Display02

    Status Timeline

    A colour-coded step tracker for orders, deployments and onboarding, still at rest and animated only when a step advances.

    new2 deps

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.

How the prompt is built

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.