Skip to content
Notchset

Introduction

Notchset's Notchset components and charts are source files you own. The shadcn CLI copies them into your project, together with a small foundation of motion timings and shared marks. There is no runtime package to keep up to date.

What you get

  • 165 Notchset components, 82 of them free under MIT: actions, inputs and pickers, overlays, feedback, data views, charts and AI interfaces.
  • Your stack. React 19 and Tailwind CSS v4, with a Base UI build and a Radix build of every item. The shadcn CLI installs the one that matches your project.
  • Your code. Files land in your repo. Read them, change them, ship them. There is no runtime package.
  • Your brand. Names, logos and sample text are props, and your shadcn palette carries through (Theming).

Quick start

In a React 19 + Tailwind v4 app that already has a components.json:

  1. Pick a component in the sidebar and try its live preview.
  2. Copy its install command (free items need no account):
Terminal
# Base UI project (base-* style in components.json)
npx shadcn@latest add https://notchset.dev/r/button.json

# Radix project (radix-*, new-york or default style)
npx shadcn@latest add https://notchset.dev/r/radix-nova/button.json
  1. Import it and pass your content:
app/page.tsx
import { Button } from "@/components/ui/notchset/button";

export default function Page() {
  return <Button>Create workspace</Button>;
}

That's all. Installation covers requirements, Radix projects and the registry setup that makes every later install a short name.

Requirements and sound are on Installation.

Next

  • Theming: keep your palette, or use Notchset's.
  • Motion: how it moves, and switching it off.
  • AI and MCP: let your AI tools find and install the right piece.
  • Pro setup: install Pro items with your key.