Yami UI

116 components, each shown in its default state. Select one to see installation, usage, and examples.

Forms & Inputs

ButtonView

Button GroupView

July 2026

CalendarView

Checked

Unchecked

Disabled

CheckboxView

Color PickerView

ComboboxView

ConfirmView

Copy ButtonView

Date PickerView

Drop files here, or browse

Any file up to 10 MB

DropzoneView

Click to edit

EditableView

FieldView

Drop files here, or browse

Any file up to 10 MB

File ListView

FormView

Zoom

Image CropView

InputView

Input GroupView

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Input OTPView

Accept terms and conditions

LabelView

Mention InputView

Native SelectView

Number InputView

Password InputView

Default

Comfortable

Compact

Radio GroupView

Range SliderView

SelectView

SliderView

Enter your account details.

StepperView

Airplane mode

SwitchView

Layout & Structure

16 / 9

Aspect RatioView

Create project

Deploy your new project in one click.

Frame content with hairline borders.

CardView

CarouselView

Jane Cooper

jane@yami.ui.unsanity.ai

ItemView

ALAliceDesigner

BOBobEngineer

CACarolPM

DADaveDevOps

EVEvaQA

⭐5.0 — Fantastic UI library

🚀Ship faster with Yami

🎨Beautiful by default

🧩Composable primitives

🌙Dark mode first

MarqueeView

Compose a title and description.

Page HeaderView

One

Two

ResizableView

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

Scroll AreaView

What is Yami UI?

Section HeaderView

Yami UI

Docs

Registry

Source

SeparatorView

Item 1

Item 2

Item 3

SortableView

A list of recent invoices.
Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00

TableView

Navigation

BreadcrumbView

MenubarView

Navigation MenuView

Navigation Progress

Navigation ProgressView

PaginationView

Scroll this box to see the progress bar update at the top.

Paragraph 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 7 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 8 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 9 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 10 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scroll ProgressView

SidebarView

Table of ContentsView

Manage your account.

TabsView

Overlays

Alert DialogView

CommandView

Right click here

Context MenuView

DialogView

DrawerView

Dropdown MenuView

Hover over this area to show the toolbar

Floating ToolbarView

Hover CardView

LightboxView

PopoverView

SheetView

TooltipView

Feedback & Status

Heads up!

You can add components to your app using the CLI.

AlertView

Badge

BadgeView

No notifications

You are all caught up. Check back later.

EmptyView

ProgressView

SkeletonView

SonnerView

SpinnerView

Data Display

Yes. It adheres to the WAI-ARIA design pattern.

AccordionView

horse.mp3

0:000:00

Audio PlayerView

ABC

AvatarView

ChartView

npx shadcn@latest add button

Code BlockView

@yami starred 3 repositories

CollapsibleView

Before

After

CompareView

"name": "yami-ui"

"version": "0.3.0"

"button"

"card"

"tree"

]

"dark": true

"cjk": true

}

JSON ViewerView

⌘K

⌃⇧P

⎋

KbdView

RatingView

$45,231

Revenue

StatView

Revenue

$45,231

+20.1%

Stat CardView

Project created
Jan 12, 2025
Design approved
All stakeholders signed off on the mockups.
Feb 3, 2025
Development in progress
Currently building the core features.
Ongoing

TimelineView

TreeView

Animations

AnimateView

Aurora (transparent + card surface)

Aurora BackgroundView

Beams (light + dark)

Beam BackgroundView

Blur to sharp

Blur In TextView

Scroll circle reveal

Circle Reveal ScrubView

Fade in content

Fade InView

Move pointer over grid

Grid Fade BackgroundView

Scroll horizontal scrub

Horizontal ScrubView

Scroll inset reveal

Inset Reveal ScrubView

One-time setup

Wrap your root layout with MotionProvider, import void styles in globals.css, then add Animation components anywhere inside the provider tree.

Su	Mo	Tu	We	Th	Fr	Sa