Installation

Add Reflet UI components to any project that uses shadcn/ui.

Prerequisites

A project with shadcn/ui initialized
React 18 or 19
Tailwind CSS v4

Install a component

Use the shadcn CLI to install components directly from the Reflet registry:

Sweep Corner

npx shadcn add https://www.reflet.app/r/feedback-sweep-corner.json

Minimal Notch

npx shadcn add https://www.reflet.app/r/feedback-minimal-notch.json

Editorial Feed

npx shadcn add https://www.reflet.app/r/feedback-editorial-feed.json

What gets installed

Each command creates a component file in your components/ui/ directory. The component is fully self-contained — no external runtime dependencies beyond what shadcn already provides.

components/
  ui/
    feedback-sweep-corner.tsx    ← installed component
    feedback-minimal-notch.tsx
    feedback-editorial-feed.tsx

Usage

Import and use the component with your data:

import { FeedbackSweepCorner } from "@/components/ui/feedback-sweep-corner";

const item = {
  id: "1",
  title: "Add dark mode support",
  description: "Would love to see a dark mode option.",
  status: "planned",
  voteCount: 42,
  commentCount: 7,
  hasVoted: false,
  createdAt: Date.now() - 86400000,
  tags: [{ id: "1", name: "UI", color: "blue" }],
  organizationStatus: { id: "s1", name: "Planned", color: "purple" },
  author: { name: "Jane", isExternal: true },
};

<FeedbackSweepCorner
  item={item}
  onVote={(id) => console.log("voted", id)}
/>

Connecting to Reflet SDK

These components are presentational — they accept data via props and don't depend on any backend. To connect them to live Reflet data, use the Reflet SDK hooks like useFeedbackList() and pass the items as props.