Yugen UI

Templates

Templates

Ready-made apps built with Yugen UI — one command gives you a running project, or open one on StackBlitz with nothing to install.

Templates use the yugen-ui npm package, so upgrading is just npm update; the UI code in src/ is yours. Every release regenerates the templates from the very blocks on these docs — the previews below are the code you get.

Starter

Featuredtemplates/vite-starter

A blank project, ready to go: theme, toast, @/ alias and SEO basics.

ViteReact 19Tailwind v4Blank
Open in StackBlitzSource
My app

Your project is running.

Vite, React and Tailwind CSS v4 are set up with Yugen UI: saved theme, toast, keyboard and screen reader support. Edit src/Welcome.tsx and save to see it change.

Open the docsNext steps

Next steps

  1. Replace this page

    Render your app in src/App.tsx instead of <Welcome />. The provider, saved theme and toast stay.

  2. Add components

    Import them from yugen-ui, for example import { DataGrid } from "yugen-ui". Every docs page has examples to copy.

  3. Change the brand colour

    Switch between Sakura and Web in the menu at the top. For your own colour, create a palette in Theme Designer and paste the CSS into src/index.css.

Explore

幽玄yūgen: quiet beauty in subtle things.

Built with Yugen UI · Vite · React · Tailwind CSS v4

The preview is live — try the navigation, search and theme switcher right inside the frame.

  • Light / dark / high contrast, Sakura and Web brands, persisted with no flash on load
  • YugenProvider in place: toast(), Tooltip, focus rings, RTL
  • @/ → src alias for your code (vite.config + tsconfig)
  • SEO basics: description, Open Graph, theme-color, favicon, robots.txt
  • A short English welcome page (Vietnamese with --lang vi), text in src/content/
  • The Mincho font loads only the Japanese glyphs the page uses (a few kB)
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template starter cd my-app npm run dev

SaaS

Featuredtemplates/vite-saas

An 8-page SaaS app: sidebar, Ctrl K command palette, notifications and account menu.

ViteReact 19Tailwind v48 pages
Open in StackBlitzSource

Overview

Key numbers for Sakura Studio over the last 30 days.

Revenue

$52.4K

+12.4% vs last month

New customers

2,341

+5.2% vs last month

Churn rate

3.1%

−0.8% vs last month

Recent transactions

5 transactions in the last 7 days.

  • Cherry Blossom CafeFood & drink · Today−$6
  • Green MarketShopping · Yesterday−$48
  • October salaryIncome · Oct 15+$4,200
  • Ride shareTransport · Oct 14−$14
  • Streaming planEntertainment · Oct 12−$16

Savings goals

Goals tracked in 2026.

Retirement fund

70%

$42k / $60k

Kyoto in cherry blossom season

80%

$4k / $5k

Emergency fund

20%

$3k / $15k

The preview is live — try the navigation, search and theme switcher right inside the frame.

  • Sidebar Nav → Drawer on narrow screens (container queries)
  • Ctrl / ⌘ K command palette: navigate, switch theme, quick actions
  • Light / dark / high contrast + 3 brands, persisted with no flash on load
  • Real paths (/analytics), per-page title & meta description; every page loads on demand
  • SEO basics: description, Open Graph, theme-color, robots.txt
  • English text and sample data (Vietnamese with --lang vi), kept in src/content/
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template saas cd my-app npm run dev

Blog

Featuredtemplates/vite-blog

A Markdown blog: search, tags, table of contents and build-time SEO for every post.

ViteMarkdownSEO
Open in StackBlitzSource
Sakura Notes

Latest posts

Interface design, React and Tailwind CSS. A new post every week.

1 min read

Welcome to Sakura Notes

This blog is a starter template. Write posts in Markdown, build the interface with Yugen UI, and get SEO out of the box.

#Yugen UI#Guides
1 min read

Writing in Markdown

All the syntax the blog supports in one post, from headings and lists to highlighted code, quotes, tables, images and links.

#Markdown#Guides
© 2026 Dat Tran · Built with Yugen UISitemap

The preview is live — try the navigation, search and theme switcher right inside the frame.

  • Add src/content/<lang>/posts/*.md to publish (frontmatter: title, date, tags, draft)
  • Yugen UI's safe parser: highlighted code, tables, quotes, images, internal links
  • Real URLs /posts/<slug>/ via the History API, no router library
  • One HTML file per post: title, description, canonical, Open Graph, JSON-LD
  • Generates sitemap.xml, rss.xml, robots.txt and 404.html; runs on any static host
  • Light / dark / high contrast, no flash on load
  • English text and sample posts (Vietnamese with --lang vi); SEO and RSS follow that language
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template blog cd my-app npm run dev

More templates

Dashboard

templates/vite-dashboard

A 4-page sales dashboard: KPIs, charts and a customer table, fed by a mock API with latency.

ViteReact 19Charts4 pages
Open in StackBlitzSource

Overview

Sales, orders and conversion for the selected dates.

Net revenue
Orders
Average order value
Conversion rate

Net revenue

Orders by channel

Where the orders came from

Revenue by category

Net revenue

Recent orders

Latest orders in the selected dates

  • Overview, Revenue, Customers, Settings; sidebar → Drawer on narrow screens
  • One date range (DateRangePicker with presets) for every card and chart
  • StatTile with sparklines, LineChart, BarChart, DonutChart
  • DataGrid: sorting, filters, search, pagination, CSV export
  • Loading, empty and error states from src/api.ts, adjustable in Settings
  • English, or Vietnamese with --lang vi; lazy pages, real URLs via the History API
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template dashboard cd my-app npm run dev

AI chat

templates/vite-ai-chat

An AI chat app: saved conversations and streaming answers with reasoning, steps and sources.

ViteReact 19Yugen LabsStreaming
Open in StackBlitzSource
  • Conversation list: new, rename, delete, saved in localStorage; Drawer on narrow screens
  • Streaming Markdown answers with Reasoning, a step-by-step Trace and Citation sources
  • Stop with the button or Esc; copy and regenerate answers
  • PromptInput with attachments (button, drag and drop, paste); Enter sends, Shift+Enter adds a line
  • One sendMessage(messages, { signal }) adapter: a mock by default, your endpoint in one line
  • Lazy routes /, /c/:id, /settings; English text, Vietnamese with --lang vi
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template ai-chat cd my-app npm run dev

Next.js starter

templates/next-starter

A Next.js App Router project: theme in a cookie so the server renders it, no flash.

Next.js 16App RouterReact 19Tailwind v4
Open in StackBlitzSource
  • YugenProvider in one Client Component (src/app/providers.tsx), wrapped around the app in layout.tsx
  • Theme and brand in cookies: the server writes data-theme on <html>; a first visit follows the OS setting
  • The home page is a Server Component using Yugen components; the Settings form is a Client Component
  • Fluent icons through a "use client" file so Server Components can use them
  • metadata per page, next/font (Noto Sans with Vietnamese glyphs), a 404 page
  • English text, Vietnamese with --lang vi; CI builds it with next build and checks every page
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template next-starter cd my-app npm run dev

Glass

templates/vite-glass

A journal of cherry blossom season in Japan: full-bleed photos, glass navigation that refracts.

ViteReact 19Yugen LabsGlass
Open in StackBlitzSource
  • Glass sidebar from 768px (an icon rail until 1024px); a header and a tab bar that shrinks while scrolling below
  • Kyoto, Tokyo, Hirosaki and Mount Fuji in bloom, with a hero photo running under the sidebar
  • The edges of every glass surface bend the photo behind them (GlassRefraction, Chromium browsers)
  • Trip page: glass toolbar with grouped actions, a photo Carousel, a glass bottom sheet with snap points
  • Explore: a world map with every trip pinned at its coordinates, nearby pins grouped; filters, zoom and search float in clear glass
  • Settings: a preview over a bright, a blossom and a night photo; theme, brand, glass or solid, clear or regular
  • Lazy routes /, /trips/:id, /explore, /settings; English text, Vietnamese with --lang vi
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template glass cd my-app npm run dev

Landing

templates/vite-landing

A product landing page: pricing, FAQ and a sign-up form, with HTML and SEO built ahead of time.

ViteReact 19SEOLighthouse 95+
Open in StackBlitzSource
  • Hero with two calls to action, logo row, feature grid, testimonials, an Accordion FAQ, footer
  • Pricing with a monthly / yearly switch; plans and prices live in src/content/ and feed the JSON-LD offers
  • Sign-up form with Field and a small validation function, no form library; a toast on success
  • A Vite plugin writes title, description, canonical, Open Graph, JSON-LD and the first screen into index.html
  • Lighthouse 95+ on mobile in all four categories: what is below the first screen loads after it, no layout shift
  • Light / dark / high contrast; English text, Vietnamese (prices in VND) with --lang vi
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template landing cd my-app npm run dev

Admin

templates/vite-admin

Customers and orders: a server-paged table, validated forms and sign-in with a one-time code.

ViteReact 19CRUDSign-in
Open in StackBlitzSource
  • DataGrid paged, sorted and filtered by the server; search and a column picker
  • Select rows to export them as CSV or delete them; deletes are confirmed in a Dialog
  • Create and edit in a Drawer, validated with react-hook-form + zod
  • Optimistic updates with useOptimisticList: a failed request rolls back, with Retry in the toast
  • Sign in, forgot password, one-time code (InputOTP); protected pages bring you back after sign-in
  • A mock API with latency and random errors in one file; English, Vietnamese with --lang vi
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template admin cd my-app npm run dev

Docs

templates/vite-docs

A Markdown documentation site: table of contents, Ctrl K search and static HTML per page.

ViteMarkdownSEOSearch
Open in StackBlitzSource
  • Each folder in src/content/<lang>/docs/ is a sidebar section, each .md file a page, ordered by front matter
  • Sidebar Nav → Drawer on narrow screens; a table of contents that highlights the current heading; previous / next
  • Ctrl / ⌘ K search over page titles and h2 / h3 headings, accents ignored; the index loads when it opens
  • Code with a copy button, tabs across languages, npm / pnpm / yarn / bun tabs for install commands; callouts
  • One HTML file per page: title, description, canonical, Open Graph; generates sitemap.xml and 404.html
  • The first load holds the front matter only; each page's text loads when it opens
  • English text and 10 sample pages (Vietnamese with --lang vi); light / dark / high contrast
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template docs cd my-app npm run dev

Store

templates/vite-store

A small shop: filters kept in the URL, a cart in a Sheet and a validated multi-step checkout.

ViteReact 19ShopCheckout
Open in StackBlitzSource
  • Product grid filtered by category (TagPicker), price range (Slider) and sort; filters live in the URL
  • Product page: Carousel gallery, rating, colours in a SwatchPicker, sizes, quantity in a SpinButton
  • Cart in a Sheet: a side panel on wide screens, a bottom sheet on phones; saved in localStorage
  • Checkout in a four-step Wizard, each step checked with react-hook-form + zod; a pretend payment
  • Order confirmation page; prices formatted with Intl for the language (USD or VND)
  • Products drawn in SVG, no photos needed; English, Vietnamese with --lang vi
Create a project with the CLI (copy the template, install dependencies, start the dev server)
npx create-yugen-ui@latest my-app --template store cd my-app npm run dev

Don't need a whole app?

Add Yugen UI to an existing project with Quick start, or grab individual pieces from Blocks.