shadcn.io is not affiliated with official shadcn/ui
Shadcn Marker for React
Inline status, system note, bordered row, or labeled separator.
Switched to a new branch
Thinking...
Conversation compacted
Explored 4 files
Installation
bunx --bun shadcn@latest add https://kit.dev/r/marker.jsonnpx shadcn@latest add https://kit.dev/r/marker.jsonpnpm dlx shadcn@latest add https://kit.dev/r/marker.jsonyarn shadcn@latest add https://kit.dev/r/marker.jsonInstall the following dependencies:
bun add @ark-ui/react tailwind-variantsnpm install @ark-ui/react tailwind-variantspnpm add @ark-ui/react tailwind-variantsyarn add @ark-ui/react tailwind-variantsCopy and paste the following code into your project.
"use client";
import { ark } from "@ark-ui/react/factory";
import type * as React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
const markerVariants = tv({
base: "cn-marker group/marker relative flex w-full items-center",
variants: {
variant: {
border: "cn-marker-variant-border",
default: "cn-marker-variant-default",
separator: "cn-marker-variant-separator",
},
},
});Update the import paths to match your project setup.
Anatomy
Marker
├── MarkerIcon
└── MarkerContentUsage
import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker";<Marker className="max-w-full min-w-0">
<MarkerIcon>
<CheckIcon aria-hidden="true" className="size-4" />
</MarkerIcon>
<MarkerContent>Explored 4 files</MarkerContent>
</Marker>