Minimal Notch

A clean feedback card with a side vote column featuring an animated glowing notch bar that responds to vote state.

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>

API Reference

`MinimalNotch`

Root provider. Manages vote state via React context.

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

`MinimalNotchCard`

Card body with rounded border, hover shadow, and inner spacing.

`MinimalNotchTitle`

Heading rendered as an h3.

`MinimalNotchStatus`

Colored status badge pill.

Prop	Type	Description
`color`	`BadgeColor`	Color key: purple, green, blue, red, amber, pink, or gray. Defaults to "blue".

`MinimalNotchTags`

Flex-wrap container for tags.

`MinimalNotchTag`

Individual colored tag pill.

Prop	Type	Description
`color`	`BadgeColor`	Color key: purple, green, blue, red, amber, pink, or gray. Defaults to "gray".

`MinimalNotchMeta`

Row with comment count and relative time.

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

`MinimalNotchVote`

Vote column with animated notch bar, glow effect, and up/down buttons. Reads vote state from context.

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