new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

marker/usage

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Marker component imports

Import the Marker component and its sub-components using: import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

Marker basic usage example

A basic Marker component with an icon and content: ```tsx <Marker> <MarkerIcon> <CheckIcon /> </MarkerIcon> <MarkerContent>Explored 4 files</MarkerContent> </Marker> ``` This example shows how to compose a marker with an icon slot and text content.

Marker composes with Message component

The Marker component is designed to be composed with the Message component in a conversation thread.

Marker as link example

```tsx import { Marker, MarkerContent } from "@/components/ui/marker" export function MarkerLinkDemo() { return ( <Marker render={<a href="#" />}> <MarkerContent>View the pull request</MarkerContent> </Marker> ) } ``` This example shows how to render a marker as a link using the render prop.

Marker render prop for links and buttons

Turn a marker into a link or button with the render prop on Marker. Pass a ReactElement like <a href="#" /> or a function.

Marker component exports markerVariants

The Marker component file also exports markerVariants for composing the marker styles into custom components.

Marker component imports

The Marker component exports three parts that should be imported: Marker, MarkerContent, and MarkerIcon from @/components/ui/marker

Basic Marker component example

```tsx import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker" <Marker> <MarkerIcon> <CheckIcon /> </MarkerIcon> <MarkerContent>Explored 4 files</MarkerContent> </Marker> ``` This example shows a basic marker with an icon and text content.

Marker with stacked icon using flex-col

Use MarkerIcon to render an icon alongside the content, and add the flex-col class to stack the icon above the content.

Marker basic usage import

Import Marker, MarkerContent, and MarkerIcon from @/components/ui/marker

Marker basic usage example

Basic marker example showing a marker with icon and content: <Marker> <MarkerIcon> <CheckIcon /> </MarkerIcon> <MarkerContent>Explored 4 files</MarkerContent> </Marker>

Marker shimmer utility for streaming text

Add the shimmer utility class to MarkerContent for an animated streaming-text effect. The shimmer utility is available from the shadcn package.

Marker as link or button with asChild

Use the asChild prop on Marker to render it as a link or button element by passing the desired element as a child.

Marker link example

Example showing a Marker as a link: <Marker asChild> <a href="#"> <MarkerContent>View the pull request</MarkerContent> </a> </Marker>

Give your agent this brain