Installation

Prerequisites

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

Install a component

Install any component from the Reflet registry with the shadcn CLI.

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

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

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

$ npx shadcn add https://www.reflet.app/r/milestone-track-view.json

$ npx shadcn add https://www.reflet.app/r/milestone-editorial-accordion.json

$ npx shadcn add https://www.reflet.app/r/milestone-dashboard-timeline.json

What gets installed

Each command adds one component file to your components/ui/ directory, adds the --tag-* color tokens to your CSS, and installs the packages the component needs: motion, clsx, tailwind-merge and, for the feedback cards, @phosphor-icons/react.

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

Usage

Compose the subcomponents and pass your data as children and props.

import {
  SweepCorner,
  SweepCornerBadge,
  SweepCornerCard,
  SweepCornerContent,
  SweepCornerFooter,
  SweepCornerTitle,
} from "@/components/ui/feedback-sweep-corner";

<SweepCorner defaultUpvotes={42} onVoteChange={(vote) => console.log(vote)}>
  <SweepCornerCard>
    <SweepCornerContent>
      <SweepCornerTitle>Add dark mode support</SweepCornerTitle>
    </SweepCornerContent>
    <SweepCornerBadge />
    <SweepCornerFooter comments={7} time="1 day ago" />
  </SweepCornerCard>
</SweepCorner>

Connect to Reflet data

These components are presentational: they take data through props and don’t call any backend. To show live Reflet data, fetch it with Reflet SDK hooks such as useFeedbackList() and pass the items in.