shadcn-preact
Components

Marker

Displays an inline status, system note, bordered row, or labeled separator in a conversation.

PreviewSource
Switched to a new branch
Thinking...
Conversation compacted
Explored 4 files
Example requirements

Also uses: Spinner.

bun add --exact lucide-preact@1.51.0

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact class-variance-authority@0.7.1 cn@0.4.0 preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects marker.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/marker --files LICENSE.md,registry/ui/lib/utils.ts,registry/ui/marker.tsx,registry/ui/primitives/LICENSE,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/use-render/index.ts --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/marker/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/marker/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/marker. Existing components stay in place; shared source files are updated from main.

Selected source files (15)

Usage

import { Marker, MarkerContent, MarkerIcon } from "./components/ui/marker"
<Marker>
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

Examples

Variants

Use variant to switch between an inline marker, bordered row, and labeled separator.

VariantsSource
Preview

Status

Set role="status" and include a Spinner for streaming or in-progress markers so updates are announced.

StatusSource
Preview
Example requirements

Also uses: Spinner.

Shimmer

Add the shimmer utility class to MarkerContent for an animated streaming-text effect. The utility ships with the shadcn package — see the shimmer docs for installation.

ShimmerSource
Preview

Separator

Use the separator variant for labeled dividers, such as dates or section breaks, in a conversation.

SeparatorSource
Preview

Border

Use the border variant for status rows that should keep the default marker alignment while separating the next row.

BorderSource
Preview
Example requirements
bun add --exact lucide-preact@1.51.0

With Icon

Use MarkerIcon to render an icon alongside the content. Use flex-col to stack the icon above the content.

With IconSource
Preview
Example requirements
bun add --exact lucide-preact@1.51.0

Reference

See the official Marker documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source