Typography

Data Display

Type system components (H1-H6, P, Lead, Small, Muted) with consistent spacing and semantic HTML

Headings

Standard heading elements with consistent styling.

Heading 1 - The largest heading

Heading 2 - Section heading

Heading 3 - Subsection heading

Heading 4 - Minor heading

Heading 5 - Small heading
Heading 6 - Smallest heading

Using Compact API

This is also a Heading 1

Text Variants

This is a regular paragraph. It has standard styling with proper line height and spacing. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a lead paragraph. It's larger and muted, perfect for introductory text or important summaries.

This is large text. It's slightly bigger than regular text and uses semibold weight.
This is small text. Perfect for captions or footnotes.

This is muted text. It has reduced opacity and is great for secondary information.

Colors

Default - 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

Accent - The quick brown fox jumps over the lazy dog

Success - The quick brown fox jumps over the lazy dog

Warning - The quick brown fox jumps over the lazy dog

Error - The quick brown fox jumps over the lazy dog

Info - The quick brown fox jumps over the lazy dog

Muted - The quick brown fox jumps over the lazy dog

Alignment

This text is aligned to the left (default)

This text is centered

This text is aligned to the right

This text is justified. It will stretch to fill the entire width of the container, creating even margins on both sides. This is particularly useful for long paragraphs of text in articles or documentation.

Font Weights

Thin (100) - The quick brown fox jumps over the lazy dog

Extra Light (200) - The quick brown fox jumps over the lazy dog

Light (300) - The quick brown fox jumps over the lazy dog

Normal (400) - The quick brown fox jumps over the lazy dog

Medium (500) - The quick brown fox jumps over the lazy dog

Semibold (600) - The quick brown fox jumps over the lazy dog

Bold (700) - The quick brown fox jumps over the lazy dog

Extra Bold (800) - The quick brown fox jumps over the lazy dog

Black (900) - The quick brown fox jumps over the lazy dog

Text Transform

Normal case - The Quick Brown Fox

Uppercase - The Quick Brown Fox

Lowercase - The Quick Brown Fox

capitalize - the quick brown fox

Text Decoration

No decoration - Normal text

Underline - This text is underlined

Overline - This text has a line above it

Line through - This text is crossed out

Truncation

Normal (no truncate)

This is a very long text that demonstrates the truncation feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Truncate

This is a very long text that demonstrates the truncation feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ellipsis

This is a very long text that demonstrates the truncation feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clip

This is a very long text that demonstrates the truncation feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code & Quotes

Blockquote

"The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle."
— Steve Jobs

Inline Code

To install the package, run npm install saha-ui in your terminal.

Code Block

const greeting = "Hello, World!";
console.log(greeting);

List

  • First item in the list
  • Second item in the list
  • Third item in the list
  • Nested lists are supported
    • Nested item 1
    • Nested item 2

Article Example

Getting Started with React Components

Learn how to build beautiful and accessible React components with modern best practices and TypeScript support.

Introduction

React has revolutionized the way we build user interfaces. By breaking down complex UIs into smaller, reusable components, we can create maintainable and scalable applications.

Why Component Libraries?

Component libraries provide a consistent design system and accelerate development. They offer:

  • Consistent styling across your application
  • Accessibility features built-in
  • TypeScript support for type safety
  • Responsive design out of the box

Getting Started

To get started, install the package using npm install saha-ui. Then import the components you need:

import { Button, Card, Typography } from 'saha-ui';
Remember to wrap your app with the ThemeProvider for proper styling and dark mode support.

Best Practices

When building with components, keep these principles in mind for optimal results and maintainability.

This article was last updated on January 2025. Check the documentation for the latest features.

Usage Guidelines

When to Use

  • Text content
  • Headings
  • Semantic HTML

Accessibility

  • Semantic HTML headings
  • Proper document outline

Performance

  • Native elements
  • Zero JavaScript

Common Mistakes

  • Skipping heading levels
  • Using wrong element for style (h1 for bold)

Frequently Asked Questions

Typography includes H1-H6, Paragraph, Lead, Small, and Muted with consistent spacing.
Yes, Typography uses proper HTML elements for SEO and accessibility.

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Badge

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Previous

Tree

Next

Backdrop