SuikunUIPre-Alpha

Components > Text

Text

Standardize styles for headings, paragraphs, and other inline tags. Used for displaying text.

text-secondary-800 dark:text-secondary-400 text-base
import React from 'react'
import { Text } from '@components/ui';
() => {

  return (

    <Text>

      The quick brown fox jumps over the lazy dog.

    </Text>

  );

};

Installation

Copy and paste this Text primitive at components/ui/Text.tsx

Usage

import { Text } from '@components/ui/Text';
<Text>
  The quick brown fox jumps over the lazy dog.
</Text>

Examples

Kinds

There are six kinds of text. You can update the variant by the kind prop.

Default

Accent

Primary

Secondary

Muted

Success

Warn

Danger

Sizes

9xl: The q...

8xl: The quick...

7xl: The quick brow...

6xl: The quick brown fo...

5xl: The quick brown fox jum...

4xl: The quick brown fox jumps over the...

3xl: The quick brown fox jumps over the lazy dog.

lead: The quick brown fox jumps over the lazy dog.

2xl: The quick brown fox jumps over the lazy dog.

xl: The quick brown fox jumps over the lazy dog.

lg: The quick brown fox jumps over the lazy dog.

base: The quick brown fox jumps over the lazy dog.

sm: The quick brown fox jumps over the lazy dog.

xs: The quick brown fox jumps over the lazy dog.

Tags

h1: The quick brown...

h2: The quick brown fox jumps over the lazy dog.

h3: The quick brown fox jumps over the lazy dog.

h4: The quick brown fox jumps over the lazy dog.

h5: The quick brown fox jumps over the lazy dog.
h6: The quick brown fox jumps over the lazy dog.

p: The quick brown fox jumps over the lazy dog.

div: The quick brown fox jumps over the lazy dog.
span: The quick brown fox jumps over the lazy dog.
blockquote: The quick brown fox jumps over the lazy dog.
b: The quick brown fox jumps over the lazy dog. strong: The quick brown fox jumps over the lazy dog. i: The quick brown fox jumps over the lazy dog. em: The quick brown fox jumps over the lazy dog. small: The quick brown fox jumps over the lazy dog. del: The quick brown fox jumps over the lazy dog.

Headings

h1: The quick brown fox jumps over the lazy dog.

h2: The quick brown fox jumps over the lazy dog.

h3: The quick brown fox jumps over the lazy dog.

h4: The quick brown fox jumps over the lazy dog.

h5: The quick brown fox jumps over the lazy dog.
h6: The quick brown fox jumps over the lazy dog.

Paragraph

The quick brown fox jumps over the lazy dog.

Blockquote

The quick brown fox jumps over the lazy dog.
accent: The quick brown fox jumps over the lazy dog.
primary: The quick brown fox jumps over the lazy dog.
secondary: The quick brown fox jumps over the lazy dog.
muted: The quick brown fox jumps over the lazy dog.
success: The quick brown fox jumps over the lazy dog.
warn: The quick brown fox jumps over the lazy dog.
danger: The quick brown fox jumps over the lazy dog.

Inline Tags

The quick brown fox jumps over the lazy dog.

A paragraph with a span, bold, strong, italic, emphasis, small, and delete.

Disabled State

If used in conjunction with an input, you may toggle the disabled prop to true to signify disabled text.

A disabled text