sent here for Kiln
tailwind ecommerce nextjs template · React and HTML source
KilnTailwind ecommerce Next.js template
A Tailwind ecommerce Next.js template for makers selling small-batch physical goods, built so photography carries the layout.
- 56 / 56
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
Its full-bleed shelf frames six square product photographs on white bays across the shop, collection and product routes.
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs: install, use, customizepages, composed from 16 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Shop/
- site-header
- hero
- product-grid
- collection-split
- promises
- +3
Collection/collection- site-header
- page-header
- collection-browser
- site-footer
Ridge tumbler/product- site-header
- product-detail
- reviews
- product-grid
- site-footer
The making/making- site-header
- page-header
- collection-split
- firing-calendar
- product-grid
- +2
Delivery/delivery- site-header
- page-header
- delivery-rates
- promises
- returns-faq
- +2
Cart/cart- site-header
- page-header
- cart-contents
- site-footer
The parts/components- site-header
- hero
- product-grid
- collection-browser
- product-detail
- +11
The collection browser filters the shared catalogue by availability and exact price bands, sorts by shelf or price, announces result-count changes, and recovers from an empty result without inventing a backend. The cart also works: add the Ridge tumbler in the selected glaze, watch the header count change, edit quantities, remove lines, and see subtotal, delivery and total follow from one store. Seven pages include the shop front, collection, Ridge detail, making, delivery, cart and living styleguide. Sixteen sections, twenty-one primitives, twenty-one semantic tokens, three self-hosted OFL typefaces and thirteen AI-generated ceramics photographs ship in the same license. Eleven of the primitives are the repository's own component library, vendored unedited and refined here, so Escape, the focus trap, the focus return and the scroll lock behave the same in every theme that ships them. Built for Tailwind v4, Next.js 15 and React 19; nine client islands, everything else a server component. The seven routes ship a second time as a framework-free HTML template: compiled documents, one stylesheet, the same ceramics photography and vanilla JavaScript, with no build step to run.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project. 27 frames cover them, with 13 primitives sharing the ui/* frame.
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
The shelf: a full-bleed hairline plate of white bays, one square photograph per bay, running past the container to both page edges across the shop, collection, product, making and component routes.
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.333.
Kiln
A Tailwind ecommerce Next.js template for makers selling small-batch physical goods, built so photography carries the layout. Its full-bleed shelf frames six square product photographs on white bays across the shop, collection and product routes.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Newsreader
- text
- Karla
- mono
- Spline Sans Mono
- d1Ag
- d2Ag
- d3Ag
- d4Ag
- leadAg
- bodyAg
- smallAg
- captionAg
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.
every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdCompose a new page for the Kiln theme out of its existing sections, matching the shell, background rhythm and manifest entries of home/product/cart
- add-section/SKILL.mdAdd a new self-contained section component to the Kiln theme following its existing file, token, imagery and rhythm patterns, then wire it into a page, the styleguide and the manifest
- check-quality/SKILL.mdRun Kiln's own quality gate locally
- rebrand/SKILL.mdRe-colour the Kiln theme to a buyer's brand by editing tokens in themes/kiln/src/theme.css only, keeping both light and dark complete and re-verifying WCAG AA
- src/
- theme.css56 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/7 files
- components/16 files
- ui/24 files
- assets/14 images, 1 markdown file
- fonts/3 font files, 3 licenses
- app/7 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/7 compiled routes, deploy-ready — no build step
- src/the Nunjucks source the routes compile from
- scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
Your key goes in TAILTHEMES_LICENSE_KEY, and the registry entry goes in components.json. The snippet is on the docs page.
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
39 components, 7 pages and 56 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard license coversWhat do I actually get?
Does it include the pages I'd otherwise have to build?
Will it work with my stack?
How long before it stops looking like a template?
Can I use it for client work?
activity
- v2.7.3: The product page leads with name and price on a phone, reviews are the piece's own under one count with the first quote at display size, and dark mode's buttons are clay again.
- v2.7.2: Kiln states its delivery and returns promise once per page, with one wording of the 30-day window, and the collection page opens in the studio's voice.
- v2.7.1 — badge appearance moves to variant with tone deprecated for one minor, and one mode toggle drives both light and dark from the shared root
- v2.7.0: Eleven parts in both editions, and the cart drawer becomes a real modal layer
- v2.6.0: The disclosures open at the height they actually are, and the panels close
- v2.5.1: The doc set now names the HTML edition in the file maps, skills, and rebrand consequences
- v2.5: A shared field family every form now uses, and a busy state on the add-to-cart button
- v2.4: Separate Nunjucks source and framework-free HTML output for every route
- v2.3: Local collection filters, exact price sorting and a recoverable no-result shelf
- v2.2 — the cart is real: one store, every number arithmetic
- v2.1 — /making and /delivery: firing calendar, rates, returns
- v2.0 — Newsreader/Karla type, sage second hue, graded shoot, the shelf
- v1.1 — generated plaster ground in the hero, blended from tokens
- v1.0.0 — maker storefront: photography-led grid, cart drawer
- gift cardsplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.
