Ribbon

Data Display

Logical-corner card labels for featured plans and early-access content.

Featured end ribbonMuted start ribbonRTL corner placement

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

ribbon.tsx

"use client";

import { Ribbon } from "@/components/ui/ribbon";
import { Check } from "lucide-react";
export default function RibbonExample() {
  return (
    <div className="grid w-full max-w-2xl gap-5 sm:grid-cols-2">
      <Ribbon label="Most popular">
        <div className="space-y-5 p-6">
          <div>
            <p className="text-sm font-medium text-muted-foreground">Studio</p>
            <p className="mt-2 text-3xl font-semibold">
              $29
              <span className="text-sm font-normal text-muted-foreground">
                {" "}
                / month
              </span>
            </p>
          </div>
          <p className="text-sm leading-6 text-muted-foreground">
            A considered toolkit for teams finding their rhythm.
          </p>
          <ul className="space-y-2 text-sm">
            {[
              "Unlimited projects",
              "Shared components",
              "Team permissions",
            ].map((text) => (
              <li key={text} className="flex items-center gap-2">
                <Check className="size-4 text-primary" />
                {text}
              </li>
            ))}
          </ul>
        </div>
      </Ribbon>
      <Ribbon label="Early access" position="start" tone="muted">
        <div className="space-y-4 p-6">
          <p className="text-sm text-muted-foreground">Apex Labs</p>
          <h3 className="text-xl font-semibold">The next great workflow.</h3>
          <p className="text-sm leading-6 text-muted-foreground">
            Experiment with new ideas in a space made for exploration.
          </p>
          <p className="text-xs text-muted-foreground">
            Available to all workspace members
          </p>
        </div>
      </Ribbon>
    </div>
  );
}

Usage

Wrap card content with a short ribbon label to highlight a featured plan, release, or promotion. Logical start and end positions follow document direction. The wrapper reserves a top band so the ribbon does not overlap the content. Keep important pricing and eligibility information in the body rather than relying on the ribbon alone.

Import

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

Shipped as editable source in src/components/ui/ribbon.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/ribbon.tsx

import type { ReactNode } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
export interface RibbonProps {
  label: string;
  children: ReactNode;
  position?: "start" | "end";
  tone?: "primary" | "muted";
  className?: string;
}
export function Ribbon({
  label,
  children,
  position = "end",
  tone = "primary",
  className,
}: RibbonProps) {
  return (
    <div
      className={cn(
        "relative min-w-0 rounded-xl border bg-card pt-12 shadow-xs",
        className,
      )}
    >
      <span
        className={cn(
          "absolute top-4 max-w-[calc(100%-2rem)] truncate px-3 py-1 text-xs font-semibold",
          position === "end" ? "end-0 rounded-s-md" : "start-0 rounded-e-md",
          tone === "primary"
            ? "bg-primary text-primary-foreground"
            : "bg-muted text-muted-foreground",
        )}
        title={label}
      >
        {label}
      </span>
      {children}
    </div>
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Ribbon props
Prop	Type / Default	Description
label	`string` Default: required	Short readable ribbon text.
children	`ReactNode` Default: required	Card body, including its own padding and heading structure.
position	`start \| end` Default: end	Logical edge for placement in LTR and RTL.
tone	`primary \| muted` Default: primary	Ribbon background and foreground colors.
className	`string` Default: —	Extend the component container with theme-aware utility classes.

Build with these too

Card Badge