Ribbon

Absolute positioned overlay ribbons for highlighting special offers, popular packages, status alerts, or product badges.

Preview & Interactive Laboratory

Visual Positions

Top Left
Top Left Anchor
Top Right
Top Right Anchor
Bottom Left
Bottom Left Anchor
Bottom Right
Bottom Right Anchor

Color Variants

Popular

Emerald Success

SaaS Best-seller

50% Off

Amber Warning

Limited Special

Hot

Crimson Destructive

Alert Overlay

Usage & Implementation

import { Ribbon } from "@/components/ui/ribbon"

<div className="relative w-72 h-48 border bg-white rounded-3xl">
  <Ribbon variant="success" position="top-left">
    Best Seller
  </Ribbon>
</div>
React / Tailwind

Granular Customization

1

Ribbon Layer

Configures font sizes, custom padding, or custom shadow depth.

className={`className`}
2

Relative Target

Ensure the parent container utilizes absolute or relative anchors.

className={`className='relative'`}

API Reference (Props)

PropTypeDefaultDescription
variant'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info''primary'Color variance preset applied.
position'top-left' | 'top-right' | 'bottom-left' | 'bottom-right''top-right'Corner anchoring configuration.