# antuikit / Ribbon

> Ribbon, a corner banner around a card, with an `emphasis` axis, a softer corner and a smaller label.

Docs: https://antuikit.com/docs/components/ribbon

## Install

npx antuikit@latest init
npx antuikit@latest add ribbon

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/ribbon/basic.md): Wrap a card in `Ribbon` and set `text` to label its corner, and `color` to pick a preset instead of the primary color.
- [Emphasis](https://ui.antuikit.com/embed/ribbon/emphasis.md): Set `emphasis` to `subtle` to turn the solid banner into a tinted marker with colored text, for a label that should not outshout the card.
- [Placement](https://ui.antuikit.com/embed/ribbon/placement.md): Set `placement` to `start` to put the ribbon on the leading corner, which follows the text direction in a right-to-left layout.
- [Corner](https://ui.antuikit.com/embed/ribbon/corner.md): The ribbon's corners are rounded to sit well against a card, except the one that folds around the card's edge, at either placement.
- [Banner and marker](https://ui.antuikit.com/embed/ribbon/banner-vs-marker.md): Two plan cards, one with a solid Best seller banner and one with a subtle Beta marker that sits below the card's title in weight.
- [Pricing table](https://ui.antuikit.com/embed/ribbon/plan-cards.md): A three-plan pricing table where only the middle plan carries a Most popular ribbon.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/ribbon`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Ribbon` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.