Tea shop
A small online tea shop: a seasonal hero, a product grid with filter chips and quick add, a product page with a gallery, a brewing guide on a dial and a steep timer, and a cart drawer that ends in a printed receipt.
This example uses generated pictures from this site: art.ts. Copy that file from the repository, or use your own images in its place.
"use client";
import { TeaShop } from "@/components/miyuki-ui/tea-shop";
import { abstract, landscape } from "@/registry/lib/art";
function image(key: string) {
if (key === "hero") return landscape("yukimuro-snow-room", { mood: "snow", width: 1400, height: 700 });
const [id, part] = key.split(":");
if (part === "farm") return landscape(`tea-garden-${id}`, { mood: "dawn", width: 1000, height: 800 });
return abstract(part ? `${id}-${part}` : `tea-${id}`, { width: 800, height: 800 });
}
export default function TeaShopDemo() {
return <TeaShop image={image} />;
}Install
npx shadcn@latest add @miyuki-ui/tea-shopThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
TeaShop
Prop
Type
Studio Ledger
Money in and out of a small glass studio for one month at a time: balances, a cash-flow diagram, spending by category, the portfolio, a calendar of daily spending and every transaction.
Ticket booking
Booking a reserved train seat from start to finish: route, time, seats and payment on stepping stones, a running summary beside them, and the ticket with a tear-off stub at the end.