---
title: "Feature bento"
description: "Five feature tiles, each a live mini demo: an hours chart, budget meters, a week strip, search and switches."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/feature-bento
---

# Feature bento

Five feature tiles, each a live mini demo: an hours chart, budget meters, a week strip, search and switches.

Built from Chart, ToggleGroup, Meter, Command, Kbd, Field and Switch. The chart switches between all and billable hours, the week strip shows each day's deadlines, and the search filters as you type. Demos share one height from tablet width up, so titles line up across a row. Three columns on a wide page, two at tablet width with the chart spanning both, one on phones.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/feature-bento
```

## Dependencies
- npm: lucide-react@^1.33.0, recharts@^3.8.0
- edbn: edbn-base, badge, chart, command, field, kbd, meter, switch, toggle-group

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More features blocks

All 5, with install commands: https://ui.edbn.me/docs/blocks/features · https://ui.edbn.me/docs/blocks/features.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt