Authoring engine

Component Studio

Compose live components, change canonical defaults, inspect tokens and motion, then write the definition back to @coldharbor/ui/studio.

Checking writer

Banner Navbar

Default navigation

The ColdHarbor default navigation: a torn, printed house-red banner with responsive disclosure behavior.

Generated usage

import { BannerNavbar } from "@coldharbor/ui";

<BannerNavbar
  brandName="COLDHARBOR"
  links={[
  {
    "label": "Studio",
    "href": "/studio",
    "active": true
  },
  {
    "label": "Foundations",
    "href": "/foundations/color"
  },
  {
    "label": "Components",
    "href": "/primitives/button"
  },
  {
    "label": "Patterns",
    "href": "/patterns/banner-navbar"
  }
]}
  sticky={false}
  animateIn={true}
  style={{
    "--ch-banner-field": "var(--ch-flag-field)",
    "--ch-banner-ink": "var(--ch-flag-ink)",
  }}
/>

Contract

Import: @coldharbor/ui
Tokens: --ch-flag-field--ch-flag-ink--ch-focus--ch-nav-h
Motion: springs.unfoldsprings.glidedurations.fast

Open full documentation