Mainproject-sea
57%
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22oklch(0.7%200.13%20257)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22oklch(0.7%200.13%20200)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E)
payrollz-2026.docxtimetable.xlsxpresentation.keyreactypes.tsxbirthday.mp4Composer attachments
File tiles landing one by one above the prompt, each with its upload ring.
Component Patternsfor Agentic Interface
Gaudi UI is a collection of React component patterns built directly on Base UI. 23 patterns across 1 component so far.
Reactv19.3Tailwind CSSv4.3Base UIv1.8Motionv13.2
M
Alex Morgan
Date of Birth
28 July, 1997Gender
MaleBlood Type
A rh+GP Doctor
Mattheus ClarksonSteps
31,600
total stepsSleep score
Excellent
98
Duration : 7h 50m
49 / 50Bedtime : 20m earlier
29 / 30Interruptions : 5m wake up
20 / 20Most active days
32,459
total stepsJan
Activity
Move
1,592 kcalExercise
1h 45mRunning
5.2 kmImportant alerts
12
this weekHigh Heart rate
Your heart rate rose above 120 BPM while you seemed to be inactive for 10 minutes starting at 8:59 AM, 12 June.
Medical ID
Your emergency contact and allergy information was updated in your Medical ID.
Lab results ready
Your latest blood panel ordered by Dr. Mattheus Clarkson is back — cholesterol and glucose are within the normal range.
Medication reminder
You missed your 9:00 AM dose of Metoprolol. Take it as soon as possible unless your next dose is near.
Irregular sleep
Your bedtime shifted by more than 2 hours on 3 of the last 7 nights, which can affect your sleep score.
Low blood oxygen
Your blood oxygen dipped to 93% for a short period during sleep on the night of 4 June.
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Drag and drop to upload or select
PDF, JPG, PNG, XLSX (max 8 MB )
Uploading ...
Uploaded successfully!
Total Results
48 customers
| Purchase | Status | Actions | |||
|---|---|---|---|---|---|
%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2225%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter%2C%20sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22600%22%20fill%3D%22%23fff%22%3EJC%3C%2Ftext%3E%3C%2Fsvg%3E) John Clarkson | Delivery failed | Sep 05, 2026 | $3.412 | ||
%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2225%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter%2C%20sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22600%22%20fill%3D%22%23fff%22%3EAL%3C%2Ftext%3E%3C%2Fsvg%3E) Aspen Lubin | Delivery failed | Mar 25, 2026 | $1.899 | ||
%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2225%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter%2C%20sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22600%22%20fill%3D%22%23fff%22%3EME%3C%2Ftext%3E%3C%2Fsvg%3E) Michael Ekstrom | Shipped | Aug 01, 2026 | $2.752 | ||
%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2225%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter%2C%20sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22600%22%20fill%3D%22%23fff%22%3EKV%3C%2Ftext%3E%3C%2Fsvg%3E) Kianna Vaccaro | Shipped | Apr 02, 2026 | $145 | ||
%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2225%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter%2C%20sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22600%22%20fill%3D%22%23fff%22%3ELS%3C%2Ftext%3E%3C%2Fsvg%3E) Livia Saris | Delivery failed | Nov 14, 2026 | $708 |
Contributions this year
958
+14.8%9B
Lifetime tokens
562.7M
Peak tokens
12h 54m
Longest task
62 days
Top streak
Activity
JanFebMarAprMayJunJulAugSepOctNovDec
npx gaudi-ui@latest addbutton-loading
Install tons of interactive components
From the basics every app needs to the small interactions that make it feel alive. Accessible, themeable and ready for your app, all you need is here.
payrollz-2026.docxtimetable.xlsxpresentation.keyreactypes.tsxbirthday.mp4View Composer attachments
Ran 3 searches
What teams pay for in a component library
5 results- Tailwind UI vs building your ownreddit.com
- shadcn/ui, the registry modelgithub.com
- Shipping a design systemlinkedin.com
- Design tokens guidefigma.com
Searched X fordesign system pricing
7 postsSearched Reddit forr/reactjs worth paying for
12 threads
Web search
The searches an agent ran and the sources it opened, streaming in.
Plan usage limits · Max (5x)
5-hour limitResets in 2 hr 46 min38%
Weekly · all modelsResets Tue 3:00 PM3%
Weekly · ProResets Tue 3:00 PM5%
Agent limits
Context window usage with a token breakdown and plan limits.
Total Results
48 customers
| Purchase | Status | Actions | |||
|---|---|---|---|---|---|
| John Clarkson | Delivery failed | Sep 05, 2026 | $3.412 | ||
| Aspen Lubin | Delivery failed | Mar 25, 2026 | $1.899 | ||
| Michael Ekstrom | Shipped | Aug 01, 2026 | $2.752 | ||
| Kianna Vaccaro | Shipped | Apr 02, 2026 | $145 | ||
| Livia Saris | Delivery failed | Nov 14, 2026 | $708 |
Data table
Filter, sort and paginate complex data in a responsive table.
Activity
Move
1,592 kcalExercise
1h 45mRunning
5.2 kmSteps
31,600
total stepsSleep score
Excellent
98
Duration: 7h 50m
49/50Bedtime: 20m earlier
29/30Interruptions: 5m wake up
20/20Important alerts
12
this weekHigh Heart rate
Your heart rate rose above 120 BPM while you seemed to be inactive for 10 minutes starting at 8:59 AM, 12 June.
Medical ID
Your emergency contact and allergy information was updated in your Medical ID.
Lab results ready
Your latest blood panel ordered by Dr. Mattheus Clarkson is back — cholesterol and glucose are within the normal range.
Medication reminder
You missed your 9:00 AM dose of Metoprolol. Take it as soon as possible unless your next dose is near.
Irregular sleep
Your bedtime shifted by more than 2 hours on 3 of the last 7 nights, which can affect your sleep score.
Low blood oxygen
Your blood oxygen dipped to 93% for a short period during sleep on the night of 4 June.
Playful widgets
Health widgets with live charts, activity rings and alerts.
Sidebar
Navigation with search, badges and account controls.
M
Alex Morgan
@sitenley
PROContributions this year
$7,462
+14.8%9B
Lifetime tokens
562.7M
Peak tokens
12h 54m
Longest task
62 days
Top streak
Activity
Contributor profile
Contributor activity, token stats and streak insights at a glance.
Agent progress
Live multi-step progress and completion states.
57%
Composer loader
An iridescent light orbiting the composer while the agent works.
Thinking
Searching the docs
Reading files
Writing the answer
Agent thinking
Thinking, searching and writing indicators for a working agent.
Generating image0 seconds remaining
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22oklch(0.7%200.13%2088)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E)
Generating image0 seconds remaining
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22oklch(0.7%200.13%2068)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E)
Generating image3 seconds remaining
Image generation loader
Image generation with an animated countdown and reveal.
August 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+2 more
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
Calendar
Month calendar with events and scheduling controls.
Auth card
Sign in, sign up and verification with provider buttons.
M
Alex Morgan
30 min intro meeting
Let's discuss your design needs and how we can collaborate 🥳
30 minutesEnglish
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Meeting schedule
Booking flow for dates, times, language and meeting details.
Earned so far
$7,462
+14.8%Revenue
$18,240
+9.4%Workload distribution
1,248
TasksCharts
Bar, line and stacked charts with live data.
Drag and drop to upload or select
PDF, JPG, PNG, XLSX (max 8 MB)
Uploading ...
Uploaded successfully!
File upload
Drag-and-drop uploads with validation and progress states.
Charts that make your data worth reading
Radar, radial, funnel, Sankey and more - live Recharts cards with period switchers, hover focus and stat tiles, all on the same tokens.
Sign-up funnel
197
+5.2%Link opened
197Started
110Completed
77Converted
38Funnel chart
Tapered stages with conversion pills, curved or sharp, and stat tiles under every column.
View Funnel chartEarned so far
$7,462
+14.8%Earnings chart
Rounded bars over a track with a period switcher, count-up headline and hover outline.
View Earnings chartVisitors
1,424
+5.2%January
186February
305March
237April
273May
209June
214Radar chart
Filled polygon on the chart tokens - the count-up headline follows the axis you hover, and a stat tile per axis sits below.
View Radar chartVisitors
1,424
+5.2%Desktop1,424
Mobile860
January
186February
305March
237April
273May
209June
214Radar comparison
Outline-only series over the same grid with a live legend for side-by-side reads.
View Radar comparisonTracked time
86h
Tracked timeShare of tracked time
Sankey chart
Flows tinted by their source with share labels on the sinks and hover isolation.
View Sankey chartPipeline
1,180
+2.4%Visits
1,180100%
Sign-up
79067%
Active
46039%
Pro
25021%
Team
12010%
Enterprise
403%
Visits
1,180Sign-up
790Active
460Pro
250Team
120Enterprise
40Stage bars
The funnel as pill rows with name, value and share, plus a grid of stat tiles.
View Stage barsVisitors
925
+5.2%Other
90Edge
173Firefox
187Safari
200Chrome
275Radial chart
Concentric rings over the chart track with each name set along its own arc - hover a ring and the rest fall back while the headline and its tile follow.
View Radial chartVisitors
2,500
+5.2%47%Desktop
Desktop
1,180Mobile
620Tablet
380TV
320Speedometer
Half gauge of stacked segments with the primary share in the centre and tiles below.
View SpeedometerVisitors
94,700
+8.2%Organic
50,500Referral
25,900Paid
18,300Area chart
Stacked series with gradient fills - hover a month and the headline, legend and tiles follow.
View Area chartSessions · Conversion 3.7%
83,200
+9.4%Sessions · total
83,200Conversion · average
3.7%Combo chart
Bars on one axis, a cased line on the other - volume and rate read together on one canvas.
View Combo chartInstall Gaudi UI with your agent through MCP
Gaudi UI speaks MCP. Connect your agent once and it browses every pattern with its source and styles, applies them to the components you already have, and keeps your installs up to date. It runs on your machine, with no account.
Full setup guide and example prompts