Typography

Primitive typography components để đồng bộ heading, body, caption và inline code cho docs hoặc các màn hình nhiều nội dung.

1. Import

Import các primitive typography từ design system.

import {
  TypographyH1,
  TypographyH2,
  TypographyH3,
  TypographyH4,
  TypographyLead,
  TypographyMuted,
  TypographyP,
  TypographySmall,
  TypographyCode,
} from "@/design-system/components/ui/typography"

2. Props

Mỗi primitive nhận native props của phần tử tương ứng và className.

Prop	Type	Default
className	string	--
children	ReactNode	--
...props	native element props	--

3. Usages

Dùng typography primitives cho docs, section intro và các khối nội dung dài.

Tiêu đề trang chính

Tiêu đề section

Tiêu đề nhóm nội dung

Tiêu đề nhỏ

import {
  TypographyH1,
  TypographyH2,
  TypographyH3,
  TypographyH4,
} from "@/design-system/components/ui/typography";

export function Example() {
  return (
    <div className="space-y-3">
      <TypographyH1>Tiêu đề trang chính</TypographyH1>
      <TypographyH2>Tiêu đề section</TypographyH2>
      <TypographyH3>Tiêu đề nhóm nội dung</TypographyH3>
      <TypographyH4>Tiêu đề nhỏ</TypographyH4>
    </div>
  );
}