Brok UI

Loading…

No results

Pro

Token

Open source

tokenui.dev-inspired design-token documentation chips — a base name → value token with click-to-copy, plus typed variants for colour, typography, dimension, motion and scalar tokens.

Source Open issues Report a bug

Version: v1.1.1
Stability: stable
License: MIT
Related: Token; Color Token; Typography Token; Font Family Token; Font Weight Token; Spacing Token; Radius Token; Duration Token; Number Token; Order Token

Elevation Token — Documents a single elevation / box-shadow design token — a shadowed swatch plus the token name, with the shadow value revealed in a tooltip on hover and click-to-copy.

shadow-xs shadow-sm shadow-md shadow-lg

Side

previews.components.elevation-token.default.blade.php Blade

<div class="flex flex-wrap items-center gap-4 p-2">
    <x-ui.elevation-token name="shadow-xs" value="var(--shadow-xs)" />
    <x-ui.elevation-token name="shadow-sm" value="var(--shadow-sm)" />
    <x-ui.elevation-token name="shadow-md" value="var(--shadow-md)" />
    <x-ui.elevation-token name="shadow-lg" value="var(--shadow-lg)" />
</div>

Top Current

shadow-xs shadow-sm shadow-md shadow-lg

Right Current

shadow-xs shadow-sm shadow-md shadow-lg

Bottom Current

shadow-xs shadow-sm shadow-md shadow-lg

Left Current

shadow-xs shadow-sm shadow-md shadow-lg

Installation

terminal

php artisan ui:add elevation-token

Registry contract

php artisan ui:add elevation-token writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

blade resources/views/components/ui/elevation-token.blade.php

Registry dependencies: token
Packages: composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

elevation-token.md

# Brok UI: Elevation Token (`elevation-token`)

Documents a single elevation / box-shadow design token — a shadowed swatch plus the token name, with the shadow value revealed in a tooltip on hover and click-to-copy.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add elevation-token
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-4 p-2">
    <x-ui.elevation-token name="shadow-xs" value="var(--shadow-xs)" />
    <x-ui.elevation-token name="shadow-sm" value="var(--shadow-sm)" />
    <x-ui.elevation-token name="shadow-md" value="var(--shadow-md)" />
    <x-ui.elevation-token name="shadow-lg" value="var(--shadow-lg)" />
</div>
```

## Props

- `name` (string, default ``) — Token name shown as the chip label and tooltip trigger.
- `value` (string, default ``) — Token box-shadow value, shown in the tooltip and copied to the clipboard.
- `copyable` (bool, default `true`) — Shows the copy button when true.
- `side` (string, default `top`) — Tooltip placement side.

## Use when

- Use to document, inspect, and apply design-system decisions consistently across teams and AI tooling.
- Documenting a box-shadow/elevation token so its depth is visible alongside its raw value.
- Comparing several elevation tokens side by side in a style guide.

## Avoid when

- Do not present token-level controls to end users who only need product functionality.
- Documenting a non-shadow token; use the matching specialised token component instead.

## Anti-patterns

- Exposing implementation tokens as product settings

## Rules

- Use the `<brok:elevation-token>` tag (or `<x-ui.elevation-token>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/elevation-token
- Registry JSON (files, props, contract): https://brokui.dev/r/open/elevation-token.json

Ask about Elevation Token in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop	Type	Default	Description
name	string		Token name shown as the chip label and tooltip trigger.
value	string		Token box-shadow value, shown in the tooltip and copied to the clipboard.
copyable	bool	true	Shows the copy button when true.
side	string	top	Tooltip placement side.

Slots

default — Extra content appended inside the chip.

Data slots

Stable hooks for CSS overrides and browser tests.

elevation-token

Behavior

Composes the base token chip and supplies a swatch shadowed with the token's own value via an inline box-shadow style, as the indicator.
Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.

Guidance

Design-token documentation

Inspect and govern design-system decisions.

Use when

Use to document, inspect, and apply design-system decisions consistently across teams and AI tooling.
Documenting a box-shadow/elevation token so its depth is visible alongside its raw value.
Comparing several elevation tokens side by side in a style guide.

Avoid when

Do not present token-level controls to end users who only need product functionality.
Documenting a non-shadow token; use the matching specialised token component instead.

Use instead

Product-level controls for end users

Anti-patterns

Exposing implementation tokens as product settings

Anatomy: root
Theming hooks: elevation-token

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

The shadowed swatch is decorative and aria-hidden; the token name and tooltip carry the actual shadow value.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

The exact, editable file ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/elevation-token.blade.php Blade

@props([
    'name' => '',
    'value' => '',
    'copyable' => true,
    'side' => 'top',
])

{{-- Documents a single elevation / box-shadow token: a shadowed swatch plus the token
     name, with the shadow value in a tooltip and click-to-copy. Composes the base
     `token` chip and supplies the swatch through its `indicator` slot. --}}

<x-ui.token
    data-slot="elevation-token"
    :name="$name"
    :value="$value"
    :copyable="$copyable"
    :side="$side"
    {{ $attributes }}
>
    <x-slot:indicator>
        <span class="size-5 rounded-md border border-border bg-card" style="box-shadow: {{ $value }}"></span>
    </x-slot:indicator>
</x-ui.token>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.1.1
Status: Stable
License: open
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated
Contract: v6
Foundation: ≥ 1.0.0