UI bento
Get Pro

Library

UI bento studioStudio journal
Small details make room for better days. A little less noise. A little more space to think. Today we are collecting the quiet interactions that make a tool feel considered: a clear next step, a forgiving undo, and a place for every useful thought. Explore th…
Original abstract study: warm sun over sage dunes
Original abstract study: warm sun over sage dunes

An original studio note, shown as sample content.

Social Post CardKeep a thoughtful voice close by.
YOUR OWN LITTLE WORKSPACE

Make room for your day

Move a little. Make space for what matters.

Today’s focus

Make something small and useful.

Notes

This week

3

ideas in progress

Drag a handle or use the move buttons and size menus. Narrow views stack widgets without changing their saved width.

Arrange your widgets.

Your layout changes stay in this demo.

Dashboard GridA workspace that makes room for you.
ASK SOMETHING GOOD

A place for every answer

Shape the questions, then try the answers.

2 / 8 fields
Field settings

Field keys become the keys in your submitted answers.

Build a small form. Preview submissions stay in this demo.

Form BuilderGive every good question a place.
A STEADY RHYTHM

Give the work a rhythm

Make a little time for the work that repeats.

Five numeric fields · UTC · Sunday is 0 or 7. Lists, ranges and steps are supported.
Next runs · UTC

Preparing the time preview…

Preview only. Connect your scheduler to run jobs.

A preview only. No server jobs are created.

Cron EditorGive recurring work a clear rhythm.
ROOM TO REFINE

The details, in good order

Small edits, without losing the bigger picture.

The details, in good order. Click or press Enter to edit. Arrow keys move; paste tab-separated cells.
#ItemQtyPrice
1
2
3

3 rows · 3 columns

A local inventory draft. Try pasting tab-separated cells.

Editable GridSmall edits, with the whole table in view.
ONE MORE PLACE

A little room for everyone

Keep related details together as your list grows.

Person 1
Person 2

2 of 5 places filled

An imaginary team. No invitations are sent.

Form RepeaterMake room for one more set of details.
OPEN TO CLOSE

The shape of a session

Four values tell the whole session.

101110.5120MonTueWedThuFriSat
Hollow: close ≥ open · Filled: close < open
Choose a session to read all four values.

Fictional sessions, ready to inspect.

Candlestick ChartEvery session has more than one side.
A LITTLE CLOSER

A closer look at the rhythm

16 points in view37–84 visits
Oct 6Oct 21
Oct 6 — Oct 21Drag the overview or adjust either range control.
Selected data (16)
Selected observations (visits)
PointValue
Oct 656
Oct 748
Oct 841
Oct 937
Oct 1039
Oct 1145
Oct 1256
Oct 1367
Oct 1477
Oct 1583
Oct 1684
Oct 1779
Oct 1872
Oct 1964
Oct 2059
Oct 2158

Thirty days of fictional studio visits.

Chart BrushA little closer to the part that matters.
FIND THE PATTERN

A week in the studio

Compare every place, one day at a time.

A week in the studio, visits. Use arrow keys to inspect cells.
GroupMonTueWedThuFri
Studio
Library
Garden
1248visits
Choose a cell to see its exact value.

A small week, seen from every side.

Heatmap TableFind the pattern between the numbers.

Make room for a thought

Words, with a little more feeling.

Preparing the writing surface…

0 / 5,000 charactersCtrl / ⌘ B, I, U

Select a few words to give them a little emphasis.

A local writing preview. Nothing is sent.

Rich Text EditorLet your words find their emphasis.

The little details

A name, a value, a little more meaning.

Attribute 1
Attribute 2
Attribute 3

3 attributes · 9 remaining

Three details from an imaginary notebook.

Attribute EditorGive the small details a little structure.

A place to arrive

A few details, one destination.

Address format is checked; delivery availability is not verified.

Fictional address. Try saving it in this local preview.

Address FormA thoughtful place for every detail.
STUDIO NOTES / 014

Leave a little
room for wonder.

Some ideas need time.
Others just need a place to begin.

Ready when you are

A thought worth keeping.

Split ButtonOne clear action, a few possibilities.
A LITTLE COLLECTIVE WISDOM

A little break, together?

Where should our next studio afternoon take us?

Choose one option
26 votes

Try a vote in this local preview.

PollMake a little room for everyone’s voice.
NOTHING LOST ALONG THE WAY

A record of the little changes

3 records
A softer first impression

Cover toneupdated

Before
Stone
After
Sage

Intro lineupdated

Before
Welcome back.
After
Make yourself at home.
Read-only history. Times shown in UTC.

A few thoughtful edits, kept in view.

Audit TrailEvery little change has a story.
LAYERS OF THE WHOLE

How it all connects

100hours
Each ring moves one level deeper.
8 visible segments

One hundred hours, shared across the studio.

Sunburst ChartA whole story, one ring at a time.
EXPLORE THE NUMBERS

A different angle

6 records
Region by Channel · sum of Revenue
RegionWebRetailTotal
North880
South700
Total1,1104701,580
Select a value to inspect its records.
Only finite numeric values are aggregated. A dash means missing data or overflow.

Six records. More than one way to read them.

Pivot TableThe same numbers, a new perspective.
PEOPLE & TEAMS

The people behind it

6
Choose someone to see their team.
6 people in this directory

A small team, connected.

Organization ChartMeet the people behind the work.
  1. shadcn.io

    Reference pattern for a conversation surface that follows new messages while respecting the reader.

    https://www.shadcn.io/ai/conversation

A few references behind the idea.

Sources PanelFollow an idea back to its source.
Conversation4
You

Where should a small idea begin?

Assistant

With a question you would like to spend a little time with.

You

And then?

Assistant

Make something small. Try it. Leave room for the next discovery.

You can scroll back without losing your place.

A conversation written for this preview.

Chat ThreadA little room for the conversation.
Follow your curiosity

A still line for reduced motion.

01

Start with a question

There is always a little more to discover.

02

Leave room to wander

There is always a little more to discover.

03

Notice the small things

There is always a little more to discover.

04

Bring an idea home

There is always a little more to discover.

A small story, at your pace.

Scroll VelocityA line that follows your pace.
Appearance
A QUIETER CORNER

Make yourself
at home.

A little space, in your kind of light.

Following your device · Light appearance

A preview of your light appearance.

Theme SwitcherFind the light that feels right.
A NOTEBOOK OF POSSIBILITIES

Make room
for good ideas.

A few ideas worth a closer look.

Progressive BlurLet the edges fade into the next idea.
READ AT YOUR OWN PACE

Small beginnings

16px
PAGE 1 / 3

A small beginning

Every useful thing begins with a little attention. A quiet observation, a question, a note left for tomorrow.

You do not need the whole story yet. A small beginning is enough.

1 / 3
Contents and bookmarks

Three original notes about making things.

Page ReaderA comfortable place for a longer story.
A MOMENT TO LISTEN

Six quiet notes

An original UI bento sound study.

0:000:00

Ready when you are.

Transcript

Instrumental sample: six soft synthesized notes. There is no spoken content.

An original six-note sound study.

Audio PlayerSix quiet notes, ready when you are.
Position and size

Drag the title or corner. Focus either handle and use arrow keys; Shift takes larger steps.

A flexible home for your next thought.

Floating PanelA small workspace, wherever you need it.
FIELD NOTES / 01

Small beginnings.

Leave a little room for something new.

A note, with a little more to discover.

Flip CardEvery small idea has another side.
THE SHAPE OF YOUR WORDS

See what your text holds

Words
—
Characters
—
Sentences
—
Paragraphs
—

Characters count visible grapheme clusters, including spaces. Word boundaries depend on language; reading time is an estimate.

A closer look at your words.

A closer look at a small piece of writing.

Text MetricsSee the shape of your words.
A FRESH SET OF CHARACTERS

Make a password of your own

Include characters

Generated on this device with at least one character from each enabled group.

Choose your options, then generate.

Generated locally. This demo does not create an account.

Password GeneratorA fresh set of characters, made here.
A LITTLE CLARITY

Work it out, right here

8

Parentheses and scientific notation supported. Standard floating-point arithmetic.

Enter records this calculation. Escape clears it.

A small calculation, with a useful answer.

CalculatorA little clarity, one calculation at a time.
ONE FRAME AT A TIME

A little movement, on repeat

Loading sprite sheet…
0 / 0

Frames read left to right, then down. Playback starts only when you choose Play.

Play, step through, or export a single frame.

Eight original frames, ready for a little movement.

Sprite PlayerA small sequence, brought to life.
A FEW COLORS TO KEEP

Find the colors inside

Original abstract study: warm sun over sage dunes
Reading image…

Dominant color groups from a small image sample. Pixels below 50% opacity are excluded.

Select a color, or take the whole palette.

Colors sampled from an original UI bento study.

Image PaletteKeep the colors that caught your eye.
THE RIGHT SIZE FOR YOUR IDEA

Give your image room

Loading image…

Keep the original proportions. Up to 4096 pixels per side and 8 megapixels.

Prepare an image at the size you need.

An original image, resized in your browser.

Image ResizerA little more room, at the right size.
ROOM FOR WHAT COMES NEXT

Find your kind of plan

Billing period
Prices in USD, charged each month. Missing features are not included.
Compare
the details		Current plan

Personal

$0.00per month

For a small beginning.

Recommended

Studio

$12.00per month

Room for a shared idea.

Spaces3Unlimited
Members18
Version history
Export files
Compare the details, then choose your fit.

Example plans. Choosing one does not start a subscription.

Pricing TableA clear view of what comes next.
A PLACE FOR EVERY ROLE

Choose what each role can do

4permissions granted2 roles
Select permissions for each role. Column actions affect visible, unlocked permissions.
PermissionViewerEditor
Read notes
Create notes
Export collection
Invite membersLocked

Review the draft before applying access changes.

Review each role, then use the draft.

A local draft. Existing access is unchanged.

Permission MatrixGive every role the right tools.
MAKE A LITTLE TIME

When you are available

2.5hours per weekLocal time
Monday

Each selection covers 30 minutes. Copy replaces weekday hours.

Choose the times that work for you.

A sample week. No booking is created.

Availability PickerMake room for the right moments.
FROM HERE TO THERE

Follow the flow

1,200visits from source nodes4 flows
SearchSearchDirectDirectLibraryLibraryExploreExploreSaveSave
Select a ribbon to inspect its quantity.
Ribbon width represents quantity.

Sample paths through a small collection.

Sankey ChartFollow the flow from here to there.
A LITTLE PERSPECTIVE

The range behind each result

3 groups
125088NotesNotes: 1 outliersSearchSearch: 1 outliersLibraryLibrary: 1 outliers
Select a group to inspect its quartiles.
Whiskers: observed values within 1.5 IQR. Up to 80 outliers drawn per group.

Three sample distributions, shown on one shared scale.

Box PlotThe range behind each result.
THE SHAPE OF THINGS

Where the values gather

30observationsMean 39.73 ms
0481282 ms
Choose an interval to inspect its observations.
Equal-width intervals; the final upper edge is included.

A sample of thirty response times.

HistogramSee where the values gather.
IN ANOTHER MEASURE

A different way to measure

CONVERTED AMOUNT9.4488in

Display rounded to 4 decimal places.

Results use standard conversion factors. Callbacks retain numeric precision.

Length, mass and temperature, with standard conversion factors.

Unit ConverterA different way to measure.
A LITTLE DELIVERY

A file, ready when you are

sunday-studies.txt50.0 MiB maximum · 30s timeout
0 B receivedSize unknown

Ready to prepare

Save the prepared file through your browser. A save click does not confirm a disk write.

A local sample stream. No network request is made.

Download ProgressA little delivery, at your pace.
READY TO GO

Take your collection with you

Include fields
3 provided rows3 fields · 0.1 KiB
Preview export
"Title","Category","Saved"
"Morning notes","Writing","12"
"Soft colors","Design","24"
"Small ideas","Research","8"

Only the rows provided to this component are exported.

Formula-like text is prefixed with an apostrophe for spreadsheet safety.

Export the three sample entries shown in this collection.

Data ExportTake the useful details with you.
A SHARED THOUGHT

Bring someone into the thought

Type @, choose a person with the arrow keys and press Enter. Escape closes suggestions.

0 linked mentions0 / 2000
Nothing is sent automatically.

A local note. Connect the callback to your application.

Mention InputBring someone into the thought.
A LITTLE RHYTHM

Make it a regular thing

First 5 occurrences
Calendar rule
DTSTART;VALUE=DATE:20261014
RRULE:FREQ=WEEKLY;INTERVAL=1;BYDAY=WE;WKST=MO;COUNT=8

All-day dates. Missing month days are skipped; no reminders are sent.

Build an all-day schedule for your own calendar.

Recurrence EditorGive your plans a little rhythm.
STAY IN TOUCH

A number to reach you

Paste an international number with +, or use the country above.

Valid format+1 202 555 0123United States

Format validation does not verify ownership or availability.

A sample contact field. No calls or messages are sent.

Phone InputA clear way to stay in touch.
A little introduction3 steps
Your studio12 ideas
AN OPEN PAGEA small beginning

Leave a little room to explore.

Three short steps to feel at home.
Guided TourA thoughtful first look around.

A clear view of your connection

Not checked

Sample studio service

Browser availability
Unknown
Response time
Not measured
Last check
No check yet

Check the service to see whether it responds.

Service health is confirmed by your check function.
Local demo · sample service response.
Connection StatusKnow when the connection is there.

Keep the thought, as it arrives

Saved after you stop typing.41/5000
Ready for your next thought.
Ctrl / Cmd + S to save now.
Local demo · saved only for this preview.
Autosave EditorKeep the thought, as it arrives.

A whole collection, within reach

1
Idea 00001A small beginning
Design
2
Idea 00002Room to explore
Writing
3
Idea 00003Made with care
Craft
4
Idea 00004A small beginning
Design
5
Idea 00005Room to explore
Writing
6
Idea 00006Made with care
Craft
7
Idea 00007A small beginning
Design
8
Idea 00008Room to explore
Writing
10,000 items · 8 rendered
10,000 original sample ideas.
Virtual ListA large collection with a light footprint.

A small idea, in code

type Greeting = { name: string };

export function hello({ name }: Greeting) {
  return `A little room for ${name}.`;
}
typescript · 6 lines
Select a file. Wrap long lines for a closer look.
Two files, one small idea.
Code BlockLet the useful details stand out.

Make every word readable

Room for good ideas.

The small details deserve to be seen.

Aa
7.54:1
Contrast ratioOpaque sRGB · WCAG 2.2
Text contrast thresholds
Text sizeAAAAA
NormalPassPass
LargePassPass
Large text: at least 24px regular or 18.67px bold. Pass/fail uses the unrounded ratio.
Text AA 4.5:1 · AAA 7:1
Compare text and background before applying them.
A color check for the words that matter.
Color ContrastMake every word easy to see.

Find a different light

Original abstract study: warm sun over sage dunesLoading image…Edited
filter: brightness(100%) contrast(100%) saturate(100%) sepia(0%) grayscale(0%);
Compare shows the original. Export always uses your edits.
An original UI bento image study.
Image FiltersFind a different light.

Point out the thoughtful details

Original abstract study: warm sun over sage dunesLoading image…
1 of 8 regions · Move with arrows or drag.
An original image, with room for your notes.
Image AnnotationPoint out the details that matter.
CSV IMPORT

Bring your ideas together

Up to 1,000 rows · 50 columns
Preview the columns before you continue.
Local demo · imported rows stay in this preview.
CSV ImporterBring a whole collection in at once.
JSON EXPLORER

A closer look at the details

11 values
$object
{
  "collection": "Small beginnings",
  "published": true,
  "ideas": [
    {
      "title": "A softer page",
      "category": "Design"
    },
    {
      "title": "Words worth keeping",
      "category": "Writing"
    }
  ],
  "next": null
}
Select a value to inspect its full content.
An original collection of little ideas.
JSON ExplorerFind the detail inside the data.

A little room to lift

Selected shadow settings
2 of 5 layers · The first layer is painted on top.
Two soft layers, a little quiet depth.
Shadow EditorBuild depth, one layer at a time.

Give movement a feeling

Control point coordinates
300 ms
Drag a point or use its arrow keys. Shift moves faster.
Find a rhythm for the next small thing.
Bezier EditorGive every movement the right feeling.

Find a softer blend

2 color stops · Select or drag a stop.
A blend made for a quieter page.
Gradient EditorFind a blend that feels like you.

A place for every idea

Open a collection to see what is inside.

Select an area or open a group to explore.
4 areas
A few collections, with room to explore.
Treemap ChartSee how the pieces share a whole.

A little closer each time

From discovering an idea to making it yours.

11%from first to last stage
Select a stage to inspect its change.
4 stages
An original sample journey.
Funnel ChartUnderstand every step of the journey.
0 / 0 complete

A little room for your files

Three sample files, one little journey.

  • No files in the queue.
0 ready to start
Simulated transfers. No files leave this page.
Upload QueueKeep every file moving, at your pace.
ONE STEP AT A TIMEStep 1 of 3

A good place to begin

Your idea

Start with a name. You can change it later.

Your progress stays here until you finish.
A local setup demo. Nothing is sent.
Form WizardA few clear steps toward a fresh start.
FILTERS1 / 8

Find the right things

Condition 1
Build a query, then apply it.
Sunday studiesA small storyColor notes
3 matching collections · Apply to update
Filter BuilderFind just the things you have in mind.
A closer look
1 / 3
A SMALL BEGINNING

Make something useful.
Leave a little room to explore.
Share it with someone.

Small things, thoughtfully made.
Type
text/plain
Size
127 B
Modified
Oct 13, 2026
File 1 of 3
Sample files. Actions stay in this preview.
File PreviewTake a closer look before the next step.
SCAN & SHARE

Pass something good on.

One scan. A little closer.

QR code for Pass something good on.
Generated here, without an upload.
A little connection, made locally.
QR CodeA small code, ready to connect.

Make your mark

Draw something personal, or type it instead.

A typed mark, ready to use.
Typed mark
A local canvas. Nothing is uploaded.
Signature PadA little mark, made by you.
A PLACE IN TIME

When your day begins.

Make every invitation arrive at the right hour.

Your time zone
Asia/Seoul
A shared moment, wherever you are.
Timezone SelectGive your plans a place in time.
KEEP SOMETHING GOOD

A place for this idea.

Choose a collection, or find the right folder with a few letters.

Save to collection
Design studio / Motion studies
Every idea deserves a home.
Tree SelectFind a place in a bigger collection.
USD

A small beginning for something good.

$125.00Use a decimal point · 2 decimal places.
Ready when you are.
An amount with a little intention.
Currency InputGive the next idea an amount.
A LITTLE GETAWAY

Make a little room.

A few days to step back, slow down and find something new.

Your time away
Time for a fresh perspective.
Date Range PickerA little time, from start to finish.

Where effort meets impact

A small project planning exercise.

Y: ImpactX: Effort

Inspect a point or choose it from the list.
5 points shown
A few ideas, each with its own place.
Scatter PlotFind the relationship between two good things.

A little more balanced

The first sketch and the next iteration.

Choose a dimension to compare exact values.
Choose a profile to focus.
Two ways to see the same project.
Radar ChartSee every strength in perspective.

Ideas have no borders

4 locations · 350 creators

Choose a place to see its story.

A small community, around the world.
Dotted MapGood places, all in one view.

A month of possibilities

MoTuWeThFrSaSu

Oct 132 events

Three small moments, worth making time for.
Event CalendarA clear place for the month ahead.

From idea to something real

Oct 12, 2026
Task
1213141516171819202122232425

Drag a bar to shift dates, use its Left/Right keys, or open it to edit.

A sample plan for the next two weeks.
Project TimelineGive every part of the plan a little time.

The Sunday project

3 cards

Drag a handle. Arrow keys move cards; Move offers the same choices.

Ideas2
  1. Explore

    Collect a little inspiration.

  2. Connect
In progress1 / 2
  1. Create

    Give the idea its shape.

Done0

    Room for the next step.

    Make a little progress.

    Your next idea has a home.
    Task BoardMake a little progress, one card at a time.

    Your next three steps

    3 items

    Drag a handle, use its arrow keys, or tap the move buttons.

    1. Notice the detailsStart with curiosity
    2. Explore a possibilityGive the idea some room
    3. Make something smallLet it take shape
    Your priorities, in order.
    First: Notice the details
    Reorder ListMake room for your first priority.
    Make it your own
    • Design
    1 interests in your collection.
    Multi SelectChoose a few things that feel like you.
    Your inbox1

    • The new collection is taking shape.

      2 minutes ago

    • Your workspace is ready.

      Yesterday
    1 unread notifications. 2 shown.
    Sample workspace updates
    Notification InboxA calm place for every update.

    A world of good mornings

    Preparing the clock…

    Choose a valid timezone and timestamp.Live local time
    A little hello from Seoul.
    World ClockA different hour. The same moment.

    A little perspective

    0%

    Good design gives every idea a little room to breathe, and every person a clear place to begin.

    Scroll to let the words arrive.
    Text RevealLet a sentence unfold as you read.

    A thoughtfully spent week

    Make room for a little of everything.

    44hours

    Select a category to explore.

    Donut ChartSee how the pieces add up.
    A place to begin
    A little search. A new direction.
    ComboboxFind the right option with a few letters.
    Notes on small details0%

    Leave a little room.

    A thoughtful interface gives each idea enough space to be understood.

    Start with the action that matters. Let the supporting details arrive only when they become useful.

    Clarity is often a quiet quality: a familiar label, a steady rhythm, a place to pause.

    Make the next step feel natural. Keep the small moments kind.

    A little more to discover.
    Scroll ProgressFind your place in a longer story.
    greeting.ts
    2 added · 2 removed

    Before

    removed const greeting = "Hello";const name = "friend";removed return greeting + name;

    After

    added const greeting = "Welcome";const name = "friend";added return greeting + ", " + name;
    Every change, in context.
    Code ComparisonSee what changed, line by line.
    A little space for the details.

    Collection details

    Give this collection a name that feels right.

    Local demo. Nothing is sent.

    DrawerA little room for the details.

    Bring the interaction into your project, then make it your own.

    AccordionGive each question room to unfold.
    my-project
    components
    Button.tsx
    Card.tsx
    README.md
    Choose a file
    태스크포스Business registration: 687-30-01972Representative: Cheonghyeok Song262-20, Galma-dong, Seo-gu, Daejeon, Republic of Koreataskforcelabs.dev