---
title: Component gallery
description: Built-in accessible Blume components and Markdown extensions in action.
---

Preview

:::tip[Readable by humans and agents]
Every documentation page has a Markdown mirror. Code is highlighted by Shiki at build time.
:::

**Credits**

100 credits = $1.00 face value.

**Dollars**

Dollar values are shown beside credit balances.

**[Owners](/app)**

Inspect usage and control budgets.

**[Merchants](/merchants)**

Publish and price useful agent tools.

**Approval and payment**

Owner approval does not itself establish payment completion.

**Ledger precision**

One credit is 1,000,000 microcredits.

## Package installs

```package-install
blume
```

## Diagrams and math

```mermaid
flowchart LR
  A[Agent identity] --> B[Eligible credits]
  B --> C[Tool request]
  B --> D[Human approval when needed]
  D --> E[Successful payment]
  E --> C
```

$$100\text{ credits} = \$1.00$$

## More built-ins

Blume includes Steps, Step, Callout, Card, CardGroup, Tabs, Tab, Badge, FileTree, Accordion, Expandable, Columns, CodeGroup, Frame, Tree, Panel, Tooltip, Tile, Prompt, Visibility, type/parameter tables, GitHub repository cards, live Component previews, CodeBlock, Diff, and icon rendering. [Full component reference](https://useblume.dev/docs/content/components).