Logo

Clinia's wordmark and mark as React components that take the surrounding text colour.

When to use

Brand a React surface: the app shell, a sign-in page, a marketing header.

When not to use

Email signatures, slides or a CMS: use the SVG files listed on the Logo docs page (/docs/logo).
A small square slot such as an avatar or a favicon: use Logomark, not the wordmark.

Install

npx shadcn@latest add @clinia/logo

Preview

Usage

tsx

import { Logo, Logomark } from "@/components/ui/logo";

export function Header() {
  return (
    <a href="/" className="text-foreground">
      <Logo className="h-7" />
    </a>
  );
}

// The mark alone, sized with Tailwind
<Logomark className="size-8 text-foreground" />

Clinia rules

The brand rules (colours, backgrounds, minimum sizes, clear space) live on the Logo docs page at /docs/logo. Follow them there.
Set text-foreground on the logo or its parent: Infinite on light, Serene on dark. Never another colour. The SVG is currentColor, so it follows the theme.
Size Logo by height and Logomark with size-*. The width follows the aspect ratio. Logo defaults to h-7, 92px wide; below h-6.5 the wordmark is under its 80px minimum width.
Never redraw or edit the paths. Replace them from the brand drive.

Accessibility

Built in

Announced as "Clinia" (role="img") by default. Pass decorative when visible text beside it already says Clinia.

Your responsibility

Pass decorative when visible text beside the logo already says Clinia.
When the logo is the home link, the link's name is Clinia. Add an aria-label on the link if it should say more, such as Clinia home.

How to test

With a screen reader, reach the logo: it's announced as Clinia, image. With decorative, it's skipped.
Toggle the site theme: the logo follows the text colour and stays visible on the background.

API

Logo

Prop	Values	Default	Description
decorative	`boolean`	`false`	Set when visible text next to the logo already says "Clinia", so screen readers don't hear it twice.

Logomark

Prop	Values	Default	Description
decorative	`boolean`	`false`	Set when visible text next to the logo already says "Clinia", so screen readers don't hear it twice.

All other props come from the native svg element.