Components
Marker
A horizontal marker or label row with an optional icon.
Marker is a horizontal label row. It supports border, default, and separator variants, with an optional leading icon.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/marker.jsonUsage
import {
Marker,
MarkerContent,
MarkerIcon,
} from "@/components/ui/marker";
import { RiStarLine } from "@remixicon/react";
export default function Example() {
return (
<Marker>
<MarkerIcon>
<RiStarLine />
</MarkerIcon>
<MarkerContent>Featured</MarkerContent>
</Marker>
);
}Examples
Default
Section label
With icon
Featured
Variants
Default
Border
Separator
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
markerVariants | cva()Class helper · class-variance-authority | — |
Markerdata-slot="marker" | <div>HTML |
|
MarkerIcondata-slot="marker-icon" | <span>HTML | — |
MarkerContentdata-slot="marker-content" | <span>HTML | — |
Last updated on