# TreeChip

> Compact node template for the radial and dendrogram layouts: a pill with a color dot, the name and, optionally, the descendant count.

Source: https://ui.jcsoftdev.com/docs/components/tree-chip

Compact node template for the radial and dendrogram layouts: a pill with a
color dot, the name and, optionally, the descendant count.

## Import

```ts
import { TreeChip } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/tree-chart`.

## Usage

```tsx
<TreeChip node={root} state={idle} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `node` * | `TreeChartNode` |  |  |
| `state` * | `TreeNodeState` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-treechip--default)
- [Highlighted](/storybook/?path=/story/charts-primitives-treechip--highlighted)
- [Without Count](/storybook/?path=/story/charts-primitives-treechip--without-count)

## Source

`packages/ui/src/charts/tree-chart/tree-card.tsx`