Brand Logo
The locked two-bar Interlace mark plus the lowercase monospace wordmark "interlace". This is the SAME lockup eslint.interlace.tools ships in its top nav — one component so every *.interlace.tools site renders an identical brand header instead of…
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/brand-logo.jsonnpx shadcn@latest add @interlace/brand-logoHistory
This component is at v1.0.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
No release note names this component yet. It shipped with the release above and has not changed since — see the full changelog for what moved elsewhere in the DS.
Import
2 named exports — pull the parts you need.
import { BrandLogo, BrandMark } from '@/components/ui/patterns/brand-logo';API reference
Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.
BrandMarkProps
Also accepts every <svg> attribute.
| Prop | Type | Description |
|---|---|---|
| size | number | Rendered size in px (width = height). @default 22 |
BrandLogoProps
Also accepts every <span> attribute.
| Prop | Type | Description |
|---|---|---|
| markSize | number | Mark size in px. @default 22 |
Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- No animation to gate.
- ARIA in the source
aria-hidden
Examples
3 more states from the same story file.
R-rule compliance
Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.
| Rule | Concept | Where |
|---|---|---|
| R2 | Travels (high) | Zero product nouns beyond the brand itself |
| R4 | Extends native el | `React.ComponentProps<'svg'>` / `<'span'>` |
| R6 | data-slot on every named part | `brand-mark` / `brand-logo` |
| R7 | className merged + ...rest | `cn(...)` + `{...props}` on both parts |
| R18 | Tailwind only — no inline style | SVG geometry is numeric attrs, fills are tokens |
| R19 | Tokens only — no raw hex | `var(--brand-mark-bar-*)` |
| R23 | CLS=0 | Fixed width/height on the SVG |
| R25 | Server component | no hooks → no 'use client' |
| R26 | a11y | Mark is aria-hidden; the wordmark names the brand |
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
- Registry dependencies
Source
The full implementation — components/ui/patterns/brand-logo.tsx once installed.
import * as React from 'react';
// @interlace/brand-logo v1.0.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/brand-logo
// What changed since: https://ds.interlace.tools/c/brand-logo#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — BrandMark + BrandLogo (the canonical Interlace nav lockup)
*
* The locked two-bar Interlace mark plus the lowercase monospace wordmark
* "interlace". This is the SAME lockup eslint.interlace.tools ships in its
* top nav — one component so every *.interlace.tools site renders an
* identical brand header instead of hand-copied SVG.
*
* ## Geometry (locked — never bend)
*
* viewBox 0 0 100 100, two rx-14 bars (62×28) rotated -30° about the
* center; orange bar leads upper-left, green bar lower-right. See the
* brand-mark favicons (apps/registry/public/favicon.svg) for the same
…94 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.