Typography

Typography component for consistent text styles across your application.

Heading 1

This is a large heading text

Heading 2

Section heading

Heading 3

Subsection heading

This is a regular paragraph text. It provides the main content and information to the reader. The text is readable and well-spaced for optimal user experience.

Lead Text

This is lead text, typically used for introductions or important content.

Small Text

This is smaller text, often used for captions or secondary information.

"This is a blockquote. It's used for highlighting quotes or important information."

Inline code: const example = true

## Installation

React

npx @galaxy-stack/nebula-cli add typography

Vue

npx @galaxy-stack/nebula-cli add typography

Angular

npx @galaxy-stack/nebula-cli add typography

global

# If you have installed galaxy-design globally
galaxy-design add typography

Usage

React

import { Typography } from '@/components/ui/typography'

export default function TypographyDemo() {
  return (
    <Typography variant="h1">
      Welcome to Galaxy UI
    </Typography>
  )
}

Vue

<script setup lang="ts">
import { Typography } from '@/components/ui/typography'
</script>

<template>
  <Typography variant="h1">
    Welcome to Galaxy UI
  </Typography>
</template>

Angular

import { Component } from '@angular/core'
import { TypographyComponent } from '@/components/ui/typography'

@Component({
  selector: 'app-typography-demo',
  standalone: true,
  imports: [TypographyComponent],
  template: `
    <ui-typography variant="h1">
      Welcome to Galaxy UI
    </ui-typography>
  `
})
export class TypographyDemo {}

API Reference

Props

Prop	Type	Default	Description	Frameworks
variant	'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'blockquote' | 'code' | 'lead' | 'large' | 'small' | 'muted'	'p'	Typography style variant	All
as	ElementType	-	Override element type	React, Vue, Angular
className	string	''	CSS class names for rendered element	All
children	ReactNode	-	Text or inline content	All

Examples

Headings

React

<div className="space-y-4">
  <Typography variant="h1">Heading 1</Typography>
  <Typography variant="h2">Heading 2</Typography>
  <Typography variant="h3">Heading 3</Typography>
  <Typography variant="h4">Heading 4</Typography>
</div>

Vue

<template>
  <div class="space-y-4">
    <Typography variant="h1">Heading 1</Typography>
    <Typography variant="h2">Heading 2</Typography>
    <Typography variant="h3">Heading 3</Typography>
    <Typography variant="h4">Heading 4</Typography>
  </div>
</template>

Angular

<div class="space-y-4">
  <ui-typography variant="h1">Heading 1</ui-typography>
  <ui-typography variant="h2">Heading 2</ui-typography>
  <ui-typography variant="h3">Heading 3</ui-typography>
  <ui-typography variant="h4">Heading 4</ui-typography>
</div>

Paragraph

React

<Typography variant="p">
  This is a paragraph with default styling. It provides consistent text
  rendering across your application with proper line height and spacing.
</Typography>

Vue

<template>
  <Typography variant="p">
    This is a paragraph with default styling. It provides consistent text
    rendering across your application with proper line height and spacing.
  </Typography>
</template>

Angular

<ui-typography variant="p">
  This is a paragraph with default styling. It provides consistent text
  rendering across your application with proper line height and spacing.
</ui-typography>

Blockquote

React

<Typography variant="blockquote">
  "The only way to do great work is to love what you do." - Steve Jobs
</Typography>

Vue

<template>
  <Typography variant="blockquote">
    "The only way to do great work is to love what you do." - Steve Jobs
  </Typography>
</template>

Angular

<ui-typography variant="blockquote">
  "The only way to do great work is to love what you do." - Steve Jobs
</ui-typography>

Inline Code

React

<Typography variant="p">
  Install the package using{' '}
  <Typography variant="code" as="code">
    npm install galaxy-ui
  </Typography>
</Typography>

Vue

<template>
  <Typography variant="p">
    Install the package using
    <Typography variant="code" as="code">
      npm install galaxy-ui
    </Typography>
  </Typography>
</template>

Angular

<ui-typography variant="p">
  Install the package using
  <ui-typography variant="code" as="code">
    npm install galaxy-ui
  </ui-typography>
</ui-typography>

Lead Text

React

<Typography variant="lead">
  A modal dialog that interrupts the user with important content and expects
  a response.
</Typography>

Vue

<template>
  <Typography variant="lead">
    A modal dialog that interrupts the user with important content and expects
    a response.
  </Typography>
</template>

Angular

<ui-typography variant="lead">
  A modal dialog that interrupts the user with important content and expects
  a response.
</ui-typography>

Large Text

React

<Typography variant="large">
  Large text for emphasis
</Typography>

Vue

<template>
  <Typography variant="large">
    Large text for emphasis
  </Typography>
</template>

Angular

<ui-typography variant="large">
  Large text for emphasis
</ui-typography>

Small Text

React

<Typography variant="small">
  Small text for secondary information
</Typography>

Vue

<template>
  <Typography variant="small">
    Small text for secondary information
  </Typography>
</template>

Angular

<ui-typography variant="small">
  Small text for secondary information
</ui-typography>

Muted Text

React

<Typography variant="muted">
  Muted text with reduced opacity for less important content
</Typography>

Vue

<template>
  <Typography variant="muted">
    Muted text with reduced opacity for less important content
  </Typography>
</template>

Angular

<ui-typography variant="muted">
  Muted text with reduced opacity for less important content
</ui-typography>

Complete Example

React

<div className="space-y-6 max-w-3xl">
  <Typography variant="h1">Building Better UIs</Typography>

  <Typography variant="lead">
    Galaxy UI provides a comprehensive set of components to help you build
    beautiful and accessible user interfaces.
  </Typography>

  <Typography variant="h2">Getting Started</Typography>

  <Typography variant="p">
    Start by installing the CLI tool using{' '}
    <Typography variant="code" as="code">npm install -g galaxy-ui</Typography>.
    Then initialize your project with the components you need.
  </Typography>

  <Typography variant="blockquote">
    "Design is not just what it looks like and feels like. Design is how it works."
  </Typography>

  <Typography variant="h3">Features</Typography>

  <Typography variant="p">
    Our component library includes everything you need to build modern web applications.
  </Typography>

  <Typography variant="small">
    Last updated: January 2025
  </Typography>
</div>

Vue

<template>
  <div class="space-y-6 max-w-3xl">
    <Typography variant="h1">Building Better UIs</Typography>

    <Typography variant="lead">
      Galaxy UI provides a comprehensive set of components to help you build
      beautiful and accessible user interfaces.
    </Typography>

    <Typography variant="h2">Getting Started</Typography>

    <Typography variant="p">
      Start by installing the CLI tool using
      <Typography variant="code" as="code">npm install -g galaxy-ui</Typography>.
      Then initialize your project with the components you need.
    </Typography>

    <Typography variant="blockquote">
      "Design is not just what it looks like and feels like. Design is how it works."
    </Typography>

    <Typography variant="h3">Features</Typography>

    <Typography variant="p">
      Our component library includes everything you need to build modern web applications.
    </Typography>

    <Typography variant="small">
      Last updated: January 2025
    </Typography>
  </div>
</template>

Angular

<div class="space-y-6 max-w-3xl">
  <ui-typography variant="h1">Building Better UIs</ui-typography>

  <ui-typography variant="lead">
    Galaxy UI provides a comprehensive set of components to help you build
    beautiful and accessible user interfaces.
  </ui-typography>

  <ui-typography variant="h2">Getting Started</ui-typography>

  <ui-typography variant="p">
    Start by installing the CLI tool using
    <ui-typography variant="code" as="code">npm install -g galaxy-ui</ui-typography>.
    Then initialize your project with the components you need.
  </ui-typography>

  <ui-typography variant="blockquote">
    "Design is not just what it looks like and feels like. Design is how it works."
  </ui-typography>

  <ui-typography variant="h3">Features</ui-typography>

  <ui-typography variant="p">
    Our component library includes everything you need to build modern web applications.
  </ui-typography>

  <ui-typography variant="small">
    Last updated: January 2025
  </ui-typography>
</div>

Accessibility

• Uses semantic HTML elements (h1, h2, p, blockquote, code, etc.)
• Maintains proper heading hierarchy
• Ensures adequate contrast ratios
• Provides consistent text sizing and spacing

Author

Bui Trong Hieu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bui Trong Hieu (kevinbui)