Minimal Notch

A quiet feedback card with a side vote column. A notch bar next to the score lights up to show the current vote.

Preview

Add keyboard shortcuts for common actions

Planned

UXFeature

73 days ago

Installation

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

Usage

import {
  MinimalNotch,
  MinimalNotchCard,
  MinimalNotchMeta,
  MinimalNotchStatus,
  MinimalNotchTag,
  MinimalNotchTags,
  MinimalNotchTitle,
  MinimalNotchVote,
} from "@/components/ui/feedback-minimal-notch";

<MinimalNotch defaultUpvotes={24} defaultDownvotes={3}>
  <MinimalNotchCard>
    <MinimalNotchTitle>
      Add keyboard shortcuts for common actions
    </MinimalNotchTitle>
    <MinimalNotchStatus color="blue">Planned</MinimalNotchStatus>
    <MinimalNotchTags>
      <MinimalNotchTag color="purple">UX</MinimalNotchTag>
      <MinimalNotchTag color="green">Feature</MinimalNotchTag>
    </MinimalNotchTags>
    <MinimalNotchMeta comments={7} time="3 days ago" />
  </MinimalNotchCard>
  <MinimalNotchVote />
</MinimalNotch>

Features

Side vote column with up and down buttons, each showing its own count.
A notch bar lights up in the primary color on upvote and the destructive color on downvote.
Status and tag pills share one color scale built on the --tag-* tokens.
Works uncontrolled out of the box, or controlled from your own vote state.

API reference

MinimalNotch

Root. Holds vote state and shares it with the vote column 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, upvotes: number, downvotes: number) => void`	None	Called with the new vote and totals 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.

MinimalNotchCard

Card body with border, hover shadow and inner spacing.

MinimalNotchTitle

Title, rendered as an h3.

MinimalNotchStatus

A colored status pill.

Prop	Type	Default	Description
`color`	`"blue" \| "brown" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "yellow" \| "gray" \| "default"`	`"blue"`	Pill color.

MinimalNotchTags

Wrapping row for tags.

MinimalNotchTag

A colored tag pill.

Prop	Type	Default	Description
`color`	`"blue" \| "brown" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "yellow" \| "gray" \| "default"`	`"gray"`	Pill color.

MinimalNotchMeta

Row with comment count and relative time.

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

MinimalNotchVote

Vote column with the notch bar and up and down buttons. Reads vote state from context.

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