Phara UI v2.x
Login

Text

A component for consistent typography across your application.

Basic

Default text styling.

This is a default paragraph of text.

Blade 
<x-ui::text>This is a default paragraph of text.</x-ui::text>
Sizes

Control the font size using the size prop.

Extra Small Text (xs)

Small Text (sm)

Base Text (base)

Large Text (lg)

Extra Large Text (xl)

Blade 
<x-ui::text size="xs">Extra Small Text</x-ui::text>
<x-ui::text size="sm">Small Text</x-ui::text>
<x-ui::text size="base">Base Text (Default)</x-ui::text>
<x-ui::text size="lg">Large Text</x-ui::text>
<x-ui::text size="xl">Extra Large Text</x-ui::text>
Variants

Apply semantic color variants to the text.

Default text color

Muted text color

Primary text color

Success text color

Danger text color

Blade 
<x-ui::text variant="default">Default text color</x-ui::text>
<x-ui::text variant="muted">Muted text color</x-ui::text>
<x-ui::text variant="primary">Primary text color</x-ui::text>
<x-ui::text variant="success">Success text color</x-ui::text>
<x-ui::text variant="danger">Danger text color</x-ui::text>
Custom Tags

Change the underlying HTML tag (defaults to p).

This is rendered as a span tag.
This is rendered as a div tag.
Blade 
<x-ui::text tag="span">This is rendered as a span tag.</x-ui::text>
<x-ui::text tag="div" class="font-bold">This is rendered as a div tag.</x-ui::text>