The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A component for displaying text with consistent styling and formatting.
Hello World
Import the Typography component from @bun-ui/react and use it in your project:
import { Typography } from "@bun-ui/react"<Typography>Hello World</Typography>The Typography component supports different variants for various text styles:
Heading 5
Heading 6
This is a paragraph with some text. It demonstrates the default paragraph styling.
This is a blockquote. It's styled with a left border and italic text.
This is a lead paragraph. It's slightly larger and has a muted color.
This is muted text.
You can render the Typography component as different HTML elements using the as prop:
This is a paragraph element with some text. The styling is determined by the element type, making it more semantic and maintainable.
This is a span element for inline text.This is a blockquote element for quoting content.
The Typography component supports different font sizes:
Extra Small Text (xs)
Small Text (sm)
Medium Text (md)
Large Text (lg)
Extra Large Text (xl)
2X Large Text (2xl)
3X Large Text (3xl)
4X Large Text (4xl)
You can adjust the font weight using the fontWeight prop:
Thin Text
Extra Light Text
Light Text
Normal Text
Medium Text
Semibold Text
Bold Text
Extra Bold Text
Use the truncate prop to add text truncation with an ellipsis:
This is a very long text that will not be truncated and will wrap to multiple lines
This is a very long text that will be truncated with an ellipsis when it exceeds the container width
| Prop | Type | Default | Description |
|---|---|---|---|
as | TypographyElement | - | The HTML element to render. Overrides the default element determined by the variant. |
fontSize | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "md" | The font size to apply. Controls the text size independently of the variant. |
fontWeight | "bold" | "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "extrabold" | "normal" | The font weight to apply. Controls the text weight independently of the variant. |
truncate | boolean | false | If true, truncates text with ellipsis when it overflows. Useful for single-line text that should be cut off with "...". |
variant | "list" | "h2" | "h3" | "p" | "blockquote" | "h1" | "h4" | "h5" | "h6" | "muted" | "lead" | "p" | The typography variant to apply. Determines the visual styling and default HTML element. |