Get started.
Your first component in a minute.

1. 1

   Set up shadcn

   Skip this if your project already has a components.json. You need React and Tailwind CSS v4; Next.js is what we test on.

   npx

   npxpnpmbunxyarn

   shadcn@latestinit
2. 2

   Add Popup

   Its source lands in components/detent, ready to change. The first install also brings the Detent theme, and anything a piece needs, like motion, comes with it.

   npx

   npxpnpmbunxyarn

   shadcn addpopup
3. 3

   Use it

   Import it like any of your own components.

   app/page.tsx

   import { Popup } from '@/components/detent/components/popup/Popup'
   
   export default function Page() {
     return (
       <Popup
         label="Repeat"
         options={['Every day', 'Weekdays', 'Never']}
         defaultValue="Every day"
       />
     )
   }

4. 4

   Respect reduced motion

   Wrap your app once. Everything Detent animates then calms down for people who’ve asked their device for less motion.

   app/layout.tsx

   import { MotionConfig } from 'motion/react'
   
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <body>
           <MotionConfig reducedMotion="user">{children}</MotionConfig>
         </body>
       </html>
     )
   }

1. 1

   Make a key

   After you buy, make one on your account page. One per machine, and one for CI.

2. 2

   Add the registry

   In components.json, beside what shadcn already wrote there.

   components.json

   {
     "registries": {
       "@detent-pro": {
         "url": "https://detentui.com/r/pro/{name}.json",
         "headers": { "Authorization": "Bearer ${DETENT_PRO_KEY}" }
       }
     }
   }

3. 3

   Add your key

   In .env.local, out of git. Give CI and your host the same variable.

   .env.local

   DETENT_PRO_KEY=dtnt_your-key

4. 4

   Install anything

   Components and blocks by name, from their pages.

   npx

   npxpnpmbunxyarn

   shadcn add @detent-pro/glyph

Still stuck? Write to hello@detentui.com and we’ll help.