Text

A component for displaying text.

We provide high-quality products and services top priority.

Explore our wide range of products designed to make your life easier.

import { Text } from 'cwl-ui'
 
export function Default() {
  return (
    <div className="space-y-2">
      <Text>We provide high-quality products and services top priority.</Text>
      <Text>Explore our wide range of products designed to make your life easier.</Text>
    </div>
  )
}

Examples

With text alignment

Text components can take an align property to align text.

Left aligned

Center aligned

Right aligned

import { Text } from 'cwl-ui'
 
export function Align() {
  return (
    <div className="space-y-2">
      <Text align="left">Left aligned</Text>
      <Text align="center">Center aligned</Text>
      <Text align="right">Right aligned</Text>
    </div>
  )
}

With text color

Text comes with a color property to change the text color.

Primary

Secondary

Positive

Destructive

import { Text } from 'cwl-ui'
 
export function Align() {
  return (
    <div className="flex space-x-2">
      <Text color="primary">Primary</Text>
      <Text color="secondary">Secondary</Text>
      <Text color="positive">Positive</Text>
      <Text color="destructive">Destructive</Text>
    </div>
  )
}

With text sizes

Text comes in a few different sizes.

Xsmall text

Small text

Standard text

Large text

import { Text } from 'cwl-ui'
 
export function Sizes() {
  return (
    <div className="space-y-2">
      <Text size="xsmall">Xsmall text</Text>
      <Text size="small">Small text</Text>
      <Text size="standard">Standard text</Text>
      <Text size="large">Large text</Text>
    </div>
  )
}

With text truncation

Text can be truncated with an ellipsis.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, eaque eligendi maiores, aperiam et exercitationem possimus quisquam fuga iste qui, voluptate laboriosam ipsa. Iusto, nesciunt. Vel incidunt iure quas voluptate dicta qui alias ea aliquam voluptatum, architecto facilis provident laborum iste commodi tempora labore itaque eligendi corrupti. Accusamus, inventore quaerat?

import { Text } from 'cwl-ui'
 
export function Color() {
  return (
    <div className="flex flex-col space-y-4">
      <Text truncate={1}>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, eaque eligendi
        maiores, aperiam et exercitationem possimus quisquam fuga iste qui, voluptate laboriosam
        ipsa. Iusto, nesciunt. Vel incidunt iure quas voluptate dicta qui alias ea aliquam
        voluptatum, architecto facilis provident laborum iste commodi tempora labore itaque eligendi
        corrupti. Accusamus, inventore quaerat?
      </Text>
      <Text truncate={2}>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, eaque eligendi
        maiores, aperiam et exercitationem possimus quisquam fuga iste qui, voluptate laboriosam
        ipsa. Iusto, nesciunt. Vel incidunt iure quas voluptate dicta qui alias ea aliquam
        voluptatum, architecto facilis provident laborum iste commodi tempora labore itaque eligendi
        corrupti. Accusamus, inventore quaerat?
      </Text>
      <Text truncate={3}>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, eaque eligendi
        maiores, aperiam et exercitationem possimus quisquam fuga iste qui, voluptate laboriosam
        ipsa. Iusto, nesciunt. Vel incidunt iure quas voluptate dicta qui alias ea aliquam
        voluptatum, architecto facilis provident laborum iste commodi tempora labore itaque eligendi
        corrupti. Accusamus, inventore quaerat?
      </Text>
    </div>
  )
}

Installation

To install, copy the code below and paste into your project.

import * as React from 'react'
 
import { type TextProperties } from './lib/types'
import { cn } from './lib/utils'
 
const Text = ({
  align,
  children,
  color = 'primary',
  className,
  size,
  truncate,
  Tag = 'p',
  ...props
}: TextProperties) => {
  return (
    <Tag
      className={cn(
        size === 'xsmall' && 'text-xs font-normal leading-4',
        size === 'small' && 'text-sm font-normal leading-5',
        size === 'standard' && 'text-base font-normal leading-6',
        size === 'large' && 'text-lg font-normal leading-7',
        align === 'left' && 'text-left',
        align === 'center' && 'text-center',
        align === 'right' && 'text-right',
        color === 'primary' && 'text-primary',
        color === 'secondary' && 'text-secondary',
        color === 'destructive' && 'text-destructive',
        color === 'positive' && 'text-positive',
        truncate === 1 && 'line-clamp-1',
        truncate === 2 && 'line-clamp-2',
        truncate === 3 && 'line-clamp-3',
        className,
      )}
      {...props}
    >
      {children}
    </Tag>
  )
}
 
Text.displayName = 'Text'
 
export { Text }