Text

Semantic text and MetricText primitives with size, weight, and color variants.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Large semibold text

Medium body — used for main content and descriptions across dashboard pages.

Small subtle — secondary copy, helper text, and metadata.

Extra small — labels, timestamps, and fine print.

$1,24,320-4.2%892

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { Text, MetricText } from "@payglocal_ui/flux-ui";

Example

<Text size="sm" color="subtle">Last updated 2 hours ago.</Text>
<MetricText size="xl">₹9,42,800</MetricText>