Trend ChipUpdated

Import

import { TrendChip } from '@darkcode-ui/react';

Anatomy

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

Plain-text children are automatically wrapped with the .trend-chip__value element, and a default directional arrow is rendered when no <TrendChip.Indicator> is provided.

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

Usage

The trend prop drives both the arrow direction and the color: up → success, down → danger, neutral → warning.

import {TrendChip} from "@darkcode-ui/react";

export function TrendChipBasic() {
  return (
    <div className="flex flex-wrap items-center gap-3">

Trends

import {TrendChip} from "@darkcode-ui/react";

export function TrendChipTrends() {
  return (
    <div className="flex flex-col gap-4">

Custom Indicator

Pass a custom icon as the child of TrendChip.Indicator to replace the default arrow.

import {TrendChip} from "@darkcode-ui/react";
import {ArrowDown, ArrowUp, Minus} from "@gravity-ui/icons";

export function TrendChipCustomIndicator() {
  return (

Prefix and Suffix

Use TrendChip.Prefix and TrendChip.Suffix to add contextual text around the value.

import {TrendChip} from "@darkcode-ui/react";

export function TrendChipPrefixSuffix() {
  return (
    <div className="flex flex-wrap items-center gap-3">

Sizes

import {TrendChip} from "@darkcode-ui/react";

export function TrendChipSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">

Variants

import {TrendChip} from "@darkcode-ui/react";

const variants = ["primary", "secondary", "tertiary", "soft"] as const;

export function TrendChipVariants() {

Styling

The TrendChip is built on top of the Chip component, so it inherits all of Chip's theming, variants, and sizing.

Passing Tailwind CSS classes

import {TrendChip} from '@darkcode-ui/react';

function CustomTrendChip() {
  return (
    <TrendChip className="rounded-full px-3 font-semibold" trend="up">
      <TrendChip.Indicator className="size-4" />
      12.5%
    </TrendChip>
  );
}

Customizing the component classes

To customize the TrendChip component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .trend-chip {
    @apply gap-1.5;
  }

  .trend-chip__value {
    @apply font-semibold tabular-nums;
  }

  .trend-chip[data-trend="up"] .trend-chip__indicator {
    @apply text-success;
  }
}

DarkCode UI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The TrendChip component uses these CSS classes (View source styles):

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 DarkCode UI Chip with trend-aware coloring and arrow icons.

Also supports all DarkCode UI 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.