Marker

A small marker for highlighting or annotating content.

Order confirmed

Preparing shipment

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/marker.json

Usage

import { CircleCheckIcon, CircleIcon } from "lucide-react";
import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker";

<div className="flex w-full max-w-md flex-col gap-2">
  <Marker>
    <MarkerIcon>
      <CircleCheckIcon />
    </MarkerIcon>
    <MarkerContent>Order confirmed</MarkerContent>
  </Marker>
  <Marker>
    <MarkerIcon>
      <CircleIcon />
    </MarkerIcon>
    <MarkerContent>Preparing shipment</MarkerContent>
  </Marker>
</div>

Separator

The separator variant draws a line on either side of the content, useful for dividing sections.