v0.8.1

Text

A foundational typography component for rendering inline and block text.

Text is the foundational typography component for rendering inline and block text. It provides consistent sizing, weight, and color options following the design system's type scale.

This is an enhanced version of the Text from Radix Themes.

Playground

The quick brown fox jumps over the lazy dog.

Installation

npm install @kushagradhawan/kookie-ui

Usage

import { Text, Flex } from '@kushagradhawan/kookie-ui';
 
export function MyText() {
  return (
    <Flex direction="column" gap="2">
      <Text size="3">Regular body text</Text>
      <Text size="2" emphasis="medium">Secondary text</Text>
      <Text size="1" weight="medium">Small label</Text>
    </Flex>
  );
}

Props

PropTypeDefaultDescription
as'span' | 'div' | 'label' | 'p''span'The HTML element to render.
size'0' | '1' | '2' | '3' | ... | '12'-The font size. Supports responsive values.
font'sans' | 'mono' | 'serif'-The font family. Overrides the theme font.
weight'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold'-The font weight. Supports responsive values.
colorAccentColor-The text color. Inherits the parent color if not set.
emphasis'loud' | 'medium' | 'quiet'-How strongly the text reads. With no color, it uses the gray ladder.
align'left' | 'center' | 'right'-Text alignment. Supports responsive values.
truncatebooleanfalseTruncate text with ellipsis when it overflows.
wrap'wrap' | 'nowrap' | 'pretty' | 'balance'-Text wrapping behavior.
leadingTrimbooleanfalseRemove leading trim for precise vertical alignment.
asChildbooleanfalseMerge props onto the child element.

Sizes

Text supports sizes from 0 (smallest) to 12 (largest).

<Flex direction="column" gap="2">
  <Text size="1">Size 1 - Fine print (12px)</Text>
  <Text size="2">Size 2 - UI text (14px)</Text>
  <Text size="3">Size 3 - Body text (16px)</Text>
  <Text size="4">Size 4 - Large body (18px)</Text>
  <Text size="5">Size 5 - Lead text (20px)</Text>
  <Text size="10">Size 10 - Display (72px)</Text>
  <Text size="11">Size 11 - Large display (86px)</Text>
  <Text size="12">Size 12 - Extra large display (104px)</Text>
</Flex>

Weights

Control text weight with the weight prop.

<Flex direction="column" gap="2">
  <Text weight="light">Light weight</Text>
  <Text weight="regular">Regular weight</Text>
  <Text weight="medium">Medium weight</Text>
  <Text weight="semibold">Semibold weight</Text>
  <Text weight="bold">Bold weight</Text>
</Flex>

Colors

Use semantic colors for different text purposes. Colored text reads a strong ink by default, so an error stays red and easy to read.

<Flex direction="column" gap="2">
  <Text>Default text color</Text>
  <Text color="blue">Link or info text</Text>
  <Text color="green">Success text</Text>
  <Text color="red">Error text</Text>
</Flex>

Emphasis

Use emphasis to rank text. loud is the strongest, medium is for secondary copy and quiet is for hints and metadata. Without color, the levels step down the gray scale. With color, they fade the same color.

<Flex direction="column" gap="2">
  <Text emphasis="loud">Primary text</Text>
  <Text emphasis="medium">Secondary text</Text>
  <Text emphasis="quiet">Hint text</Text>
  <Text color="red" emphasis="medium">Secondary error text</Text>
</Flex>

Text with no color and no emphasis inherits its color, so it matches the Button or Card it sits in.

Semantic Elements

Use the as prop to render appropriate HTML elements.

// Paragraph
<Text as="p" size="3">
  This renders as a paragraph element.
</Text>
 
// Label
<Text as="label" size="2" htmlFor="email">
  Email address
</Text>
 
// Div for block content
<Text as="div" size="2">
  Block-level text content
</Text>

Truncation

Truncate long text with ellipsis.

<Text truncate style={{ maxWidth: 200 }}>
  This is a very long text that will be truncated with an ellipsis
</Text>

Text Alignment

Align text horizontally.

<Flex direction="column" gap="2" width="100%">
  <Text align="left">Left aligned text</Text>
  <Text align="center">Center aligned text</Text>
  <Text align="right">Right aligned text</Text>
</Flex>

Responsive Props

Size and weight support responsive values.

<Text
  size={{ initial: '2', sm: '3', md: '4' }}
  weight={{ initial: 'regular', md: 'medium' }}
>
  Responsive text that grows on larger screens
</Text>

Polymorphic Usage

Use asChild for custom elements while keeping Text styles.

<Text asChild size="2" color="blue">
  <a href="/settings">Go to settings</a>
</Text>

© 2026 Kushagra Dhawan. Licensed under MIT. GitHub.

Theme

Accent color

Gray color

Appearance

Radius

Scaling

Panel background