Nx Logo
The Nexus ReGen logotype, sized and coloured for the app shell.
bunx shadcn@latest add @nx-ui/nx-logoVariants
Three marks: emblem (1:1, the default), lockup (emblem + wordmark, 2.5:1) and wordmark alone (~3.8:1). Size with a className height; width follows the intrinsic ratio.
Sizes
Height is the only sizing knob — pass h-* utilities via className.
Dark canvas
Force the dark subtree to see the token-driven colouring: the arrow emblem goes accent-yellow and the wordmark goes white, no prop change. (The dark variant keys off .dark-mode, so the canvas uses dark-mode — a bare `dark` class would never fire.)
On a solid brand band
The monochrome escape hatch: on a navy bg-brand-600 band the two-tone default would fight the surface, so `monochrome` collapses the whole mark to one currentColor — pair it with a text colour utility.
Emblem weights
The arrow logomark ships as a standalone NxEmblem with a weight scale, so it stays legible at small sizes. See the brand-icons foundations page for the full system.
In a sign-in card
A realistic composition: the lockup atop a Hallow Farm Compost sign-in form, and the emblem alone marking an invite panel.
Beside a project name
The compact spot the emblem is built for — a fixed rail header, unaffected by the project label's length.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | NxLogoVariant | "emblem" | — |
monochrome | boolean | false | Collapse to a single currentColor for solid brand bands (pair with a text colour). |
emblemClassName | string | — | Override just the arrow emblem's colour (ignored when `monochrome`). |
wordmarkClassName | string | — | Override just the wordmark letters' colour (ignored when `monochrome`). The on-navy brand treatment in any colour mode is `emblemClassName="fill-accent-400" wordmarkClassName="fill-white"`. |
…extends Omit<React.ComponentProps<"span">, "children">