# TreeCard

> Default node template: a card with a color rail, an avatar (image or initials), the name, a subtitle and an optional badge.

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

Default node template: a card with a color rail, an avatar (image or
initials), the name, a subtitle and an optional badge. Fills its box.

## Import

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

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

## Usage

```tsx
<TreeCard 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-treecard--default)
- [Highlighted](/storybook/?path=/story/charts-primitives-treecard--highlighted)
- [Dimmed](/storybook/?path=/story/charts-primitives-treecard--dimmed)
- [Name Only](/storybook/?path=/story/charts-primitives-treecard--name-only)
- [With Photo](/storybook/?path=/story/charts-primitives-treecard--with-photo)

## Source

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