Skip to content

Components · Reference

App Brand

A compact TanStack Router brand link with a semantic icon, app name, and subtitle.

Last updated August 26, 2026

Overview

app-brand provides a small reusable brand link for app shells, home page headers, and navigation chrome. It keeps the icon container, label, and subtitle visually consistent across pages. Use to for TanStack Router links, href for standard anchors, and to={null} for static branding. Internal links accept the same typed route props as TanStack Router's Link, including params and search.

Install

shell
bunx shadcn@latest add @krak-stack/app-brand

Usage

tsx
import { AppBrand } from "@/components/ui/app-brand";
import { Blocks } from "lucide-react";

<AppBrand label="Krakstack" subtitle="Documentation" icon={Blocks} />

Route Params

tsx
<AppBrand
  to="/organizations/$organizationId"
  params={{ organizationId }}
  label="Acme"
  subtitle="Organization"
  icon={Blocks}
/>
Dependencies
Packages and shadcn components required by this registry item.

Dependencies