# Introduction

A template for building and publishing your own shadcn registry components.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



A **ready-to-use template** for creating and publishing custom components to the [shadcn registry](https://ui.shadcn.com/docs/registry).

## What You Get [#what-you-get]

* 📦 **Simple structure** - One component file + one config file
* 📚 **Documentation site** - Powered by Fumadocs
* 🎨 **Registry compatible** - Works with `npx shadcn add`
* 🤖 **[Agent ready](https://www.mintlify.com/score/startercn)** - Ships with `llms.txt`, `llms-full.txt`, API catalog routes, and agent skill discovery endpoints
* 🔊 **[Web audio feedback](https://audio.raphaelsalaja.com/)** - Built-in interaction sounds powered by `@web-kits/audio`
* 📳 **[Web haptics](https://haptics.lochie.me/)** - Optional haptic feedback for supported devices via `web-haptics`
* ✨ **[Motion animations](https://motion.dev/)** - Uses `motion` for animated UI states and transitions
* 🎯 **[Animated icons](https://lucide-animated.com/)** - Includes reusable animated icons for buttons, sharing, and navigation
* 🔄 **[View transitions](https://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition)** - Uses Next.js view transitions for smoother page changes
* 🚀 **Deploy ready** - Deploy anywhere

## Tech Stack [#tech-stack]

* `Next.js 16` + App Router
* `React 19`
* `Tailwind CSS 4`
* `Fumadocs`
* `motion`
* `@web-kits/audio`
* `web-haptics`
* `shiki` + `rehype-pretty-code`

## How It Works [#how-it-works]

1. Edit your component at `registry/new-york/your-component.tsx`
2. Update `registry.json` with your component name and details
3. Run `pnpm registry:build`

That's it. Deploy your app and users can install your component:

```bash
npx shadcn@latest add https://your-site.com/r/your-component.json
```

## FAQ [#faq]

<Accordion type="multiple">
  <AccordionItem value="faq-1">
    <AccordionTrigger>
      Why copy/paste instead of npm packages?
    </AccordionTrigger>

    <AccordionContent>
      The shadcn philosophy gives you **ownership** of the code. You can customize components to your exact needs without fighting library constraints.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-2">
    <AccordionTrigger>
      Which frameworks are supported?
    </AccordionTrigger>

    <AccordionContent>
      Any React framework: Next.js, Remix, Astro, Gatsby, Vite, etc.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-3">
    <AccordionTrigger>
      Can I publish multiple components?
    </AccordionTrigger>

    <AccordionContent>
      Yes! Add more files to `registry/new-york/` and list them in `registry.json`.
    </AccordionContent>
  </AccordionItem>
</Accordion>