Text
To display text in a variety of sizes and weights.
div element.Usage
Sphinx of black quartz, judge my vow.
<Text>Sphinx of black quartz, judge my vow.</Text>Examples
As another element
Utilize the as property to specify the HTML tag. This changes semantic markup without affecting visual style.
This is a p element.
This is a
This is a span element.<>
<Text as="p">
This is a <Code>p</Code> element.
</Text>
<Text as="label">
This is a <Code>label</Code> element.
</Text>
<Text as="div">
This is a <Code>div</Code> element.
</Text>
<Text as="span">
This is a <Code>span</Code> element.
</Text>
</>Font Size
Use size for text size. It makes line height and spacing smaller as text size grows and also ensures text size is even
for better layout.
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
<>
<Text size="xs">Ag</Text>
<Text size="sm">Ag</Text>
<Text size="md">Ag</Text>
<Text size="lg">Ag</Text>
<Text size="xl">Ag</Text>
<Text size="2xl">Ag</Text>
<Text size="3xl">Ag</Text>
<Text size="4xl">Ag</Text>
<Text size="5xl">Ag</Text>
<Text size="6xl">Ag</Text>
<Text size="7xl">Ag</Text>
</>Font Weight
Use the fontWeight prop to set the text weight.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
<>
<Text className="font-light">Sphinx of black quartz, judge my vow.</Text>
<Text className="font-normal">Sphinx of black quartz, judge my vow.</Text>
<Text className="font-medium">Sphinx of black quartz, judge my vow.</Text>
<Text className="font-semibold">Sphinx of black quartz, judge my vow.</Text>
<Text className="font-bold">Sphinx of black quartz, judge my vow.</Text>
</>Installation
Insert code snippet into your project. Update import paths as needed.
import { createElement } from 'react'
import { tv, type VariantProps } from 'tailwind-variants'
type As = 'p' | 'span' | 'div' | 'label'
export type TextProps = {
as?: As
} & TextVariantProps &
JSX.IntrinsicElements[As]
export const Text = (props: TextProps) => {
const { as = 'p', size, className, ...elementProps } = props
const classes = styles({ size, className })
return createElement(as, {
className: classes,
...elementProps,
})
}
type TextVariantProps = VariantProps<typeof styles>
const styles = tv(
{
base: 'text',
variants: {
variant: { heading: 'text--variant_heading' },
size: {
xs: 'text--size_xs',
sm: 'text--size_sm',
md: 'text--size_md',
lg: 'text--size_lg',
xl: 'text--size_xl',
'2xl': 'text--size_2xl',
'3xl': 'text--size_3xl',
'4xl': 'text--size_4xl',
'5xl': 'text--size_5xl',
'6xl': 'text--size_6xl',
'7xl': 'text--size_7xl',
},
},
},
{ twMerge: false },
)
import { type JSX, mergeProps, splitProps } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import { type VariantProps, tv } from 'tailwind-variants'
type As = 'p' | 'span' | 'div' | 'label'
export type TextProps = {
as?: As
} & TextVariantProps &
JSX.IntrinsicElements[As]
export const Text = (props: TextProps) => {
const mergedProps = mergeProps({ as: 'p' }, props)
const [variantProps, textProps] = splitProps(mergedProps, ['size', 'class'])
const [localProps, rootProps] = splitProps(textProps, ['as'])
const className = styles(variantProps)
return <Dynamic component={localProps.as} class={className} {...rootProps} />
}
type TextVariantProps = VariantProps<typeof styles>
const styles = tv(
{
base: 'text',
variants: {
variant: { heading: 'text--variant_heading' },
size: {
xs: 'text--size_xs',
sm: 'text--size_sm',
md: 'text--size_md',
lg: 'text--size_lg',
xl: 'text--size_xl',
'2xl': 'text--size_2xl',
'3xl': 'text--size_3xl',
'4xl': 'text--size_4xl',
'5xl': 'text--size_5xl',
'6xl': 'text--size_6xl',
'7xl': 'text--size_7xl',
},
},
},
{ twMerge: false },
)
Not yet available