Docs
shadcn/ui
Overview

shadcn/ui Components

Pre-built FeatureDrop components that use shadcn/ui primitives for UI and FeatureDrop hooks for logic. They inherit your project's theme — no style conflicts, no extra CSS.

These components require both featuredrop and a shadcn/ui (opens in a new tab) setup in your project.

Install via CLI

npx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json

This drops a fully typed TSX file into your components/featuredrop/ directory. You own the code — customize freely.

Prerequisites

  1. A React project with shadcn/ui initialized (opens in a new tab)
  2. featuredrop installed:
npm install featuredrop
  1. A FeatureDropProvider wrapping your app:
import { FeatureDropProvider } from 'featuredrop/react'
import { LocalStorageAdapter } from 'featuredrop'
 
const manifest = [/* your features */]
const storage = new LocalStorageAdapter()
 
export default function App({ children }) {
  return (
    <FeatureDropProvider manifest={manifest} storage={storage}>
      {children}
    </FeatureDropProvider>
  )
}

Available Components

How It Works

Each component:

  • Imports hooks from featuredrop/react/hooks (data + actions, zero JSX)
  • Imports shadcn primitives from @/components/ui/...
  • Uses Tailwind utilities + shadcn CSS variables — works with both default and new-york styles
  • Ships as a "use client" component

The shadcn CLI handles dependency resolution. When you install changelog-widget, it auto-installs the required shadcn primitives (sheet, badge, scroll-area, button, separator) if they're not already present.

Custom Registry URL

If you're self-hosting docs, point the CLI at your own domain:

npx shadcn@latest add https://your-domain.com/r/changelog-widget.json