Typography installs into your project as a file you own. It takes the same props as Ant Design's Typography and adds size on Text and Paragraph. type gains tertiary, secondary is a step stronger, the copy and edit icons come from your icon pack, and code, kbd and pre follow the theme. Those rows are marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add typography
The first command sets up AntuikitProvider and the theme, and the second adds this component.
Import
Import from @/components/ui/typography, the file the install added to your project, never from antd.
import { Typography } from "@/components/ui/typography"
The compound parts
One registry item, five components. The four parts are properties of the root and are also exported by name, so either import works.
Typography is the article wrapper. It renders one <article> by default and styles the native elements inside it.
Typography.Title renders <h1> to <h5>, chosen by level.
Typography.Paragraph renders a <div> with a bottom margin, and is the only part that takes multi-line ellipsis.
Typography.Text renders a <span>.
Typography.Link renders an <a> with the link color.
1
import { Typography } from "@/components/ui/typography"
2
3
const { Title, Paragraph, Text, Link } = Typography
4
5
// or, the same four components by name
6
import { Title, Paragraph, Text, Link } from "@/components/ui/typography"
The four parts share one set of props, so copyable, editable and the decoration flags behave the same on each. textVariants is exported too, for an element that needs the size classes without the component.
The axes
The props that take a fixed set of values. A heading is sized by its level, so Title has no size.
level takes 1 to 5 on Title, and picks the heading tag. It defaults to 1. There is no 6, which logs a warning and renders an h1. Sizes come from fontSizeHeading1 to fontSizeHeading5 and shrink in compact mode.
size takes label, sm and xs on Text and Paragraph. Each is a step down the theme's ramp (13, 12 and 11px from a 14px base in the default theme), and each stays smaller than the one above it, in compact mode too. Unset keeps the base size.
type takes secondary, tertiary, success, warning and danger on all four parts. secondary uses colorTextSecondary, a step stronger than Ant Design's, and tertiary is the lighter gray Ant Design calls secondary.
actions.placement takes start and end, end by default. It decides whether the copy and edit buttons sit before or after the text.
ellipsis.expandable takes true and "collapsible", which lets the text close again. editable.triggerType takes ["icon"] (the default) and ["icon", "text"]. copyable.format takes "text/plain" and "text/html".
direction takes ltr and rtl, and component takes any HTML element for the root, article by default. Both are usually inherited rather than set each time.
Flags
The root <Typography> has no flags. They live on the four parts, where each decoration flag wraps the text in the matching element.
code, keyboard, mark, strong, italic, underline and delete render <code>, <kbd>, <mark>, <strong>, <i>, <u> and <del>. They combine in a fixed nesting order, whatever order you write them in. Title has no strong, because a heading is already bold.
disabled sets colorTextDisabled and changes nothing else. It is a look for text, not a control state.
copyable, editable and ellipsis each take a boolean or a config object. true means “with the defaults”, an object replaces the keys you set, and false turns the feature off.
Slots
The props that take a node. Most of them sit inside the config objects rather than at the top level.
children is the text itself. Keep it a string with copyable, editable or a measured ellipsis, because each of them reads the full text only from a string or a number.
copyable.icon is a [before, after] pair of icons and copyable.tooltips the same pair in words. editable.icon, editable.enterIcon and editable.tooltip are the matching three.
ellipsis.symbol labels the expand and collapse button (a node, or a function of expanded), ellipsis.suffix is the end kept after the cut, and ellipsis.tooltip takes a node or a TooltipProps object.
Copy and edit icons come from your icon pack. Your own copyable.icon or editable.icon replaces them, enterIcon: null removes the return hint, and copyable={false} stays off.
Events
The root has no event props of its own. The callbacks live in the config objects: copyable.onCopy, editable.onChange, ellipsis.onExpand and ellipsis.onEllipsis.
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector, because a part with a key keeps its name across updates.
1
<Typography
2
classNames={{
3
root: "…",
4
actions: "…",
5
action: "…",
6
textarea: "…",
7
}}
8
/>
A Tailwind class on one of these keys overrides the default style without !important. Setting a component token's CSS variable on the root has no effect, so style the part here or change the token in your theme.
API Reference
Typography
Typography's props. Rows marked antuikit in the Version column are added by the kit.
Typography.Text
Typography.Text's props. Rows marked antuikit in the Version column are added by the kit.
Typography.Title
Typography.Title's props. Rows marked antuikit in the Version column are added by the kit.
Typography.Paragraph
Typography.Paragraph's props. Rows marked antuikit in the Version column are added by the kit.
Typography.Link
Typography.Link's own props. It also takes Typography.Text's props, apart from size and the object form of ellipsis. Rows marked antuikit in the Version column are added by the kit.
actions
actions's props.
copyable
copyable's props. Rows marked antuikit in the Version column are added by the kit.
editable
editable's props. Rows marked antuikit in the Version column are added by the kit.