עיצוב

CSS Tailwind

מראה

שפה

English 简体中文日本語 עברית Русский Español Português (Brasil)

Name

Notes

Accept terms

Free

Pro

Email notificationsReceive updates about your workspace.

Bold

Volume60%

Overview

Monthly revenueUpdated just now

$12,480

Activity

Recent activity12 new events this week

Settings

Workspace settingsManage members and preferences

Shipping

Ships in 2–3 days.

Returns

30-day window.

Plan

ReactUI

An amber sun above overlapping blue mountain ridges

Ready

Release notes

A short summary of the latest product changes.

Read the release notes

Migration progress

Ada Lovelace

One check remains.

Website

https://

Enter a domain. Add https:// when using the value.

No projects yet

Create a project to organize your work.

Mina Chen
Design · Updated today
Sam Rivera
Engineering · Updated yesterday

Start date

Contact preferencesEmailText message

Status: Active
Project notes: This value is intentionally long to show that detailed content wraps within the available space.

Toggle

Panel content

Name	Role
Alice	Admin
Bob	Editor

BTC / USD

Time	Open	High	Low	Close
2026-01-05	101.8	110.4	99.2	108.7
2026-01-12	109.1	114.8	106.7	112.6
2026-01-19	112.4	119.2	110.3	117.5
2026-01-26	117.8	121.6	113.9	115.2
2026-02-02	115.6	118.7	108.4	110.1
2026-02-09	109.8	112.5	100.6	103.2
2026-02-16	103.6	106.4	94.5	97.8
2026-02-23	98.4	101.1	88.2	91.5
2026-03-02	91.1	96.4	84.9	87
2026-03-09	86.7	90.3	79.5	82.2
2026-03-16	82.8	86.9	74.8	78.4
2026-03-23	78.9	87.5	76.3	85.9
2026-03-30	85.4	94.2	82.6	91.8
2026-04-06	92.1	100.6	89.9	98.7
2026-04-13	98.3	106.9	95.4	103.5
2026-04-20	103.8	111.4	100.7	109.6

Annual revenue

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98

Logo

Help New project

Team workspace

A shared view of what you are working on.

12Active projects

4Awaiting review

Workspace overview

Keep your team's projects and recent updates in one place.

Projects

Website refresh · In progress. Design library · Ready for review.

Recent activity

The team updated the roadmap and shared a new design proposal.

Create a project

Start with a name, invite your team, and plan your next milestone.

Workspace help

Find guides for organizing projects and collaborating with your team.

Introduction

A table of contents gives readers a map of a longer article. Open the contents or choose a bar to jump to a section. Scroll this article to follow your position in the rail.

Examples

Keep navigation beside the content it describes. Each of the four bars and its matching link points to a real section in this preview, so you can explore without leaving the card.

API

Give each section a unique ID and use that same ID for its link and indicator. Scope scroll tracking to the article’s container when the content sits inside another page.

Styling

Use CSS to adjust the rail, spacing and panel. The active bar follows the current section. Native heading links continue to work when JavaScript is unavailable.

Upload files

Drop files here

Brand color

Name

FIELD NOTES01 / 03

FOUNDATIONS

Build once. Ship everywhere.

Accessible building blocks that feel at home in every product.

FIELD NOTES02 / 03

COMPOSITION

Interfaces that scale.

Clear patterns, composed from small and reliable pieces.

FIELD NOTES03 / 03

ACCESSIBILITY

Ready from the first render.

Useful, keyboard-ready interfaces before JavaScript loads.

Name

Notes

Accept terms

Free

Pro

Email notificationsReceive updates about your workspace.

Bold

Volume60%

Overview

Monthly revenueUpdated just now

$12,480

Activity

Recent activity12 new events this week

Settings

Workspace settingsManage members and preferences

Shipping

Ships in 2–3 days.

Returns

30-day window.

Plan

ReactUI

Ready

Release notes

A short summary of the latest product changes.

Read the release notes

Migration progress

Ada Lovelace

One check remains.

Website

https://

Enter a domain. Add https:// when using the value.

No projects yet

Create a project to organize your work.

Mina Chen
Design · Updated today
Sam Rivera
Engineering · Updated yesterday

Start date

Contact preferencesEmailText message

Status: Active
Project notes: This value is intentionally long to show that detailed content wraps within the available space.

Toggle

Panel content

Name	Role
Alice	Admin
Bob	Editor

BTC / USD

Time	Open	High	Low	Close
2026-01-05	101.8	110.4	99.2	108.7
2026-01-12	109.1	114.8	106.7	112.6
2026-01-19	112.4	119.2	110.3	117.5
2026-01-26	117.8	121.6	113.9	115.2
2026-02-02	115.6	118.7	108.4	110.1
2026-02-09	109.8	112.5	100.6	103.2
2026-02-16	103.6	106.4	94.5	97.8
2026-02-23	98.4	101.1	88.2	91.5
2026-03-02	91.1	96.4	84.9	87
2026-03-09	86.7	90.3	79.5	82.2
2026-03-16	82.8	86.9	74.8	78.4
2026-03-23	78.9	87.5	76.3	85.9
2026-03-30	85.4	94.2	82.6	91.8
2026-04-06	92.1	100.6	89.9	98.7
2026-04-13	98.3	106.9	95.4	103.5
2026-04-20	103.8	111.4	100.7	109.6

Annual revenue

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98

Logo

Help New project

Team workspace

A shared view of what you are working on.

12Active projects

4Awaiting review

Workspace overview

Keep your team's projects and recent updates in one place.

Projects

Website refresh · In progress. Design library · Ready for review.

Recent activity

The team updated the roadmap and shared a new design proposal.

Create a project

Start with a name, invite your team, and plan your next milestone.

Workspace help

Find guides for organizing projects and collaborating with your team.

Introduction

A table of contents gives readers a map of a longer article. Open the contents or choose a bar to jump to a section. Scroll this article to follow your position in the rail.

Examples

Keep navigation beside the content it describes. Each of the four bars and its matching link points to a real section in this preview, so you can explore without leaving the card.

API

Give each section a unique ID and use that same ID for its link and indicator. Scope scroll tracking to the article’s container when the content sits inside another page.

Styling

Use CSS to adjust the rail, spacing and panel. The active bar follows the current section. Native heading links continue to work when JavaScript is unavailable.

Right-click area

Brand color

Name

FIELD NOTES01 / 03

FOUNDATIONS

Build once. Ship everywhere.

Accessible building blocks that feel at home in every product.

FIELD NOTES02 / 03

COMPOSITION

Interfaces that scale.

Clear patterns, composed from small and reliable pieces.

FIELD NOTES03 / 03

ACCESSIBILITY

Ready from the first render.

Useful, keyboard-ready interfaces before JavaScript loads.

Name

— שורות— רונדרו— צמתים— fps

ממשק שמעמיד ביצועים בראש, ומוכן לסוכן ה-AI שלך.

רכיבי React המבוססים על יכולות מובנות של הדפדפן, ולכן כוללים מעט JavaScript או כלל לא. מיומנות /uiify המובנית מלמדת את סוכן התכנות שלך להשתמש בהם נכון.

עיון ברכיבים תחילת העבודה

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98