React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreText

A flexible typography component with multiple variants and theme-specific styling

Interactive Playground

Customize the text properties and see the changes in real-time

The quick brown fox jumps over the lazy dog

All Variants

Different text variants for various use cases

Hyper

Hyper Text

Title

Title Text

Subtitle

Subtitle Text

Subtitle Small

Subtitle Small Text

Base

Base text for body content and paragraphs

Strong

Strong emphasized text

Caption

Caption text for small details

Styled

Styled text with custom appearance

Alignment Options

Different text alignment options

Left Aligned

This text is aligned to the left

Center Aligned

This text is centered

Right Aligned

This text is aligned to the right

Type Variations

Different semantic types

Default

Default text without special type

Danger

Danger text for errors and warnings

HTML Tags

Render as different HTML elements

Heading 1 (h1)

Heading 1 Text

Heading 2 (h2)

Heading 2 Text

Paragraph (p)

Paragraph text content

Span (span)

Inline span text

API Reference

Props

tag

React.ElementType - HTML element to render (default: 'p')

variant

'styled' | 'base' | 'title' | 'hyper' | 'subtitle' | 'subtitle-small' | 'strong' | 'caption' - Text style variant (default: 'base')

align

'left' | 'center' | 'right' - Text alignment (default: 'left')

type

'' | 'danger' - Semantic type (default: '')

layout

'default' | 'brim' | 'ode' | 'nova' | 'crest' | 'rung' | 'glint' - Theme-specific layout (auto-detected from theme)

children

React.ReactNode - Text content

Theme-Specific Styling

The StoreText component automatically adapts its styling based on the active theme. Each theme (brim, ode, nova, crest, rung, glint) has unique typography styles for each variant. The layout prop is auto-detected from the current theme, but can be overridden if needed.