Tile UI Vue
Source code

Components

Marker

A status marker component.

Use Marker to annotate content with visual variants.

Default
Separator
Border
import { Marker, MarkerIcon, MarkerContent } from '@tile-ui/vue';
 
export default function MarkerDemo() {
	return (
		<div class="button-group">
			<Marker variant="default">

Registry install

pnpm dlx shadcn@latest add @tile-ui/marker

Package usage

import { Marker, MarkerIcon, MarkerContent } from '@tile-ui/vue';
 
<Marker variant="separator">
	<MarkerIcon />
	<MarkerContent>Status</MarkerContent>
</Marker>

Highlights

  • Default, separator, and border variants
  • Icon and content
  • asChild support

Registry dependencies

Item Purpose
marker Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Marker

Prop Type Default
variant 'default' | 'separator' | 'border' —
asChild boolean —
PreviousLabelNextMenubar