Marker
A small label for annotating content, such as a section divider, an inline note, or an "OR" separator between actions.
Last updated August 8, 2026
CreditsModifiedPublished
Copied from shadcn/ui.
- Replaced text-left with text-start
- Replaced physical before:mr-1/after:ml-1 with logical before:me-1/after:ms-1 on the separator variant
Overview
Requires a Pro plan
import { InfoIcon } from "lucide-react"
import {
Marker,
MarkerContent,
MarkerIcon,
} from "@/components/ui/marker"
export function MarkerDemoExample() {
return (
<Marker>
<MarkerIcon>
<InfoIcon />
</MarkerIcon>
<MarkerContent>Requires a Pro plan</MarkerContent>
</Marker>
)
}Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/marker.jsonUsage
import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"
export function Example() {
return (
<Marker>
<MarkerIcon>
<Icon />
</MarkerIcon>
<MarkerContent>Requires a Pro plan</MarkerContent>
</Marker>
)
}Separator
The separator variant draws a rule on each side of the content, e.g. between two alternate actions.
OR
import { Button } from "@/components/ui/button"
import { Marker, MarkerContent } from "@/components/ui/marker"
export function MarkerSeparatorExample() {
return (
<div className="flex w-full max-w-xs flex-col gap-3">
<Button variant="outline" className="w-full">
Continue with Email
</Button>
<Marker variant="separator">
<MarkerContent>OR</MarkerContent>
</Marker>
<Button variant="outline" className="w-full">
Continue with Google
</Button>
</div>
)
}Border
Account settings
import { Marker, MarkerContent } from "@/components/ui/marker"
export function MarkerBorderExample() {
return (
<div className="w-full max-w-sm">
<Marker variant="border">
<MarkerContent className="text-base font-medium text-foreground">
Account settings
</MarkerContent>
</Marker>
</div>
)
}RTL
The separator's rules on either side of "یا" mirror correctly under RTL.
یا
import { Button } from "@/components/ui/button"
import { Marker, MarkerContent } from "@/components/ui/marker"
export function MarkerRtlExample() {
return (
<div className="flex w-full max-w-xs flex-col gap-3">
<Button variant="outline" className="w-full">
ادامه با ایمیل
</Button>
<Marker variant="separator">
<MarkerContent>یا</MarkerContent>
</Marker>
<Button variant="outline" className="w-full">
ادامه با گوگل
</Button>
</div>
)
}