Typography Skit UI

skit ui

Typography

Basic text writing, including headings, body text, lists, and more.

When you need copyable/editable/ellipsis texts.

When need to display a title or paragraph contents in Articles/Blogs/Notes.

h1. Skit Ui h2. Skit Ui h3. Skit Ui h4. Skit Ui h5. Skit Ui h6. Skit Ui


# Import the component
import { Text } from "skit-ui/typograhy"

  <Text level={6} text="h1. Skit Ui" />
  <Text level={5} text="h2. Skit Ui" />
  <Text level={4} text="h3. Skit Ui" />
  <Text level={3} text="h4. Skit Ui" />
  <Text level={2} text="h5. Skit Ui" />
  <Text level={1} text="h6. Skit Ui" />

Colors

h1. Skit Ui h1. Skit Ui h2. Skit Ui h3. Skit Ui h4. Skit Ui


# Import the component
import { Text } from "skit-ui/typograhy"

  <Text level={1} text="h1. Skit Ui" />
  <Text level={1} text="h1. Skit Ui" type="secondary" />
  <Text level={1} text="h2. Skit Ui" type="success" />
  <Text level={1} text="h3. Skit Ui" type="warning" />
  <Text level={1} text="h4. Skit Ui" type="danger"/>

Paragraph

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita corrupti quia repellat inventore deserunt aliquid illo vitae deleniti unde aut? Velit numquam ab corporis veritatis enim sint aspernatur ad voluptates!


# Import the component
import { Paragraph } from "skit-ui/typograhy"
      <Paragraph>
        Lorem ipsum dolor sit amet consectetur adipisicing
      </Paragraph>
      <Paragraph  type="secondary">
        Lorem ipsum dolor sit amet consectetur adipisicing
      </Paragraph>
      <Paragraph  type="danger">
        Lorem ipsum dolor sit amet consectetur adipisicing
      </Paragraph>
      <Paragraph  type="warning">
        Lorem ipsum dolor sit amet consectetur adipisicing
      </Paragraph>
      <Paragraph  type="success">
        Lorem ipsum dolor sit amet consectetur adipisicing
      </Paragraph>