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:
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. You can use the same variant with different elements to maintain consistent styling while changing the semantic meaning.
This is a span element with muted styling.This is a blockquote element with blockquote styling.
The Typography component supports different font sizes:
Extra Small Text (xs)
Small Text (sm)
Medium Text (md)
Large Text (lg)
Extra Large Text (xl)
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