Marker

An inline annotation for timelines and conversations, such as a date divider or system event.

Marker is an open-source component from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.

Marker displays a short line of secondary text, typically between messages or list entries. Put the text in MarkerContent and, optionally, a leading MarkerIcon.

The variant prop changes the treatment: plain text, text centered between two separator rules, or text above a bottom border. Use Marker for annotations within content; use Separator for a purely visual rule with no text.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/marker

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add marker

Manual

Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react class-variance-authority

Copy the source into components/ui/marker.tsx:

Update the import paths to match your project.

Usage

import { Marker, MarkerIcon, MarkerContent }

<div

Links inside the marker or its content are underlined automatically. The underlying element can be changed:

Marker is built on Base UI's useRender, so it accepts a render prop to change the underlying element.

Set asChild on Marker and pass the element as the child.

Pass a render function to Marker that returns the element with the props it receives.

Examples

Variants

The default, separator and border variants stacked for comparison.

Separator

Text centered between two horizontal rules, as used for a date divider.

With icon

Markers with a leading decorative icon in the default and separator variants.

With link

A marker whose content includes an inline link.

API Reference

Anatomy3 parts

</Marker>

Marker

The container row that applies the variant styling.

Prop	Type	Default	Description
`variant`	`"default" \| "separator" \| "border"`	`"default"`	Sets the visual treatment: `default` for plain text, `separator` for text between two rules, or `border` for text above a bottom border.

Also accepts the props of useRender.ComponentProps<"div">.

MarkerIcon

A decorative icon slot shown before the content and hidden from assistive technology.

Also accepts the props of React.ComponentProps<"span">.

MarkerContent

Holds the marker text and any inline links.

Also accepts the props of React.ComponentProps<"span">.

Accessibility

MarkerIcon sets aria-hidden="true", so icons must be decorative; put meaningful text in MarkerContent.
Links inside the content remain in the normal tab order.

Notes

Styling hooks: data-slot="marker", data-slot="marker-icon" and data-slot="marker-content". The root also exposes data-variant.
Rules and borders use the border color; text uses muted-foreground and links hover to foreground.

Marker is a row of secondary text with an optional icon. It has three variants: default for a plain row, separator for centered text with a line on each side, and border for a row with a bottom border.

Use separator for date dividers in a chat or feed, border for section headings, and default for short notices.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/marker

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add marker

$ pnpm dlx @esuiss/ui@latest add marker --platform swift

import SwiftUI import UIKit struct RGBA: Sendable { let red: CGFloat let green: CGFloat let blue: CGFloat let alpha: CGFloat init(_ hex: UInt32, _ alpha: CGFloat = 1) { red = CGFloat((hex >> 16) & 0xFF) / 255 green = CGFloat((hex >> 8) & 0xFF) / 255 blue = CGFloat(hex & 0xFF) / 255 self.alpha = alpha }

import SwiftUI public enum EsuissColor { public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000)) public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F)) public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F)) public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF)) public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF)) public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1)) public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617)) public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6)) public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

import SwiftUI public enum TextVariant: CaseIterable, Sendable { case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted var style: TextStyle { switch self { case .h1: .xl3 case .h2: .xl2 case .h3: .xl case .h4, .lead, .large: .lg case .code, .small, .muted: .sm default: .base } }

package com.esuiss.ui.theme import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.Immutable import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.Modifier import androidx.compose.ui.draw.dropShadow import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.shadow.Shadow as DropShadow import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.LineHeightStyle import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.DpOffset

package com.esuiss.ui.theme import androidx.compose.runtime.Immutable import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp @Immutable data class Colors( val background: Color, val foreground: Color, val card: Color, val cardForeground: Color, val popover: Color, val popoverForeground: Color, val primary: Color, val primaryForeground: Color,

package com.esuiss.ui.components import androidx.compose.runtime.compositionLocalOf import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp val LocalContentStyle = compositionLocalOf { TextStyle.Default } val LocalContentColor = compositionLocalOf { Color.Unspecified } val LocalIconSize = compositionLocalOf { 20.dp }

package com.esuiss.ui.components import androidx.compose.foundation.Image import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.takeOrElse import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.unit.Dp import com.esuiss.ui.theme.EsuissTheme @Composable fun Icon( imageVector: ImageVector,

Prop	Type	Default	Description
`variant`	`"default" \| "separator" \| "border"`	`"default"`	`default`, `separator` or `border`.
`render`	`RenderProp<Record<string, unknown>, Record<string, never>>`	-	Element to render in place of the default `View`.

import { CalendarBlankIcon, InfoIcon } from "phosphor-react-native" import { View } from "react-native" import { Icon } from "@/components/ui/icon" import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker" export function MarkerVariantsExample() { return ( <View className="gap-8"> <Marker> <MarkerIcon> <Icon as={InfoIcon} /> </MarkerIcon> <MarkerContent>Messages are end-to-end encrypted.</MarkerContent> </Marker> <Marker variant="separator"> <MarkerContent>Today</MarkerContent> </Marker> <Marker variant="border"> <MarkerIcon> <Icon as={CalendarBlankIcon} /> </MarkerIcon> <MarkerContent>Upcoming</MarkerContent> </Marker> </View> ) }