Chào mừng đến với Nhật ký Sakura
Blog này là một starter template — viết bài bằng Markdown, dựng giao diện bằng Yugen UI, sẵn sàng cho SEO.
#Yugen UI#Hướng dẫn
Templates
Templates
Ứng dụng dựng sẵn bằng Yugen UI — một lệnh là có dự án chạy được, hoặc mở thẳng trên StackBlitz không cần cài gì.
Template dùng gói npm
yugen-ui nên nâng cấp chỉ cần npm update; mã giao diện trong src/ là của bạn. Mỗi bản phát hành, template được sinh lại từ chính các block trên docs — preview dưới đây là mã bạn nhận được.Starter
Nổi bật
templates/vite-starterDự án trống, cấu hình sẵn sàng: theme, toast, alias @/ và SEO cơ bản.
ViteReact 19Tailwind v4Trang trắng
Ứng dụng của tôi
Dự án đã chạy.
Vite, React và Tailwind CSS v4 đã cấu hình sẵn với Yugen UI: lưu theme người dùng chọn, toast, bàn phím và trình đọc màn hình. Sửa src/Welcome.tsx rồi lưu để thấy trang đổi.
Bước tiếp theo
Thay trang này
Render ứng dụng của bạn trong
src/App.tsxthay cho<Welcome />. Provider, theme đã lưu và toast vẫn giữ.Thêm component
Import từ yugen-ui, ví dụ
import { DataGrid } from "yugen-ui". Mỗi trang tài liệu có ví dụ để chép.Đổi màu thương hiệu
Chuyển giữa Sakura và Web ở menu phía trên. Muốn màu riêng, tạo bảng màu trong Theme Designer rồi dán CSS vào
src/index.css.
Preview chạy thật — bấm thử điều hướng, tìm kiếm, đổi theme ngay trong khung.
- Theme sáng / tối / tương phản cao, thương hiệu Sakura và Web, ghi nhớ, không nháy khi tải
- YugenProvider bọc sẵn: toast(), Tooltip, focus ring, RTL
- Alias @/ → src cho mã của bạn (vite.config + tsconfig)
- SEO cơ bản: description, Open Graph, theme-color, favicon, robots.txt
- Trang chào ngắn bằng tiếng Anh (tiếng Việt với --lang vi), chữ trong src/content/
- Font Mincho chỉ tải đúng các ký tự Nhật dùng trong trang (vài kB)
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template starter
cd my-app
npm run devSaaS
Nổi bật
templates/vite-saasỨng dụng SaaS 8 trang: sidebar, bảng lệnh Ctrl K, thông báo và menu tài khoản.
ViteReact 19Tailwind v48 trang
Tổng quan
Số liệu chính của Sakura Studio trong 30 ngày qua.
Doanh thu
1,28 tỷ ₫
+12,4% so với tháng trướcKhách hàng mới
2.341
+5,2% so với tháng trướcTỉ lệ rời bỏ
3,1%
−0,8% so với tháng trướcGiao dịch gần đây
5 giao dịch trong 7 ngày qua.
- Quán cà phê Hoa Anh ĐàoĂn uống · Hôm nay−65.000 ₫
- Siêu thị XanhMua sắm · Hôm qua−482.000 ₫
- Lương tháng 10Thu nhập · 15/10+28.500.000 ₫
- Đặt xe công nghệDi chuyển · 14/10−96.000 ₫
- Gói xem phimGiải trí · 12/10−260.000 ₫
Mục tiêu tiết kiệm
Các mốc đang theo dõi năm 2026 (triệu ₫).
Quỹ hưu trí
70%
420 / 600 triệu
Du lịch Kyoto mùa hoa
80%
68 / 85 triệu
Quỹ khẩn cấp
21%
21 / 100 triệu
Preview chạy thật — bấm thử điều hướng, tìm kiếm, đổi theme ngay trong khung.
- Sidebar Nav → Drawer trên màn hẹp (container query)
- Bảng lệnh Ctrl / ⌘ K: chuyển trang, đổi theme, hành động nhanh
- Sáng / tối / tương phản cao + 3 thương hiệu, lưu lại, không nháy khi tải
- Đường dẫn thật (/analytics), tiêu đề & meta description theo trang; mỗi trang nạp lười
- SEO cơ bản: description, Open Graph, theme-color, robots.txt
- Chữ và dữ liệu mẫu bằng tiếng Anh (tiếng Việt với --lang vi), nằm trong src/content/
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template saas
cd my-app
npm run devBlog
Nổi bật
templates/vite-blogBlog viết bằng Markdown: tìm kiếm, thẻ, mục lục và SEO sinh sẵn cho từng bài.
ViteMarkdownSEO
Bài viết mới
Thiết kế giao diện, React và Tailwind CSS — mỗi tuần một bài.
Viết bài bằng Markdown
Mọi cú pháp blog hỗ trợ — tiêu đề, danh sách, code có tô màu, trích dẫn, bảng, ảnh và link — trong một bài.
#Markdown#Hướng dẫn
SEO cho blog tĩnh: template đã làm sẵn những gì
HTML riêng cho từng bài, canonical, Open Graph, JSON-LD, sitemap.xml và RSS — sinh tự động mỗi lần build.
#SEO#Vite
Preview chạy thật — bấm thử điều hướng, tìm kiếm, đổi theme ngay trong khung.
- Thêm file src/content/<lang>/posts/*.md là có bài (frontmatter: title, date, tags, draft)
- Parser an toàn của Yugen UI: code tô màu, bảng, trích dẫn, ảnh, link nội bộ
- URL thật /posts/<slug>/ bằng History API, không thêm router
- Mỗi bài một file HTML: title, description, canonical, Open Graph, JSON-LD
- Tự sinh sitemap.xml, rss.xml, robots.txt, 404.html; chạy trên mọi host tĩnh
- Theme sáng / tối / tương phản cao, không nháy khi tải
- Chữ và bài mẫu bằng tiếng Anh (tiếng Việt với --lang vi); SEO, RSS theo ngôn ngữ đó
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template blog
cd my-app
npm run devTemplate khác
Dashboard
templates/vite-dashboardDashboard bán hàng 4 trang: KPI, biểu đồ và bảng khách hàng, dữ liệu từ API giả lập có độ trễ.
ViteReact 19Charts4 trang
Tổng quan
Doanh số, đơn hàng và tỉ lệ chuyển đổi trong khoảng ngày đã chọn.
Doanh thu thuần
Đơn hàng
Giá trị đơn trung bình
Tỉ lệ chuyển đổi
Doanh thu thuần
Đơn hàng theo kênh
Đơn hàng đến từ đâu
Doanh thu theo danh mục
Doanh thu thuần
Đơn hàng gần đây
Các đơn mới nhất trong khoảng ngày đã chọn
- Tổng quan, Doanh thu, Khách hàng, Cài đặt; sidebar → Drawer trên màn hẹp
- Một khoảng ngày (DateRangePicker có preset) cho mọi thẻ và biểu đồ
- StatTile có sparkline, LineChart, BarChart, DonutChart
- DataGrid: sắp xếp, lọc, tìm kiếm, phân trang, xuất CSV
- Trạng thái đang tải, trống và lỗi từ src/api.ts, chỉnh được trong Cài đặt
- Tiếng Anh, hoặc tiếng Việt với --lang vi; trang tải lười, URL thật bằng History API
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template dashboard
cd my-app
npm run devAI chat
templates/vite-ai-chatỨng dụng chat AI: lưu hội thoại, câu trả lời stream dừng được, kèm suy luận, các bước và nguồn.
ViteReact 19Yugen LabsStreaming
- Danh sách hội thoại: tạo, đổi tên, xoá, lưu trong localStorage; Drawer trên màn hẹp
- Câu trả lời Markdown dạng stream kèm Reasoning, Trace từng bước và nguồn Citation
- Dừng bằng nút hoặc phím Esc; sao chép và tạo lại câu trả lời
- PromptInput có đính kèm (nút, kéo thả, dán); Enter gửi, Shift+Enter xuống dòng
- Một adapter sendMessage(messages, { signal }): mặc định là mock, nối endpoint của bạn bằng một dòng
- Route /, /c/:id, /settings nạp lười; chữ tiếng Anh, tiếng Việt với --lang vi
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template ai-chat
cd my-app
npm run devNext.js starter
templates/next-starterDự án Next.js App Router: theme lưu trong cookie để server render đúng, không nháy.
Next.js 16App RouterReact 19Tailwind v4
- YugenProvider trong một Client Component (src/app/providers.tsx), bọc app ở layout.tsx
- Theme và brand trong cookie: server ghi sẵn data-theme lên <html>; lần đầu theo cài đặt hệ điều hành
- Trang chủ là Server Component dùng component Yugen; form Cài đặt là Client Component
- Icon Fluent qua một file "use client" để Server Component dùng được
- metadata theo trang, next/font (Noto Sans, đủ dấu tiếng Việt), trang 404
- Chữ tiếng Anh, tiếng Việt với --lang vi; CI build bằng next build và kiểm tra từng trang
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template next-starter
cd my-app
npm run devGlass
templates/vite-glassNhật ký mùa hoa anh đào ở Nhật Bản: ảnh tràn viền, điều hướng glass có khúc xạ ở mép.
ViteReact 19Yugen LabsGlass
- Sidebar glass từ 768px (thanh icon tới 1024px); màn hẹp có header và thanh tab thu gọn khi cuộn xuống
- Kyoto, Tokyo, Hirosaki và núi Phú Sĩ mùa hoa nở, ảnh hero tràn dưới sidebar
- Mép của mọi bề mặt glass bẻ cong ảnh phía sau (GlassRefraction, trình duyệt Chromium)
- Trang chuyến đi: toolbar glass nhóm thao tác, Carousel ảnh, bottom sheet glass có nấc
- Khám phá: bản đồ thế giới, ghim theo toạ độ thật, gộp ghim gần nhau; bộ lọc, phóng to và tìm kiếm nổi bằng glass clear
- Cài đặt: xem trước trên ảnh sáng, ảnh hoa và ảnh đêm; theme, brand, glass hoặc đặc, clear hoặc thường
- Route /, /trips/:id, /explore, /settings nạp lười; chữ tiếng Anh, tiếng Việt với --lang vi
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template glass
cd my-app
npm run devLanding
templates/vite-landingTrang giới thiệu sản phẩm: bảng giá, hỏi đáp, form đăng ký; HTML và SEO sinh sẵn lúc build.
ViteReact 19SEOLighthouse 95+
- Hero hai lời kêu gọi, hàng logo, lưới tính năng, nhận xét, hỏi đáp bằng Accordion, chân trang
- Bảng giá đổi theo tháng / năm; giá và gói nằm trong src/content/, cũng là offers trong JSON-LD
- Form đăng ký dùng Field và một hàm kiểm tra nhỏ, không thư viện form; báo thành công bằng toast
- Plugin Vite ghi title, description, canonical, Open Graph, JSON-LD và màn hình đầu vào index.html
- Lighthouse trên di động từ 95 điểm ở cả bốn mục: phần dưới màn hình đầu nạp sau, không xê dịch bố cục
- Sáng / tối / tương phản cao; chữ tiếng Anh, tiếng Việt (giá VND) với --lang vi
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template landing
cd my-app
npm run devAdmin
templates/vite-adminTrang quản trị khách hàng và đơn hàng: bảng phân trang trên server, form có kiểm tra, đăng nhập OTP.
ViteReact 19CRUDĐăng nhập
- DataGrid phân trang, sắp xếp và lọc trên server; tìm kiếm, chọn cột hiển thị
- Chọn nhiều hàng để xuất CSV hoặc xoá; xoá luôn hỏi lại bằng Dialog
- Thêm và sửa trong Drawer, kiểm tra bằng react-hook-form + zod
- Cập nhật lạc quan với useOptimisticList: lỗi thì hoàn tác, toast có nút Thử lại
- Đăng nhập, quên mật khẩu, mã OTP (InputOTP); trang cần đăng nhập đưa về đúng chỗ sau khi đăng nhập
- API giả lập có độ trễ và lỗi ngẫu nhiên trong một file; tiếng Anh, tiếng Việt với --lang vi
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template admin
cd my-app
npm run devDocs
templates/vite-docsTrang tài liệu từ Markdown: mục lục, tìm kiếm Ctrl K và HTML sinh sẵn cho từng trang.
ViteMarkdownSEOTìm kiếm
- Mỗi thư mục trong src/content/<lang>/docs/ là một phần của sidebar, mỗi file .md là một trang, thứ tự theo front matter
- Sidebar Nav → Drawer trên màn hẹp; mục lục tô đậm đề mục đang đọc; trang trước / trang sau
- Tìm kiếm Ctrl / ⌘ K trên tiêu đề trang và đề mục h2 / h3, không phân biệt dấu; chỉ mục chỉ tải khi mở
- Code có nút sao chép, gộp nhiều ngôn ngữ thành tab, tab npm / pnpm / yarn / bun cho lệnh cài; khối lưu ý
- Mỗi trang một file HTML: title, description, canonical, Open Graph; tự sinh sitemap.xml và 404.html
- Lần tải đầu chỉ có front matter, nội dung từng trang tải khi mở
- Chữ và 10 trang mẫu bằng tiếng Anh (tiếng Việt với --lang vi); theme sáng / tối / tương phản cao
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template docs
cd my-app
npm run devStore
templates/vite-storeCửa hàng nhỏ: bộ lọc lưu trong URL, giỏ hàng trong Sheet và thanh toán nhiều bước có kiểm tra.
ViteReact 19Cửa hàngThanh toán
- Lưới sản phẩm lọc theo danh mục (TagPicker), khoảng giá (Slider) và sắp xếp; bộ lọc nằm trong URL
- Trang sản phẩm: Carousel ảnh, đánh giá, màu bằng SwatchPicker, cỡ, số lượng bằng SpinButton
- Giỏ hàng trong Sheet: panel bên trên màn rộng, bottom sheet trên điện thoại; lưu trong localStorage
- Thanh toán bằng Wizard bốn bước, mỗi bước kiểm tra bằng react-hook-form + zod; thanh toán giả lập
- Trang xác nhận đơn hàng; giá định dạng bằng Intl theo ngôn ngữ (USD hoặc VND)
- Minh hoạ sản phẩm bằng SVG, không cần ảnh; tiếng Anh, tiếng Việt với --lang vi
Tạo dự án bằng CLI (chép template, cài phụ thuộc, chạy dev server)
npx create-yugen-ui@latest my-app --template store
cd my-app
npm run devKhông cần cả ứng dụng?
Thêm Yugen UI vào dự án có sẵn theo Bắt đầu nhanh, hoặc lấy từng cụm giao diện ở Blocks.