Demo

The RDC logo can be used in two color variations:

Installation

npx shadcn add @rdc-ui/logo

import Logo from "@/components/Logo"

export function Header() {
  return <Logo className="h-8 w-auto fill-alternative" />
}

This is a MANUAL step. Usually, you would let the LLM decide what colors to apply by analyzing the design and component context.

To have an LLM add the logo for you, simply instruct it:

"Add the RDC logo to the header and center it."

The LLM will install the component from the registry and configure the correct variant based on the background context.

<Logo className="fill-alternative" />

<Logo className="fill-white" />

Prop	Type	Default	Description
`animate`	`boolean`	`false`	Enable stroke draw animation on load
`onAnimated`	`() => void`	—	Callback fired after animation completes
`className`	`string`	—	Additional CSS classes

All standard SVG attributes are also supported.

The logo height may never be smaller than 24px.