Hero
Section-level composite for the primary landing section. Center-aligned by default, composes Section internally. Sub-components for badge, title, description, and actions.
Default
Full hero matching the home wireframe: logo, alpha badge, headline, description, install command, and a secondary link. Everything center-aligned.
Alpha Your design system is the website.
A design system for Claude Code. Define your brand, build components, ship static sites — through conversation.
$ curl -fsSL https://getangora.org/install | sh
View on GitHub → Minimal
Just title and description — no badge, no actions. Shows the component works with partial composition. Only compose what you need.
Ship faster with better tools.
Everything your team needs to build, deploy, and scale — without the infrastructure headaches.
Left-aligned
align="start" for content-heavy pages where center alignment feels off. Description no longer needs mx-auto — left-aligned naturally.
Getting started with Angora
Install locally, define your brand, and ship your first page in minutes. No account needed.
Anatomy
Hero composes Section seamless internally. The Section provides the @container, max-width, horizontal padding, and vertical padding. Hero adds a flex column with gap.
Alpha Your design system is the website.
A design system for Claude Code. Define your brand, build components, ship static sites — through conversation.
Section seamless aria-labelledby="hero-heading" flex flex-col gap-6 items-center text-center text-5xl font-semibold tracking-tight text-foreground text-balance text-lg text-muted-foreground max-w-[50ch] text-pretty text-xs font-semibold uppercase tracking-wide text-highlight-foreground bg-highlight shadow-sm px-3 py-1 rounded-full flex flex-col items-center gap-4