# antuikit / Typography

> Typography, with copy and edit icons from your icon pack, a `size` ramp on `Text` and `Paragraph`, a `tertiary` text type, and themed `code`, `kbd` and `pre`.

Docs: https://antuikit.com/docs/components/typography

## Install

npx antuikit@latest init
npx antuikit@latest add typography

## Import

import { Typography } from "@/components/ui/typography";

## Demos

- [Title levels](https://ui.antuikit.com/embed/typography/title.md): Set `level` from 1 to 5 on `Title` to render an `h1` to `h5` heading, each a step smaller than the one before.
- [Text types](https://ui.antuikit.com/embed/typography/text.md): Set `type` on `Text` to `secondary`, `tertiary`, `success`, `warning` or `danger`, `disabled` to gray it out, and use `Link` for links.
- [Size ramp](https://ui.antuikit.com/embed/typography/size.md): Set `size` to `label`, `sm` or `xs` on `Text` or `Paragraph` to step down from your theme's base text size.
- [Decorations](https://ui.antuikit.com/embed/typography/decorations.md): Set `strong`, `italic`, `underline`, `delete`, `mark`, `code` or `keyboard` on `Text`, and combine them as you need.
- [Code and keys](https://ui.antuikit.com/embed/typography/code-chrome.md): Inline `code`, `keyboard` keys and a native `pre` block inside a Paragraph, all drawn in the theme's colors in light and dark mode.
- [Paragraph](https://ui.antuikit.com/embed/typography/paragraph.md): Use `Paragraph` for a block of text with a bottom margin, with `type` for quieter copy and `Text`, `<b>` or `<i>` inside it.
- [Article wrapper](https://ui.antuikit.com/embed/typography/document.md): Wrap native `h2`, `p`, `ul`, `blockquote` and `pre` in a root `Typography` to style Markdown or CMS output without classes.
- [Native tables](https://ui.antuikit.com/embed/typography/table.md): A native `<table>` inside a root `Typography` gets the same document styles, for a small pricing or comparison table.
- [Copyable](https://ui.antuikit.com/embed/typography/copyable.md): Set `copyable` to add a copy button, and pass `copyable.text` to copy a different value than the one shown, like a full link.
- [Copy tooltips](https://ui.antuikit.com/embed/typography/copyable-tooltips.md): Pass `copyable.tooltips` a pair of labels for before and after copying, or `false` to show no tooltip at all.
- [Custom copy icons](https://ui.antuikit.com/embed/typography/copyable-icon.md): Pass `copyable.icon` a pair of icons for before and after copying, which replace the default animated ones.
- [Editable](https://ui.antuikit.com/embed/typography/editable.md): Set `editable` to edit text in place, with `triggerType` to start from a click on the text and `maxLength` to cap its length.
- [Action placement](https://ui.antuikit.com/embed/typography/actions-placement.md): Set `actions={{ placement: "start" }}` to put the copy and edit buttons before the text instead of after it.
- [Ellipsis](https://ui.antuikit.com/embed/typography/ellipsis.md): Set `ellipsis` to cut `Text` at the end of one line, or pass `rows` to cut a `Paragraph` after that many lines.
- [Ellipsis with tooltip](https://ui.antuikit.com/embed/typography/ellipsis-tooltip.md): Pass `ellipsis={{ tooltip }}` to show the full text in a tooltip when the reader hovers the cut-off line.
- [Expandable ellipsis](https://ui.antuikit.com/embed/typography/ellipsis-expandable.md): Set `ellipsis.expandable` to add a link that opens the clamped text, which then stays open.
- [Collapsible ellipsis](https://ui.antuikit.com/embed/typography/ellipsis-collapsible.md): Set `expandable: "collapsible"` so the text can close again, and pass `symbol` a function to label both directions.
- [Controlled ellipsis](https://ui.antuikit.com/embed/typography/ellipsis-controlled.md): Pass `ellipsis.expanded` and `onExpand` to drive the clamp from your own state, here from a switch above the text.
- [Middle ellipsis](https://ui.antuikit.com/embed/typography/ellipsis-middle.md): Pass `ellipsis.suffix` to keep the end of the text visible and cut the middle instead, for file paths, IDs and keys.
- [Rows and suffix](https://ui.antuikit.com/embed/typography/ellipsis-rows.md): Pass `ellipsis.rows` a number, here set by the slider, and `suffix` to keep an attribution after whatever text still fits.
- [classNames and styles](https://ui.antuikit.com/embed/typography/semantic-dom.md): Pass `classNames` a class per part: `root` for the text, `action` for the copy and edit buttons, `textarea` for the editor.
- [Release note](https://ui.antuikit.com/embed/typography/article.md): A release note in a root `Typography`, with a `Title`, an editable summary, a copyable install command and an editable owner.
- [API keys](https://ui.antuikit.com/embed/typography/credentials.md): An API key card where each key is cut in the middle to keep its last characters, and the copy button copies the full key.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/typography`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Typography` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.