Board

An issue dashboard on a 4px grid — 16px icons, labels and ids on the left, numbers and dates on the right. Navigate inside the frame — you are still on Tawny.

Open in new tab

designs/board

Issues11

About

Board is a single-page issue dashboard you can use. Sidebar views filter the list, Filter narrows by status, and Display switches between the aligned list and a three-column board.

Select a row to change its status, or create an issue from the button and the command palette. Scaffold a copy with the create command below, then replace the sample issues with your own.

Get the template

Scaffold a local copy with your preferred package manager, or paste a prompt into a coding agent.

Terminal

pnpm create tawny@latest board my-app

Template source

Browse every file in templates/board.

templates/board

README.md

# Board

An issue dashboard. Sidebar, toolbar, and a 4px list: 16px icons on the text line, labels and ids on the left, numbers and dates on the right.

Design by [Hugo Lin](https://1chooo.com).

## Quick start

### Option A — create-next-app

```bash
npx create-next-app@latest my-board \
  --example "https://github.com/1chooo/tawny" \
  --example-path "templates/board"
```

### Option B — create-tawny CLI

```bash
npx create-tawny@latest board my-board
```

Then:

```bash
cd my-board
pnpm install
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000).

## Customize these files

| File | What to change |
|------|----------------|
| `lib/issues.ts` | Sample issues |
| `components/dashboard.tsx` | Sidebar, toolbar, and list |
| `app/layout.tsx` | Site title and metadata |

### Placeholders

Search for `{{AUTHOR_NAME}}`, `{{AUTHOR_EMAIL}}`, `{{GITHUB_USERNAME}}`, and `{{CITY_NAME}}` across the project and replace them, or use Option B which does this automatically.

## Stack

- Next.js 16 App Router & React
- Tailwind CSS v4

## License

MIT — see [LICENSE](./LICENSE).