# Trend Chip **Category**: react **URL**: https://ui.darkcode.dev/en/docs/react/components/trend-chip **Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(data-display)/trend-chip.mdx > A compact chip displaying a trend direction with percentage value, icon indicator, and contextual suffix *** ## Import ```tsx 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 `` is provided. ```tsx ``` ### Usage The `trend` prop drives both the arrow direction and the color: `up` → success, `down` → danger, `neutral` → warning. ```tsx import {TrendChip} from "@darkcode-ui/react"; export function TrendChipBasic() { return (
12.5% 8.2% 0.0%
); } ``` ### Trends ```tsx import {TrendChip} from "@darkcode-ui/react"; export function TrendChipTrends() { return (
12.5% 12.5% 12.5% 12.5%
8.2% 8.2% 8.2% 8.2%
); } ``` ### Custom Indicator Pass a custom icon as the child of `TrendChip.Indicator` to replace the default arrow. ```tsx import {TrendChip} from "@darkcode-ui/react"; import {ArrowDown, ArrowUp, Minus} from "@gravity-ui/icons"; export function TrendChipCustomIndicator() { return (
12.5% 8.2% 0.0%
); } ``` ### Prefix and Suffix Use `TrendChip.Prefix` and `TrendChip.Suffix` to add contextual text around the value. ```tsx import {TrendChip} from "@darkcode-ui/react"; export function TrendChipPrefixSuffix() { return (
+ 12.5 % - 340 pts 1,204 sales
); } ``` ### Sizes ```tsx import {TrendChip} from "@darkcode-ui/react"; export function TrendChipSizes() { return (
12.5% 12.5% 12.5%
); } ``` ### Variants ```tsx import {TrendChip} from "@darkcode-ui/react"; const variants = ["primary", "secondary", "tertiary", "soft"] as const; export function TrendChipVariants() { return (
{variants.map((variant) => (
12.5% 8.2% 0.0%
))}
); } ``` ## Related Components - **Avatar**: Display user profile images - **CloseButton**: Button for dismissing overlays - **Separator**: Visual divider between content ## Styling The TrendChip is built on top of the [Chip](/react/components/chip) component, so it inherits all of Chip's theming, variants, and sizing. ### Passing Tailwind CSS classes ```tsx import {TrendChip} from '@darkcode-ui/react'; function CustomTrendChip() { return ( 12.5% ); } ``` ### Customizing the component classes To customize the TrendChip component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes). ```css @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](https://getbem.com/) 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](https://github.com/DarkCode-Developers/darkcode-ui/blob/main/packages/styles/components/trend-chip.css)): #### 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](/react/components/chip) with trend-aware coloring and arrow icons. | Prop | Type | Default | Description | |------|------|---------|-------------| | `trend` | `"up" \| "down" \| "neutral"` | `"up"` | Trend direction; controls arrow icon and color (success / danger / warning) | | `size` | `"sm" \| "md" \| "lg"` | `"sm"` | Size variant | | `variant` | `"primary" \| "secondary" \| "soft" \| "tertiary"` | `"soft"` | Chip style variant | | `children` | `React.ReactNode` | - | Value text, optional Indicator, Prefix, and Suffix sub-components | 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. | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Custom SVG icon element | Also supports all native `svg` HTML attributes. ### TrendChip.Prefix Text displayed before the value. | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Prefix text | Also supports all native `span` HTML attributes. ### TrendChip.Suffix Text displayed after the value. | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Suffix text | Also supports all native `span` HTML attributes.