Create Next App

Box

UIKit/Components/Box/Box.fixture.tsx

Box Content

This is a basic Box with content.

With Footer

Box body area.

With custom icon

Icon with box styling.

Long content

Body text here.

Button

UIKit/Components/Button/Button.fixture.tsx

Primary Button

Secondary Button

With Icon

Icon Right

Disabled

Loading...

Full Width

Card

UIKit/Components/Card/Card.fixture.tsx

Contained CardWith icon and arrow

Basic CardSimple card with pill

New

Long Caption CardThis card has a much longer caption text that should wrap across multiple lines to demonstrate how the component handles extended descriptions and edge cases in layout.

Dual-state foldable example.

Cards in Box.Content

Auto basic Cardcontained defaults to false

Forced contained CardOverride context

Checkbox

UIKit/Components/Checkbox/Checkbox.fixture.tsx

CodeBox

UIKit/Components/CodeBox/CodeBox.fixture.tsx

typescript

function hello() {
  console.log("Hello, UIKit!");
}

JSON

{
  "name": "UIKit",
  "version": "1.0",
  "components": 43
}

typescript

const x = 42;

ContributionGraph

UIKit/Components/ContributionGraph/ContributionGraph.fixture.tsx

JulAugSepOctNovDecJanFebMarAprMayJunJul

MonWedFri

LessMore

JulAugSepOctNovDecJanFebMarAprMayJunJul

MonWedFri

LessMore

DatePicker

UIKit/Components/DatePicker/DatePicker.fixture.tsx

Single date

Select date

Date range

Select date range

With default

Pick a date

Divider

UIKit/Components/Divider/Divider.fixture.tsx

Above divider

Below divider

Left

Right

Group

UIKit/Components/Icon/Group/Group.fixture.tsx

Icon

UIKit/Components/Icon/Icon.fixture.tsx

Input

UIKit/Components/Input/Input.fixture.tsx

Default Input

With Value

Disabled

With Icon

Disabled Value

Label

UIKit/Components/Label/Label.fixture.tsx

Basic Label

This is a hint

Error State

This field is required

Warning State

Double-check this value

Label without hint

DocsLayout

UIKit/Components/Layout/DocsLayout/DocsLayout.fixture.tsx

Documentation PageThis is an example docs layout

Author Name

Document body content goes here.

Nav

UIKit/Components/Nav/Nav.fixture.tsx

Pagination

UIKit/Components/Pagination/Pagination.fixture.tsx

Pill

UIKit/Components/Pill/Pill.fixture.tsx

Default

With Icon

Disabled

Loading

Checkbox

Long text example here

Loading with icon

Profile

UIKit/Components/Profile/Profile.fixture.tsx

John Doe

Jane Smith

No Bio

Long Display Name That Wraps

Progress

UIKit/Components/Progress/Progress.fixture.tsx

Radio

UIKit/Components/Radio/Radio.fixture.tsx

Option A

Option B

Option C (disabled)

Option D with very long label text wrapping

Select

UIKit/Components/Select/Select.fixture.tsx

Basic Select

With Combobox

Flat Options

Disabled

Skeleton

UIKit/Components/Skeleton/Skeleton.fixture.tsx

Skeleton Loaders

Spinner

UIKit/Components/Spinner/Spinner.fixture.tsx

Text

UIKit/Components/Text/Text.fixture.tsx

LargeTitleTitle1 — The quick brown foxTitle2 — The quick brown foxTitle3 — The quick brown foxHeadline — The quick brown fox jumps over the lazy dogBody — The quick brown fox jumps over the lazy dog.Callout — The quick brown fox jumps over the lazy dog.Subheadline — The quick brown fox jumps over the lazy dog.Footnote — The quick brown fox jumps over the lazy dog.Caption1 — The quick brown fox jumpsCaption2 — The quick brown foxconsole.log("Hello, UIKit!");const x = 42;

TimePicker

UIKit/Components/TimePicker/TimePicker.fixture.tsx

24h Format

:

12h Format

:

With Seconds

::

Default Value

:

Disabled

:

Timeline

UIKit/Components/Timeline/Timeline.fixture.tsx

Single event

First event happened

Second event happened

Third event happened

Title

UIKit/Components/Title/Title.fixture.tsx

Page Title

Beta

Updated today

This is the page caption describing the section.

Long title text that wraps across multiple lines for testing

With an extended caption that describes something in detail for layout testing

Toggle

UIKit/Components/Toggle/Toggle.fixture.tsx

Popover

UIKit/Frameworks/Popover/Popover.fixture.tsx

DNDView

UIKit/Frameworks/View/DNDView/DNDView.fixture.tsx

DNDView Vertical

maimai DX

CHUNITHM

ONGEKI

SOUND VOLTEX

DNDView Wrap

사볼 발키리

사볼

DDR

maimai DX

투텍 라이트닝

기타 아레나

팝픈 팝군

WACCA

EZ2AC

HScrollView

UIKit/Frameworks/View/HScrollView/HScrollView.fixture.tsx

HScrollView

Blue

Green

Purple

Orange

Red

Cyan

Blue

Green

Purple

Orange

Red

Cyan

View

UIKit/Frameworks/View/View.fixture.tsx

View Layout Examples

Box 1

Box 2

Box 3

Grid 1

Grid 2

Grid 3

ImageView

UIKit/Templates/ImageView/ImageView.fixture.tsx