Menu
Documentation
v4.0.0-beta.4

Text

<BaseText /> · A text span or a smaller piece of content.

View SourceOpen Issue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urgent tamen et nihil remittunt. Et non ex maxima parte de tota iudicabis? Beatum, inquit. Ille incendat?

vue
<template>
  <BaseText size="md" weight="normal" lead="normal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urgent
    tamen et nihil remittunt. Et non ex maxima parte de tota iudicabis?
    Beatum, inquit. Ille incendat?
  </BaseText>
</template>

Features

  • Support all tailwind sizes
  • Support all tailwind weights
  • Support all tailwind leading

Anatomy

This component accepts any content as a child. You can customize the components's visual style by using the available props.

vue
<template>
  <BaseText>
    <!-- Content goes here -->
  </BaseText>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
size
default:"md"
"sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"

The size of the text.

lead
default:"normal"
"none" | "normal" | "tight" | "snug" | "relaxed" | "loose"

The lead of the text.

weight
default:"normal"
"normal" | "light" | "medium" | "semibold" | "bold" | "extrabold"

The weight of the text.

tracking
default:"normal"
"normal" | "tight" | "tighter" | "wide" | "wider" | "widest"

The letter spacing of the paragraph.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:"span"
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Slot Type
#default
any

Tag

Textarea