Marker
An annotation marker with contextual content.
Upstream documentationExamples
Example conversation
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Marker
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/marker.json'Usage
A complete example using the installed component and hook paths.
Marker usage
"use client";import { MessageCircleIcon } from "@/lib/icons";import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker";const MarkerPreview = function MarkerPreview() { return ( <Marker variant="separator"> <MarkerIcon> <MessageCircleIcon /> </MarkerIcon> <MarkerContent>Example conversation</MarkerContent> </Marker> ); };export default function Demo() { return <MarkerPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Marker
Marker props
useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants> & { sound?: boolean }- variant
- "default"
- sound
- true
MarkerIcon
MarkerIcon props
React.ComponentProps<"span">MarkerContent
MarkerContent props
React.ComponentProps<"span">markerVariants
Exported value.