Browse components

Typography

Typography helpers for headings and body copy.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/typography.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/typography.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/typography.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/typography.

Import

import {  TypographyH1,  TypographyH2,  TypographyH3,  TypographyH4,  TypographyP,  TypographyLead,  TypographyMuted} from "@/components/ui/typography"

example.tsx

import {  TypographyH2,  TypographyLead,  TypographyP,} from "@/components/ui/typography"export function Example() {  return (    <div>      <TypographyH2>Heading</TypographyH2>      <TypographyLead>A short deck that sets the tone.</TypographyLead>      <TypographyP>Body copy with comfortable rhythm.</TypographyP>    </div>  )}

API Reference

Typography helpers

Also exports `TypographyBlockquote`, `TypographyList`, `TypographyInlineCode` (aliased as `TypographyCode`), `TypographyLarge`, and `TypographySmall`. Each forwards the matching HTML element props.

Prop	Type	Default
className	string	—