Sweep Corner

A feedback card with a corner vote badge featuring animated up/down buttons and a gradient sweep effect on vote.

Preview

Add keyboard shortcuts for common actions

UXFeature

73 days ago

24↑ 3↓89%

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>

API Reference

`SweepCorner`

Root provider. Manages vote state via React context.

Prop	Type	Description
`defaultUpvotes`*	`number`	Initial upvote count.
`defaultDownvotes`*	`number`	Initial downvote count.
`onVoteChange`	`(voteType: VoteType) => void`	Callback fired when the vote changes.

`SweepCornerCard`

Card container with rounded border, hover shadow, and transition.

`SweepCornerContent`

Content area with padding. Leaves right padding for the badge.

`SweepCornerTitle`

Heading rendered as an h3.

`SweepCornerTags`

Flex-wrap container for tag pills.

`SweepCornerTag`

Individual colored tag pill.

Prop	Type	Description
`color`*	`string`	Color key: purple, green, blue, red, amber, pink, or gray.

`SweepCornerBadge`

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

`SweepCornerFooter`

Footer with comment count, time, vote stats, and sweep animation on vote.

Prop	Type	Description
`comments`*	`number`	Comment count.
`time`*	`string`	Relative time string, e.g. "3 days ago".

All sub-components also accept className and children props unless noted otherwise.