# noiceui

> Beautiful copy-paste React + Tailwind components. Install via CLI or let your AI agent do it through MCP.

Registry namespace for shadcn CLI 3.0+: `@noice` -> `https://ui.noicess.fun/r/{name}.json`

Install straight from GitHub (no domain, no components.json entry): `npx shadcn@latest add ishivamgaur/noice-ui/<name>`

## Components

### Button
- Description: Displays a button with multiple variants and sizes.
- Category: General
- Docs: https://ui.noicess.fun/components/button
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/button.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/button`
- Dependencies: class-variance-authority, clsx, tailwind-merge

### Card
- Description: Displays a card with header, content, and footer sections.
- Category: Layout
- Docs: https://ui.noicess.fun/components/card
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/card.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/card`
- Dependencies: clsx, tailwind-merge

### Spotlight
- Description: A container with a soft glow that follows the cursor. Perfect for hero sections.
- Category: Backgrounds
- Docs: https://ui.noicess.fun/components/spotlight
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/spotlight.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/spotlight`
- Dependencies: motion, clsx, tailwind-merge

### Dot Grid
- Description: A dotted texture layer that dissolves outward. Drop it under any section.
- Category: Backgrounds
- Docs: https://ui.noicess.fun/components/dot-grid
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/dot-grid.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/dot-grid`
- Dependencies: clsx, tailwind-merge

### Marquee
- Description: An infinite scrolling row with edge fade. Children loop seamlessly.
- Category: Animation
- Docs: https://ui.noicess.fun/components/marquee
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/marquee.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/marquee`
- Dependencies: clsx, tailwind-merge

### Number Ticker
- Description: Counts up to a value the first time it scrolls into view.
- Category: Text
- Docs: https://ui.noicess.fun/components/number-ticker
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/number-ticker.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/number-ticker`
- Dependencies: motion, clsx, tailwind-merge

### Scroll Progress
- Description: A spring-smoothed bar that tracks document scroll.
- Category: Effects
- Docs: https://ui.noicess.fun/components/scroll-progress
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/scroll-progress.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/scroll-progress`
- Dependencies: motion

### Glare Card
- Description: A card with a soft glare that follows the pointer.
- Category: Effects
- Docs: https://ui.noicess.fun/components/glare-card
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/glare-card.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/glare-card`
- Dependencies: clsx, tailwind-merge

### Animated List
- Description: Reveals its children in sequence when scrolled into view.
- Category: Effects
- Docs: https://ui.noicess.fun/components/animated-list
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/animated-list.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/animated-list`
- Dependencies: motion, clsx, tailwind-merge

### Border Beam
- Description: A light travelling around the border of any element.
- Category: Effects
- Docs: https://ui.noicess.fun/components/border-beam
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/border-beam.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/border-beam`
- Dependencies: clsx, tailwind-merge

### Text Reveal
- Description: Blurs and lifts each word into place, in sequence.
- Category: Text
- Docs: https://ui.noicess.fun/components/text-reveal
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/text-reveal.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/text-reveal`
- Dependencies: motion, clsx, tailwind-merge

### Accordion
- Description: Panels unfold from a hairline, each open on its own.
- Category: General
- Docs: https://ui.noicess.fun/components/accordion
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/accordion.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/accordion`
- Dependencies: clsx, tailwind-merge

### Gauge
- Description: A half-circle meter whose needle springs to the value.
- Category: Animation
- Docs: https://ui.noicess.fun/components/gauge
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/gauge.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/gauge`
- Dependencies: motion, clsx, tailwind-merge

### Loader Set
- Description: Ring, dots, bar, and skeleton, each with a finished state.
- Category: Animation
- Docs: https://ui.noicess.fun/components/loader-set
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/loader-set.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/loader-set`
- Dependencies: clsx, tailwind-merge

### Avatar Stack
- Description: Overlapping avatars that fan out on hover and focus.
- Category: General
- Docs: https://ui.noicess.fun/components/avatar-stack
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/avatar-stack.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/avatar-stack`
- Dependencies: clsx, tailwind-merge

### Number Stepper
- Description: Minus and plus around a display that rolls digit by digit.
- Category: General
- Docs: https://ui.noicess.fun/components/number-stepper
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/number-stepper.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/number-stepper`
- Dependencies: motion, clsx, tailwind-merge

### Expanding Search
- Description: A pill that grows into a real input and stays clickable.
- Category: Navigation
- Docs: https://ui.noicess.fun/components/expanding-search
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/expanding-search.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/expanding-search`
- Dependencies: motion, react-dom, lucide-react, clsx, tailwind-merge

### OTP Input
- Description: One-time-code slots with paste fan-out and success rings.
- Category: General
- Docs: https://ui.noicess.fun/components/otp-input
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/otp-input.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/otp-input`
- Dependencies: motion, clsx, tailwind-merge

### Code Block
- Description: Framed code with line numbers and copy, no highlighter needed.
- Category: General
- Docs: https://ui.noicess.fun/components/code-block
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/code-block.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/code-block`
- Dependencies: lucide-react, clsx, tailwind-merge

### Gooey Nav
- Description: Segmented nav where the active pill melts between stops.
- Category: Navigation
- Docs: https://ui.noicess.fun/components/gooey-nav
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/gooey-nav.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/gooey-nav`
- Dependencies: motion, clsx, tailwind-merge

### Magnetic Button
- Description: A button that leans toward the cursor, then settles.
- Category: Animation
- Docs: https://ui.noicess.fun/components/magnetic-button
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/magnetic-button.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/magnetic-button`
- Dependencies: motion, clsx, tailwind-merge

### Text Scramble
- Description: Headlines that decode through glyphs, left to right.
- Category: Text
- Docs: https://ui.noicess.fun/components/text-scramble
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/text-scramble.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/text-scramble`
- Dependencies: motion, clsx, tailwind-merge

### Compare Slider
- Description: Before and after split by a draggable divider.
- Category: Layout
- Docs: https://ui.noicess.fun/components/compare-slider
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/compare-slider.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/compare-slider`
- Dependencies: motion, clsx, tailwind-merge

### Slide to Confirm
- Description: A knob that must travel to commit, flicks count too.
- Category: General
- Docs: https://ui.noicess.fun/components/slide-to-confirm
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/slide-to-confirm.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/slide-to-confirm`
- Dependencies: motion, lucide-react, clsx, tailwind-merge

### Hold to Delete
- Description: A destructive action that only fires if you keep holding.
- Category: Animation
- Docs: https://ui.noicess.fun/components/hold-to-delete
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/hold-to-delete.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/hold-to-delete`
- Dependencies: motion, lucide-react, clsx, tailwind-merge

### Tilt Card
- Description: A card that tips toward the pointer with real perspective.
- Category: Animation
- Docs: https://ui.noicess.fun/components/tilt-card
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/tilt-card.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/tilt-card`
- Dependencies: motion, clsx, tailwind-merge

### Segmented Control
- Description: A radio group where the selection pill stretches as it travels.
- Category: Navigation
- Docs: https://ui.noicess.fun/components/segmented-control
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/segmented-control.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/segmented-control`
- Dependencies: motion, clsx, tailwind-merge

### Sparkline
- Description: A self-drawing line chart that scales to any width.
- Category: Data
- Docs: https://ui.noicess.fun/components/sparkline
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/sparkline.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/sparkline`
- Dependencies: motion, clsx, tailwind-merge

### Task List
- Description: Checklist where finishing a row sweeps a strike across it.
- Category: General
- Docs: https://ui.noicess.fun/components/task-list
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/task-list.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/task-list`
- Dependencies: motion, clsx, tailwind-merge

### Word Rotator
- Description: Cycles words by moving the letters they share.
- Category: Text
- Docs: https://ui.noicess.fun/components/word-rotator
- Install: `npx shadcn@latest add https://ui.noicess.fun/r/word-rotator.json`
- Install (GitHub): `npx shadcn@latest add ishivamgaur/noice-ui/word-rotator`
- Dependencies: motion, clsx, tailwind-merge

## Docs

- Installation: https://ui.noicess.fun/docs/installation
- Theming: https://ui.noicess.fun/docs/theming
- MCP (AI agents): https://ui.noicess.fun/docs/mcp