Trend Chip

Usage

"use client";

import { TrendChip } from "@thenamespace/uikit";

export const DemoDefaultExample = () => (

Anatomy

Import the TrendChip component and access all parts using dot notation.

import { TrendChip } from "@thenamespace/uikit";

<TrendChip>
  <TrendChip.Prefix />
  <TrendChip.Indicator />
  <TrendChip.Suffix />
</TrendChip>;

Custom Indicator

"use client";

import { TrendChip } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Prefix And Suffix

"use client";

import { TrendChip } from "@thenamespace/uikit";

export const DemoPrefixAndSuffixExample = () => (

Sizes

"use client";

import { TrendChip } from "@thenamespace/uikit";

export const DemoSizesExample = () => (

Tabular Nums

"use client";

import { TrendChip } from "@thenamespace/uikit";

export const DemoTabularNumsExample = () => (

Variants

"use client";

import { TrendChip } from "@thenamespace/uikit";

export const DemoVariantsExample = () => (

CSS Classes

Base & Size Classes

• .trend-chip - Base chip wrapper
• .trend-chip--sm - Small size (default)
• .trend-chip--md - Medium size
• .trend-chip--lg - Large size

Element Classes

• .trend-chip__indicator - Trend arrow icon
• .trend-chip__value - Numeric value text
• .trend-chip__prefix - Text before the value
• .trend-chip__suffix - Text after the value

Data Attributes

• [data-trend="up"] / [data-trend="down"] / [data-trend="neutral"] on the root - Current trend direction

API Reference

TrendChip

The root component. Wraps Namespace UIKit Chip with trend-aware coloring and arrow icons.

Also supports all Namespace UIKit Chip props except children, color, and size.

TrendChip.Indicator

Custom trend arrow icon. When omitted, a default directional arrow is rendered based on the trend prop.

Also supports all native svg HTML attributes.

TrendChip.Prefix

Text displayed before the value.

Also supports all native span HTML attributes.

TrendChip.Suffix

Text displayed after the value.

Also supports all native span HTML attributes.