antuikit's Ribbon is Ant Design's Badge.Ribbon as its own component, installed into your project as a file you own. Every Ant Design prop passes through. The kit adds an emphasis axis, palettes from your theme in color (like emerald or the gray slate), a smaller label and a softer corner. Those rows are marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add ribbon
The first command installs AntuikitProvider and the theme tokens. The second adds this component.
Import
From @/components/ui/ribbon, not from antd. The file is yours once it is installed, so the import path is a path in your project.
import { Ribbon } from "@/components/ui/ribbon"
The axes
Two enumerated props, one of them the kit's, plus a color string that takes three kinds of value.
placement takes start and end, and defaults to end. Both follow the text direction, so they swap in a right-to-left layout, and the fold swaps with them.
emphasis takes default and subtle. default is a solid fill with a light label. subtle is a tint with colored text, so the ribbon reads as a marker rather than a banner. It needs a color ramp, so a hex or rgb() color keeps the solid fill instead of showing light text on a light fill.
color takes antd's presets (blue, green, gold and the rest), a palette from your theme (the default theme adds amber, emerald, teal, sky, indigo, violet, fuchsia, rose and grays like slate and zinc), or any CSS color. A preset name wins even when it is also a CSS keyword, like red. With no color the ribbon uses colorPrimary.
A palette you add to your theme works in color with no change to the component, at both emphasis levels.
Flags
None. Loudness is a value on emphasis and the corner is a value on placement.
Slots
Two, and they are not interchangeable.
children is the surface the ribbon wraps. The banner is positioned against it, so a ribbon with no child has nothing to hang off: <Ribbon text="New"><Card /></Ribbon>.
text is the banner's content. It takes any node, so an icon can ride along. The label does not wrap and already sits 8px outside the card's edge, so a long one grows further outward.
Events
None. Ribbon is a label and takes no event handlers.
Styling
Pass classNames or styles to style one part: root for the wrapper, indicator for the banner and content for the text. className and style go on the banner, not the wrapper. Use rootClassName or classNames.root for the wrapper. The fold has no key, so style it with [&_.ant-ribbon-corner].
API Reference
Ribbon
Ribbon's props. Rows marked antuikit in the Version column are added by the kit.