Typography

Hyperlinks create a web of information, allowing readers to explore related topics in more detail.

Build Custom Web UIs

Title for Headings

Highly customizable components for building modern websites and applications that look and feel the way you want.

Caption

CodeKbd

Modern
Customizable
Responsive
Accessible

Installation

Download and place typography components in tailus-ui/typography folder or install each component individually.

📂 tailus-ui
   📂 typography
       📄 Caption.tsx
       📄 Code.tsx
       📄 Display.tsx
       📄 index.ts
       📄 Kbd.tsx
       📄 Link.tsx
       📄 List.tsx
       📄 Text.tsx
       📄 Title.tsx

// ... your other components

Usage

Import the needed components and use them in your project.

import {
    Text,
    Link,
    List,
    Display,
    Title,
    Caption,
    Code,
    Kbd
} from "@tailus-ui/typography";

const MyComponent = () => (
    <div>
        <Display>Build Custom Web UIs</Display>
        <Title className="mt-6" size="3xl">Title for Headings</Title>
        <Text>
            Highly <Link variant="underlined" size="base" href="https://tailus.io" target="_blank" rel="noopener noreferrer">customizable components</Link> for building <Text as="strong">modern</Text> websites and <Text as="em">applications</Text> that look and feel the way you want.
        </Text>
        <Caption className="mb-6">Caption</Caption>
        
        <div className="flex gap-3">
            <Code className="-mt-px">Code</Code>
            <Kbd className="-mb-px">Kbd</Kbd>
        </div>
        <List neutral>
            <li>Modern</li>
            <li>Customizable</li>
            <li>Responsive</li>
            <li>Accessible</li>
        </List>
    </div>
)

Responsive

Some of the typography components props such as size, align, weight support responsive values. You can pass a string or an object to the prop where the key is the breakpoint and the value is the prop value.

<Display 
    as="h1"

    size={{
        initial: "4xl",
        sm: "5xl",
        md: "6xl",
        lg: "7xl",
        xl: "8xl",
        xxl: "9xl"
    }}

    align={{
        initial: "left",
        sm: "center",
    }}

    weight={{
        initial: "bold",
        sm: "black",
    }}
>
    Build Custom Web UIs
</Display>

The breakpoints are defined as follows: