Atelier

Atelier is a white editorial home for Jane Mug — photography, a shop, and the same bag. Open the live showcase. Navigate inside the frame — you are still on Tawny.

Open in v0Open in new tab

designs/atelier

jane@example.com

Account

Jane Mug

Mugs

Oat Cylinder Mug

Satin oatmeal with iron speckle

$42

9 in this firing

Back to the shop

About

Atelier is the same Jane Mug studio with a new layout: a slim contact bar, a full-width kiln photograph, a studio note, category cards, the making process, sample notes, and the current pieces.

Open a piece to read the glaze and add it to the bag. Sign in and studio admin are the same flows as Cobalt. Edit the sections in lib/content.ts. This preview has no phone, address, or social links, and the quotes are marked Sample.

Get the template

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

Open in v0

Terminal

pnpm create tawny@latest atelier my-app

Template source

Browse every file in templates/atelier.

templates/atelier

README.md

# Atelier

A white, editorial ceramics site for Jane Mug: home, shop, piece pages, sign-in, and the sales dashboard. The bag keeps a few sample pieces in the browser. The dashboard numbers are sample data.

This preview has no phone, street address, opening hours, or social profiles. Testimonial cards are marked Sample. Policy pages say the policy is not written yet.

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

## Quick start

### Option A — create-next-app

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

### Option B — create-tawny CLI

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

Then:

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

Open [http://localhost:3000](http://localhost:3000). The shop is `/shop`. Sign in is `/login`. Studio admin is `/admin`.

## Customize these files

| File | What to change |
|------|----------------|
| `lib/content.ts` | Nav, contact, hero, story, categories, process, sample quotes, footer, and policies. Set `visible` to false, or leave a list empty, to hide that section. |
| `lib/products.ts` | Piece names, prices, photos, and stock |
| `lib/sales.ts` | Revenue, restock, coupons, and customers |
| `app/layout.tsx` | Site title and metadata |

There is no phone, address, or social link in the sample. Add them in `lib/content.ts` when you have them. Delete the sample quotes, or set `testimonials.visible` to false, before treating the carousel as real reviews.

## Stack

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

## License

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