Yugen UI

Blocks

Blocks

Ready-made UI sections built from Yugen UI components: sign-in, settings, stats, lists. Copy a whole block into your project, then change the content.

Each block is one file in src/docs/block-library/. The Code tab shows that file's source.

Sign in

Sign-in form with email, password and SSO

Welcome back

Sign in to keep working with your team.

Forgot password?
or

Don't have an account? Sign up

Stats

KPI cards with trends and a mini bar chart

Revenue

$1.28M

+12.4% vs. last month

New customers

2,341

+5.2% vs. last month

Churn rate

3.1%

−0.8% vs. last month

Payout threshold

Set a minimum amount with a Slider and a note

Payout threshold

The minimum balance before we send a payout.

Minimum amount$250
$50$1,000
Balances above the threshold are paid out on the 15th of each month.

Team members

Invite members and set roles with a Menu

Team members

Invite teammates and choose their access.

  • Alex Chen

    alex@sakura.dev

  • Maria Garcia

    maria@sakura.dev

  • Sam Lee

    sam@sakura.dev

Preferences

Account settings with Select, Switch and Toast

Preferences

Manage your account and notification settings.

Used for new reports and invoices.

  • Public stats

    Let others see your total plays.

  • Email notifications

    Monthly reports and billing updates.

  • Beta features

    Try features that are still in development.

Recent transactions

A List with icons, descriptions and amounts

Recent transactions

5 transactions in the last 7 days.

  • Sakura CaféFood & drink · Today−$6.50
  • Green MarketShopping · Yesterday−$48.20
  • October salaryIncome · Oct 15+$4,250.00
  • Ride shareTransport · Oct 14−$12.40
  • Streaming planEntertainment · Oct 12−$15.99

Savings goal

Track progress with a ProgressBar

Savings goals

Goals you're tracking in 2026.

Retirement fund

70%

$42,000 / $60,000

Kyoto in cherry blossom season

80%

$3,400 / $4,250

Emergency fund

21%

$2,100 / $10,000

Book an appointment

Calendar with a ToggleGroup for time slots

Book a consultation

Pick a day and a time that works for you (30 minutes).

November 2026

Time

Send feedback

Form with RadioGroup, Textarea and validation

Send feedback

Your ideas help make Yugen UI better every day.

0/500

Empty inbox

Filter tabs with an Empty state that has an action

Notifications

You're all caught up

New notifications will show up here. Enjoy the quiet.

Analytics

KPIs, trends, rankings and shares, with one time filter for every card

Sales overview

Updated Oct 20, 2026

Revenue
$101.1K
Increase+12.6%vs. previous 30 days
Orders
1,743
Increase+9.1%vs. previous 30 days
Conversion rate
3.4%
Increase+1.2%vs. previous 30 days
Average order value
$59.57
Increase+2.7%vs. previous 30 days
Visitors
Last 30 days
Revenue by category
USD
Devices
Share of sessions
  • Mobile57.2%
  • Desktop33.5%
  • Tablet9.2%

AI assistant

MessageScroller, ChatComposer and Trace showing each step the agent takes

Sakura Assistant

AI can make mistakes. Check important info.

Sakura Assistant
Hi! I can schedule meetings, summarize email or look things up in your docs.

Newsletter sign-up

Labeled email Field with a hint, a Switch and a confirmation toast

Yugen newsletter
One email a month: new components and tips.
We never share your email.

Quantity picker

Labeled ButtonGroup to add / remove, with min / max limits and aria-live

Ceramic teapot

10 left in stock

Quantity: 1

$38.00

Welcome dialog

Dialog that keeps focus inside, closes with Esc and returns focus to its trigger

First sign-in

A short intro before people get started. They can skip it for now.

Project progress

A Slider drives a ProgressBar that turns success when complete

New website launch

In progress
Completion64

Drag the slider or use the arrow keys to update it.

Who's online

Persona with presence and an AvatarGroup that compacts large groups

Hana SatoProduct design · presenting
6 online