Sweep Corner

A feedback card with a corner vote badge. A gradient sweeps across the card whenever the vote changes.

Preview

Add keyboard shortcuts for common actions

UXFeature

73 days ago

24 389%

Installation

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

Usage

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

<SweepCorner defaultUpvotes={24} defaultDownvotes={3}>
  <SweepCornerCard>
    <SweepCornerContent>
      <SweepCornerTitle>
        Add keyboard shortcuts for common actions
      </SweepCornerTitle>
      <SweepCornerTags>
        <SweepCornerTag color="purple">UX</SweepCornerTag>
        <SweepCornerTag color="green">Feature</SweepCornerTag>
      </SweepCornerTags>
    </SweepCornerContent>
    <SweepCornerFooter comments={7} time="3 days ago" />
  </SweepCornerCard>
  <SweepCornerBadge />
</SweepCorner>

Features

Corner badge with up and down vote buttons and a net count that rolls on change.
A gradient sweeps across the footer each time the vote changes.
Works uncontrolled out of the box, or controlled from your own vote state.
Tag pills read the --tag-* color tokens installed with the component.

API reference

SweepCorner

Root. Holds vote state and shares it with the badge and footer through React context.

Prop	Type	Default	Description
`defaultUpvotes`	`number`	`0`	Initial upvote count when the card manages its own state.
`defaultDownvotes`	`number`	`0`	Initial downvote count when the card manages its own state.
`onVoteChange`	`(voteType: "upvote" \| "downvote" \| null) => void`	None	Called with the new vote after an uncontrolled vote.
`upvotes`	`number`	None	Controlled upvote count. Passing it switches the card to controlled mode.
`downvotes`	`number`	`0`	Controlled downvote count.
`voteType`	`"upvote" \| "downvote" \| null`	`null`	Controlled vote of the current user.
`onVote`	`(direction: "upvote" \| "downvote") => void`	None	Called with the pressed direction in controlled mode. Update upvotes, downvotes and voteType from here.

SweepCornerCard

Card surface with border and hover shadow.

SweepCornerContent

Padded content area that leaves room for the corner badge.

SweepCornerTitle

Title, rendered as an h3.

SweepCornerTags

Wrapping row for tag pills.

SweepCornerTag

A colored tag pill.

Prop	Type	Description
`color`Required	`string`	Color key: blue, brown, green, orange, pink, purple, red, yellow, gray or default.

SweepCornerBadge

Corner vote badge with up and down buttons and the net count. Reads vote state from context.

SweepCornerFooter

Footer with comment count, time, vote totals and upvote share. Plays the sweep when the user votes.

Prop	Type	Description
`comments`Required	`number`	Number of comments.
`time`Required	`string`	Relative time, e.g. "3 days ago".

Every subcomponent also accepts className, merged with its default classes.