Programmatic Website Design Components.
Branded, composable, pre-wired. Each one ships as a single shadcn-CLI install — one command, full TypeScript source dropped straight into your project. Use them as-is or tear them apart and remix.
npx shadcn@latest add https://0nmcp.com/r/<name>.jsonOverlays
5 componentsSpotlight
A keyboard-driven cmd+k command palette. Drop into any app to give users one place to jump anywhere — search, navigate, run commands.
npx shadcn@latest add https://0nmcp.com/r/0n-spotlight.json- App-wide cmd+k search
- Power-user navigation between sections
- Action launcher with keyboard shortcuts
depends on: button, dialog, input
Modal Box
Pre-composed centered dialog with title, description, body, and footer slots. Drop in a trigger, get a working modal — no Dialog plumbing.
npx shadcn@latest add https://0nmcp.com/r/0n-modal-box.json- Confirm/cancel before destructive actions
- Compose forms that interrupt the page
- Single-step task flows
depends on: button, dialog
Bottom Pull
Mobile-friendly bottom-anchored drawer with title, body, and footer slots. Pre-composed so you don’t plumb every Drawer subcomponent.
npx shadcn@latest add https://0nmcp.com/r/0n-bottom-pull.json- Mobile filter or sort sheets
- Quick-action menus that need keyboard space
- Multi-step wizards on phones
depends on: button, drawer
Side Slider
Edge-anchored slide-in panel with header + body slots. Pre-composed Sheet wrapper for filter drawers, inspectors, and detail panes.
npx shadcn@latest add https://0nmcp.com/r/0n-side-slider.json- Filter / sort panels on desktop
- Detail inspectors next to a list view
- Mobile nav drawers (left side)
depends on: sheet
Pop Bubble
Anchored floating panel for inline detail. Pre-composed Popover wrapper with positioning + raw-mode flag for edge-to-edge content like calendars.
npx shadcn@latest add https://0nmcp.com/r/0n-pop-bubble.json- Date / time pickers anchored to an input
- Color picker popovers
- Inline link or user-mention previews
depends on: popover
Controls
3 componentsFlip Tile
Two-state toggle button with aria-pressed support. Controlled or uncontrolled. Drop in for like/save/star/mute interactions.
npx shadcn@latest add https://0nmcp.com/r/0n-flip-tile.json- Heart / favorite buttons
- Star / pin interactions
- Single binary settings
depends on: button
Pick Strip
Horizontal multi-select toggle group. Editor toolbars, formatting controls, filter chips — anywhere people pick several options.
npx shadcn@latest add https://0nmcp.com/r/0n-pick-strip.json- Editor formatting toolbar (bold/italic/underline)
- Filter chip rows
- Multi-select tag pickers
depends on: button
Drop Pick
Controlled or uncontrolled select dropdown with built-in label, placeholder, and options array. Replaces 6 lines of Select boilerplate with one component.
npx shadcn@latest add https://0nmcp.com/r/0n-drop-pick.json- Plan / tier picker
- Sort-order selector
- Country / language picker
depends on: select, label
Want them inside your AI editor?
0nMCP exposes this entire registry as MCP tools. Connect 0nMCP to Claude, Cursor, or Windsurf — then ask for "a confirm modal" and your editor drops the source in.