One UIX

TextBlock

TextBlock component with multiple variations including alignment, colors, gradient, sizes, and max width.

🧱 TextBlock

TextBlock is a flexible component used to display headings, subheadings, and supporting text with alignment, color, and size options.

Welcome

Beautiful Headline

This is a simple, clean description text below the heading.

✳️ Default

Welcome

Beautiful Headline

This is a simple, clean description text below the heading.

JSX
<TextBlock
  tag="Welcome"
  heading="Beautiful Headline"
  text="This is a simple, clean description text below the heading."
/>

🌈 Gradient Heading

Introducing

Gradient Power

The heading uses a colorful gradient.

JSX
<TextBlock
  tag="Introducing"
  heading="Gradient Power"
  text="The heading uses a colorful gradient."
  gradient
/>

🎯 Alignment

Left Aligned

Left

Aligned to the Left

Text starts from left side by default.

JSX
<TextBlock
  tag="Left"
  heading="Aligned to the Left"
  text="Text starts from left side by default."
  pos="left"
/>

Center Aligned

Center

Centered Heading

Text is centered in this variation.

JSX
<TextBlock
  tag="Center"
  heading="Centered Heading"
  text="Text is centered in this variation."
  pos="center"
/>

Right Aligned

Right

Right Aligned

This block is aligned to the right.

JSX
<TextBlock
  tag="Right"
  heading="Right Aligned"
  text="This block is aligned to the right."
  pos="right"
/>

🔠 Sizes

Small

Small Size

This heading uses small size style.

JSX
<TextBlock
  heading="Small Size"
  size="sm"
  text="This heading uses small size style."
/>

Medium

Medium Size

This heading uses medium size style.

JSX
<TextBlock
  heading="Medium Size"
  size="md"
  text="This heading uses medium size style."
/>

Large

Large Size

This heading uses large size style.

JSX
<TextBlock
  heading="Large Size"
  size="lg"
  text="This heading uses large size style."
/>

Extra Large

Extra Large

This is the largest size available.

JSX
<TextBlock
  heading="Extra Large"
  size="xl"
  text="This is the largest size available."
/>

📏 Max Width

Constrained Text

This text block has a constrained max-width using 'max-w-md'.

JSX
<TextBlock
  heading="Constrained Text"
  text="This text block has a constrained max-width using 'max-w-md'."
  maxWidth="max-w-md"
/>

🎨 Custom Colors

Custom

Colored Heading

This uses custom text colors.

JSX
<TextBlock
  tag="Custom"
  tagColor="text-blue-500"
  heading="Colored Heading"
  headingColor="text-purple-600"
  text="This uses custom text colors."
  textColor="text-gray-500"
/>

Components

Components