Corner Ribbon React component
A diagonal ribbon for the corner of any card, in any of the four corners, with a band of light that passes along it now and then.
About the Corner Ribbon component
Corner Ribbon marks one card out from the rest with the classic diagonal band. Drop it inside anything with position relative and pick a corner.
A soft band of light passes along it every few seconds, just enough to catch the eye without becoming a distraction.
When to use it
Use it for Popular, New or Sale labels on pricing cards, products and listings.
Mark one item in a set. If every card has a ribbon, none of them stands out.
Installation
Add the Corner Ribbon component to your project with the shadcn CLI. It lands in components/corner-ribbon.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/corner-ribbonProps
<CornerRibbon /> accepts 6 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| label | string | "Popular" |
| corner | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right" |
| color Fill of the ribbon. | string | "#5E6AD2" |
| ink Colour of the text. | string | "#FFFFFF" |
| size Width of the square corner it sits in, in px. | number | 112 |
| shine A band of light passes along it now and then. | boolean | true |
- labelstringDefault: "Popular"
- corner"top-left" | "top-right" | "bottom-left" | "bottom-right"Default: "top-right"
- color
Fill of the ribbon.
stringDefault: "#5E6AD2" - ink
Colour of the text.
stringDefault: "#FFFFFF" - size
Width of the square corner it sits in, in px.
numberDefault: 112 - shine
A band of light passes along it now and then.
booleanDefault: true
Corner Ribbon FAQ
- What does the parent need?
- position: relative, and overflow hidden if it has rounded corners.
- Can I change the size?
- Yes. size is the width of the corner square in pixels.
- Can I turn off the shine?
- Yes, with shine={false}.
- Which corners work?
- All four: top-left, top-right, bottom-left and bottom-right.
