BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
../../apps/web/examples/headers.tsx import { Header } from '@/components/ui/ugolin/headers';function HeadersExample() { return ( <section className="flex flex-col gap-4"> <Header>Heading 1</Header> <Header as="h2">Heading 2</Header> <Header as="h3" className="text-primary"> Heading 3 </Header> <Header as="h4">Heading 4</Header> <Header as="h5">Heading 5</Header> <Header as="h6">Heading 6</Header> </section> );}export default HeadersExample;
Installation#
Via shadcn — copie le code source
$pnpm dlx shadcn@latest add https://ugolin-olle.com/r/headers.jsonInstallation manuelle
import { cn } from '@/lib/utils';type HeaderProps = { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; className?: string; children: React.ReactNode;};const styles = { h1: 'scroll-m-20 text-5xl font-bold tracking-tight lg:text-6xl', h2: 'scroll-m-20 border-b pb-2 text-4xl font-semibold tracking-tight first:mt-0', h3: 'scroll-m-20 text-3xl font-semibold tracking-tight', h4: 'scroll-m-20 text-2xl font-semibold tracking-tight', h5: 'scroll-m-20 text-xl font-semibold tracking-tight', h6: 'scroll-m-20 text-lg font-semibold tracking-tight text-muted-foreground',} satisfies Record<NonNullable<HeaderProps['as']>, string>;export function Header({ as: Component = 'h1', className, children }: HeaderProps) { return <Component className={cn(styles[Component], className)}>{children}</Component>;}
Une carte minimale combinant Card et Badge de @portfolio-v0/shadcn pour afficher un état
(déploiement, service, tâche...) avec un horodatage.