Ctrl K

Exemplos de Componentes

Todos os componentes do shadcn/ui (Base UI), com os exemplos oficiais, já no tema do TOS.

Visão geral

Card
Photo by mymind on Unsplash
Observability Plus is replacing Monitoring
Switch to the improved way to explore your data, with natural language. Monitoring will no longer be available on the Pro plan in November, 2025
Warning
Form
User Information
Please fill in your details below

Accordion

Documentação
Basic

Multiple

With Borders

In Card
Subscription & Billing
Common questions about your account, plans, and payments

We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.

Annual billing is available with a 20% discount. All plans include a 14-day free trial with no credit card required.

With Disabled

Alert

Documentação
Basic
With Icons
Destructive
With Actions

Alert Dialog

Documentação
Basic
Small
With Media
Small With Media
Destructive
In Dialog

Aspect Ratio

Documentação
16:9
Photo
21:9
Photo
1:1
Photo
9:16
Photo

Attachment

Documentação
Files
Horizontal
sales-dashboard.pdfPDF · 2.4 MB
customer-import.csvCSV · 18 KB
message-renderer.tsxTypeScript · 12 KB
Vertical
sales-dashboard.pdfPDF · 2.4 MB
customer-import.csvCSV · 18 KB
message-renderer.tsxTypeScript · 12 KB
source-assets.zipZIP · 4.2 MB
quarterly-review.keyKeynote · 9 MB
Content Only
Title
React Documentation
Tailwind CSS
shadcn/ui
Title and Description
Building accessible componentsreact.dev · 8 min read
Utility-first CSS frameworktailwindcss.com
Compound components in Reactui.shadcn.com/docs
States
Horizontal
selected-file.pdfReady to upload
design-system.zipUploading · 64%
market-research.pdfProcessing document
financial-model.xlsxUpload failed. Try again.
uploaded-report.pdfUploaded · 1.8 MB
Vertical
selected-file.pdfReady
design-system.zipUploading
market-research.pdfProcessing
financial-model.xlsxFailed
uploaded-report.pdfDone
Images
Horizontal
Workspace
workspace.pngPNG · 820 KB
Desk
desk-reference.jpgJPG · 1.1 MB
Office
office-reference.jpgJPG · 940 KB
Vertical
Workspace
workspace.pngPNG · 820 KB
Desk
desk-reference.jpgJPG · 1.1 MB
Office
office-reference.jpgJPG · 940 KB
Outdoor patio
patio-reference.jpgJPG · 1.6 MB
House exterior
house-exterior.jpgJPG · 1.4 MB
Image States
Horizontal
Office
office-reference.jpgReady to upload
Workspace
workspace.pngUploading · 72%
Desk
desk-reference.jpgProcessing image
Office
office-reference.jpgUpload failed
Workspace
workspace.pngUploaded · 1.2 MB
Vertical
Office
office-reference.jpgReady
Workspace
workspace.pngUploading
Desk
desk-reference.jpgProcessing
Office
office-reference.jpgFailed
Workspace
workspace.pngDone
Sizes
Default attachmentPDF · 2.4 MB
Small attachmentPDF · 2.4 MB
Extra small attachment
Scrollable Group
briefing-notes.pdfPDF · 1.4 MB
Workspace
workspace.pngPNG · 820 KB
customers.csvCSV · 18 KB
renderer.tsxTSX · 12 KB
invoice.pdfPDF
Desk
desk.jpgJPG
assets.zipZIP
Office
office.jpgJPG
notes.pdfPDF
Triggers
contract-review.pdfPDF · 820 KB
research-summary.pdfOpen preview dialog

Avatar

Documentação
Sizes
CNCNCN
CNCNCN
Badge
JZJZJZ
JZJZJZ
Badge with Icon
PPPPPP
PPPPPP
Group
CNLRER
CNLRER
CNLRER
Group with Count
CNLRER
+3
CNLRER
+3
CNLRER
+3
Group with Icon Count
CNLRER
CNLRER
CNLRER
In Empty
CNLRER
No Team Members
Invite your team to collaborate on this project.

Badge

Documentação
Variants
DefaultSecondaryDestructiveOutlineGhostLink
Icon Left
DefaultSecondaryDestructiveOutlineGhostLink
Icon Right
DefaultSecondaryDestructiveOutlineGhostLink
With Spinner
DefaultSecondaryDestructiveOutlineGhostLink
asChild
Link Link Link Link
Long Text
A badge with a lot of text to see how it wraps
Custom Colors
BlueGreenSkyPurpleBlueGreenSkyPurpleRed

Breadcrumb

Documentação
Basic
With Dropdown
With Link

Bubble

Documentação
Sizes
This is a one line bubble.
This bubble has multiple lines. It should wrap to the next line and you should see a different radius on the corners.

This bubble has multiple lines.

It should wrap to the next line and you should see a different radius on the corners.

Here is some more text to see how it wraps.

Variants
Default bubbles use the primary color for the active user side of a chat.
Secondary bubbles are the standard neutral surface for assistant and conversation content.
Muted bubbles lower the emphasis for quiet system notes or for displaying supporting content.
Tinted bubbles use a softer primary tint when primary fill is too strong.
Outline bubbles can be used to frame message content and give it a border.
Destructive bubbles flag errors or failed actions in a conversation.
Ghost bubbles work for assistant text and other content that should not be framed. This is perfect for assistant messages that should not have a frame and can take the full width of the container. Ghost bubbles are full width and can take the full width of the container.
Alignment
This bubble is aligned to the start.
This bubble is aligned to the end.
This multiline bubble is aligned to the start. The corners should adjust when the text wraps to show the grouped side of the conversation.
This multiline bubble is aligned to the end. It should sit on the opposite side with the matching corner radius for wrapped text.
Grouped
I finished the audit pass.
The registry output looks clean, but I found one stale route.
Want me to remove it now?
Yes, clean that up.
Then rerun the registry build.
Collapsible
The accessibility review found two focus states that were visually too subtle in dark mode. I checked the dialog, menu, and drawer paths because each one renders focusable control...
Ghost bubbles work for assistant text and other content that should not be framed. This is perfect for assistant messages that should not have a frame and can take the full width of the container. Use this for content that needs the whole row.
Button & Links
This bubble is a link.
Chat Suggestions
How can I help you today?
Reaction Placement
side=bottom align=end
This is a one line message.
A longer message that wraps across lines so the reaction offset is easier to inspect.
A longer message that wraps across lines so the reaction offset is easier to inspect.
side=bottom align=start
This is a one line message.
A longer message that wraps across lines so the reaction offset is easier to inspect.
side=top align=start
This is a one line message.
A longer message that wraps across lines so the reaction offset is easier to inspect.
side=bottom align=end
This is a one line message.
A longer message that wraps across lines so the reaction offset.
Reactions Buttons
This is a one line message.
This is a one line message.
We are going to the movies first then dinner. Are you in?

Button

Documentação
Variants & Sizes
Icon Right
Icon Left
Icon Only
Invalid States
Examples
Link

Button Group

Documentação
Basic
With Input
With Text
Text
With Dropdown
With Select
With Icons
With Input Group
With Fields
W
px
With Like
1.2K
With Select and Input
Nested
Pagination
Pagination Split
Navigation
Text Alignment
Vertical
Vertical Nested

Calendar

Documentação
Single
November 2026
Multiple
November 2026
Week Numbers
February 2026
06
07
08
09
Booked Dates
February 2026
Range
January 2026
February 2026
Range Multiple Months
abril 2026
mayo 2026
junio 2026
With Time
November 2026
With Presets
November 2026
Custom Days
December 2026
Date Picker Simple
Date Picker with Dropdowns
Date Picker Range
In Card
November 2026
In Popover

Card

Documentação
Default Size
Default Card
This card uses the default size variant.

The card component supports a size prop that defaults to "default" for standard spacing and sizing.

Small Size
Small Card
This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

Content Edge to Edge
Terms of Service
Review the terms before accepting the agreement.

These terms govern your use of the workspace, including access to shared documents, project files, and collaboration tools.

You are responsible for the content you upload and for ensuring that your team has the appropriate permissions to view or edit it.

We may update features or limits as the service evolves. When those changes materially affect your workflow, we will notify your workspace administrators.

By continuing, you agree to keep your account credentials secure and to follow your organization's acceptable use policies.

Custom Spacing
Release Health
Track readiness across launch signals.
Checks passed24 / 26
Open blockers2
Header with Border
Header with Border
This is a card with a header that has a bottom border.

The header has a border-b class applied, creating a visual separation between the header and content sections.

Footer with Border

The footer has a border-t class applied, creating a visual separation between the content and footer sections.

Header with Border (Small)
Header with Border
This is a small card with a header that has a bottom border.

The header has a border-b class applied, creating a visual separation between the header and content sections.

Footer with Border (Small)

The footer has a border-t class applied, creating a visual separation between the content and footer sections.

With Image
Photo by mymind on Unsplash
Beautiful Landscape
A stunning view that captures the essence of natural beauty.
With Image (Small)
Photo by mymind on Unsplash
Beautiful Landscape
A stunning view that captures the essence of natural beauty.
Login
Login to your account
Enter your email below to login to your account
Forgot your password?
Don't have an account? Sign up
Meeting Notes
Meeting Notes
Transcript from the meeting with the client.

Client requested dashboard redesign with focus on mobile responsiveness.

  1. New analytics widgets for daily/weekly metrics
  2. Simplified navigation menu
  3. Dark mode support
  4. Timeline: 6 weeks
  5. Follow-up meeting scheduled for next Tuesday
CNLRER
+8

Carousel

Documentação
Basic
1
2
3
4
5
Multiple
1
2
3
4
5
With Gap
1
2
3
4
5

Chart

Documentação
Area Chart
Area Chart
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Bar Chart
Bar Chart - Multiple
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Line Chart
Line Chart - Multiple
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart
Pie Chart - Donut with Text
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Radial Chart
Radial Chart - Shape
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Radar Chart
Radar Chart - Multiple
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Checkbox

Documentação
Basic
With Description

By clicking this checkbox, you agree to the terms and conditions.

Invalid
Disabled
With Title
In Table
NameEmailRole
Sarah Chensarah.chen@example.comAdmin
Marcus Rodriguezmarcus.rodriguez@example.comUser
Priya Patelpriya.patel@example.comUser
David Kimdavid.kim@example.comEditor
Group

Collapsible

Documentação
File Tree
Settings
Radius
Set the corner radius of the element.

Combobox

Documentação
Basic
Disabled
Sides
Invalid

Please select a valid framework.

With Clear Button
With Auto Highlight
With Groups
With Groups and Separator
Large List (100 items)
With Icon Addon
Combobox in Popup
Form with Combobox
Combobox Multiple
Combobox Multiple Disabled
Combobox Multiple Invalid

Please select at least one framework.

Combobox Multiple (No Remove)
With Custom Item Rendering
Combobox in Dialog
With Other Inputs
Disabled Items

Command

Documentação
Inline
Basic

Command Palette

Search for a command to run...

With Shortcuts

Command Palette

Search for a command to run...

With Groups

Command Palette

Search for a command to run...

Many Groups & Items

Command Palette

Search for a command to run...

Context Menu

Documentação
Basic
Right click here
With Icons
Right click here
With Sides
inline start
left
top
bottom
right
inline end
With Shortcuts
Right click here
With Submenu
Right click here
With Groups, Labels & Separators
Right click here
With Checkboxes
Right click here
With Radio Group
Right click here
With Destructive Items
Right click here
In Dialog
With Inset
Right click here

Dialog

Documentação
With Form
Scrollable Content
With Sticky Footer
No Close Button
Chat Settings

Drawer

Documentação
Demo
Swipe Handle
Position
Custom Width and Height
Scrollable Content
Snap Points
Nested
Non Modal

Dropdown Menu

Documentação
Basic
Complex
Sides
With Icons
With Shortcuts
With Submenu
With Checkboxes
Checkboxes with Icons
With Radio Group
Radio with Icons
With Destructive Items
With Avatar
In Dialog
With Inset

Empty

Documentação
Basic
No projects yet
You haven't created any projects yet. Get started by creating your first project.
Create project
Learn more
With Muted Background
No results found
No results found for your search. Try adjusting your search terms.
Learn more
With Border
404 - Not Found
The page you're looking for doesn't exist. Try searching for what you need below.
/
Need help? Contact support
With Icon
Nothing to see here
No posts have been created yet. Get started by creating your first post.
With Muted Background Alt
404 - Not Found
The page you're looking for doesn't exist. Try searching for what you need below.
/
Need help? Contact support
In Card
No projects yet
You haven't created any projects yet. Get started by creating your first project.
Create project
Learn more

Field

Documentação
Input Fields

Choose a unique username for your account.

We'll never share your email with anyone.

This field must be filled out.

This field is currently disabled.

This field contains validation errors.

This field is currently disabled.

Textarea Fields

Maximum 500 characters allowed.

Tell us about yourself in a few sentences.

Enter your message so it is long enough to test the layout.

This field contains validation errors.

This field is currently disabled.

Select Fields

Select the country where you currently reside.

Choose your local timezone for accurate scheduling.

This field contains validation errors.

This field is currently disabled.

Checkbox Fields

Receive weekly updates about new features and promotions.

Preferences

Select all that apply to customize your experience.

Radio Fields
Subscription Plan
Battery Level

Choose your preferred battery level.

Enable Touch ID to quickly unlock your device.

Invalid Radio Group
Disabled Radio Group
Switch Fields

Turn on airplane mode to disable all connections.

Receive emails about new products, features, and more.

Manage your privacy preferences.

This switch has validation errors.

This switch is currently disabled.

Slider Fields

Current brightness: 75%

Higher quality uses more bandwidth.

Range: 0.3 - 0.7

$25 - $75

Red: 10%, Green: 20%, Blue: 70%

This slider has validation errors.

This slider is currently disabled.

Native Select Fields

Select the country where you currently reside.

Choose your local timezone for accurate scheduling.

Native select with grouped options using optgroup.

This field contains validation errors.

This field is currently disabled.

OTP Input Fields

Enter the 6-digit code sent to your email.

Enter the code from your authenticator app.

Enter your 4-digit PIN (numbers only).

This OTP field contains validation errors.

This OTP field is currently disabled.

Horizontal Fields

Enter your preferred username.

Write a short description about yourself.

Receive email updates about your account.

Choose your favorite fruit.

Select your country.

Adjust the volume level.

Hover Card

Documentação
Sides
In Dialog

Input

Documentação
Basic
Invalid
With Label
With Description

Choose a unique username for your account.

Disabled
Input Types
With Select
With Button
With Native Select
Form

We'll never share your email with anyone.

Input Group

Documentação
Basic
With Addons
First Name
20/240 characters

This is a description of the input group.

(optional)
With Buttons
With Tooltip, Dropdown, Popover

This is a description of the input group.

This is a description of the input group.

https://

This is a description of the input group.

https://
.com

This is a description of the input group.

With Kbd
⌘K
⌘K
Ask AI
Tab
CtrlC

This username is available.

12 results
Disabled

This is a description of the input group.

In Card
Card with Input Group
This is a card with an input group.
https://
0/500 characters
Textarea

This is a description of the input group.

This is a description of the input group.

This is a description of the input group.

Ask, Search or Chat...

This is a description of the input group.

0/280 characters
script.js
Line 1, Column 1JavaScript

Input OTP

Documentação
Form
Verify your login
Enter the verification code we sent to your email address: m@example.com.

I no longer have access to this email address.

Having trouble signing in? Contact support
Simple
Digits Only
With Separator
1
2
3
4
5
6
Alphanumeric

Accepts both letters and numbers.

Disabled
1
2
3
4
5
6
4 Digits

Common pattern for PIN codes.

Invalid State

Example showing the invalid error state.

0
0
0
0
0
0

Item

Documentação
Default
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Outline
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Muted
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Small
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Outline - Small
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Muted - Small
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Extra Small
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Outline - Extra Small
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Muted - Extra Small
Title Only
Title + Button
Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title
Media + Title + Button
Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

asChild
Title Only (Link)
Title + Description (Link)

Clickable item with title and description.

Media + Title (Link)
Media + Title + Description (Link)

Complete link item with media, title, and description.

With Actions (Link)

Link item that also has action buttons.

Outline - asChild
Title Only (Link)
Title + Description (Link)

Clickable item with title and description.

Media + Title (Link)
Media + Title + Description (Link)

Complete link item with media, title, and description.

With Actions (Link)

Link item that also has action buttons.

Muted - asChild
Title Only (Link)
Title + Description (Link)

Clickable item with title and description.

Media + Title (Link)
Media + Title + Description (Link)

Complete link item with media, title, and description.

With Actions (Link)

Link item that also has action buttons.

ItemGroup
Item 1

First item in the group.

Item 2

Second item in the group.

Item 3

Third item in the group.

Outline - ItemGroup
Item 1

First item with icon.

Item 2

Second item with icon.

Item 3

Third item with icon.

Muted - ItemGroup
Item 1

First item in muted group.

Item 2

Second item in muted group.

Item 3

Third item in muted group.

ItemSeparator
Inbox

View all incoming messages.

Sent

View all sent messages.

Drafts

View all draft messages.

Archive

View archived messages.

ItemHeader
Design System
Component Library

A comprehensive collection of reusable UI components for building consistent interfaces.

Marketing
Campaign Analytics

Track performance metrics and engagement rates across all marketing channels.

Engineering
API Documentation

Complete reference guide for all available endpoints and authentication methods.

ItemFooter
Quarterly Report Q4 2024

Financial overview including revenue, expenses, and growth metrics for the fourth quarter.

Last updated 2 hours ago
User Research Findings

Insights from interviews and surveys conducted with 50+ users across different demographics.

Created by Sarah Chen
Product Roadmap

Planned features and improvements scheduled for the next three months.

12 comments
ItemHeader + ItemFooter
Team Project
Website Redesign

Complete overhaul of the company website with modern design principles and improved user experience.

Updated 5 minutes ago
Client Work
Mobile App Development

Building a cross-platform mobile application for iOS and Android with React Native.

Status: In Progress
Documentation
API Integration Guide

Step-by-step instructions for integrating third-party APIs with authentication and error handling.

Category: Technical • 3 attachments
Default - ItemMedia image
Project
Project Dashboard

Overview of project settings and configuration.

Document
Document

A document with metadata displayed.

File
File Attachment

Complete file with image, title, description, and action button.

Outline - ItemMedia image
Project
Project Dashboard

Overview of project settings and configuration.

Document
Document

A document with metadata displayed.

File
File Attachment

Complete file with image, title, description, and action button.

Outline - ItemMedia image - Small
Project
Project Dashboard

Overview of project settings and configuration.

Document
Document

A document with metadata displayed.

File
File Attachment

Complete file with image, title, description, and action button.

Outline - ItemMedia image - Extra Small
Project
Project Dashboard
Document
Document
File
File Attachment
Muted - ItemMedia image
Project
Project Dashboard

Overview of project settings and configuration.

Document
Document

A document with metadata displayed.

File
File Attachment

Complete file with image, title, description, and action button.

Kbd

Documentação
Basic
Ctrl⌘KCtrl + B
Modifier Keys
⌘C
KbdGroup
CtrlShiftP
Arrow Keys
↑↓←→
With Icons
With Icons and Text
LeftVoice Enabled
InputGroup
Space
Tooltip
With samp
File

Label

Documentação
With Checkbox
With Input
Disabled
With Textarea

Marker

Documentação
Markers
A default marker
Marker with icon
Marker with a spinner
Marker with shimmer effect
Thinking...
Marker as a link
Rhea joined the chat
Olivia Rose left the chat
Marker with icon at the top
Border
Switched to release-candidate
Reviewed 8 related files
Opened implementation notes
Separator
Worked for 42s
Compacting conversation
Reading 4 files
Conversation compacted
With a link to learn more
Accordion

Drawer

Menubar

Documentação
Basic
With Submenu
Sides
With Checkboxes
With Radio
With Icons
With Shortcuts
Format
Insert
Destructive
In Dialog
With Inset

Message

Documentação
Message
Deploying to prod real quick.
It's 4:55 PM. On a Friday.
It's a one-line change.
It's always a one-line change 😭. Make sure to run the tests this time.
Alright, go for it.
Avatar
CN
Something went wrong. Any idea?
ER
I checked the latest deployment and found the build failed during dependency installation.
ER
Something went wrong. Any idea?
CN
I checked the latest deployment and found the build failed during dependency installation.
Can you share the exact error message from the logs?
CN
Something went wrong. Any idea?
Group
I checked the registry addresses.
The component and example JSON now live under the UI registry.
I checked the registry addresses.
The component and example JSON now live under the UI registry.
I checked the registry addresses.
CN
The component and example JSON now live under the UI registry.
I checked the registry addresses.
CN
The component and example JSON now live under the UI registry.
Header and Footer
You
Can we keep this style quiet and send the update today?
Delivered
Olivia1m ago
I checked the logs. The retry finished and the missing invoices are included now.
From Support queue
Marina
I drafted the reply with the exact filter path and a link to the export history.
Draft ready
Assistant note
Ghost messages keep long-form assistant notes aligned with the surrounding text instead of adding a frame.
Internal only
Automation warning
The old export link expires in 10 minutes. Regenerate before sending this transcript externally.
Needs action
Actions
What is the status of the deployment?
ER
The install failure is coming from the workspace package. I can open the exact log line or retry the deployment.
Okay drop me a link. I'll check it out.
Failed to send
Attachment
Workspace
Here's the image. Can you add it to the PDF? Use it for the cover page.
Done. Here's the PDF with the image added as the cover page.
sales-dashboard.pdfPDF · 2.4 MB
Thanks. Looks good.
Attachment Group
Workspace
Desk
Office
Here are the brand photos. Can you add them to the deck?
Done. Here's the draft deck and the exported assets.
brand-deck.pdfPDF · 3.1 MB
brand-deck.keyKeynote · 9 MB
brand-assets.zipZIP · 4.2 MB

Message Scroller

Documentação
Chat
Como podemos ajudar?
Status: pronto
Olá! Preciso de ajuda com um sinistro.
Claro! Qual é o número da apólice ou do sinistro?

Native Select

Documentação
Basic
With Groups
Sizes
With Field

Select your country of residence.

Disabled
Invalid

Navigation Menu

Documentação
Basic

Pagination

Documentação
Basic
Simple
With Select

Popover

Documentação
Basic
Sides
With Form
Alignments
In Dialog

Progress

Documentação
Progress Bar
x
x
x
x
x
With Label
Upload progress
x
Controlled
x
File Upload List
document.pdf
x
2m 30s
presentation.pptx
x
45s
spreadsheet.xlsx
x
5m 12s
image.jpg
x
Complete

Questionnaire

Documentação
Standalone
Question 1 of 3
What should we prototype next?

Choose one direction or write another answer.

Card
What should we prototype next?
Choose one direction or write another answer.
Question 1 of 3
Dialog
No description
Question 1 of 1
What should the agent do next?
Disabled
Choose a plan

Enterprise is not available on your account.

Radio Group

Documentação
Basic
With Descriptions
With FieldSet
Battery Level

Choose your preferred battery level.

Grid Layout
Disabled
Invalid
Notification Preferences

Choose how you want to receive notifications.

Resizable

Documentação
Horizontal
Sidebar
Content
Vertical
Header
Content
With Handle
Sidebar
Content
Nested
One
Two
Three
Controlled
30%

Scroll Area

Documentação
Vertical
Horizontal

Select

Documentação
Basic
Sides
With Icons
With Groups & Labels
Large List
Multiple Selection
Sizes
Subscription Plan
With Button
Item Aligned
With Field

Choose your favorite fruit from the list.

Invalid
Inline with Input & NativeSelect
Disabled
In Dialog

Separator

Documentação
Horizontal
shadcn/ui
The Foundation for your Design System
A set of beautifully designed components that you can customize, extend, and build on.
Vertical
Blog
Docs
Source
Vertical Menu
SettingsManage preferences
AccountProfile & security
HelpSupport & docs
In List
Item 1
Value 1
Item 2
Value 2
Item 3
Value 3

Sheet

Documentação
With Form
No Close Button
Sides

Sidebar

tela inteiraDocumentação

Sidebar Floating

tela inteiraDocumentação

Sidebar Icon

tela inteiraDocumentação

Sidebar Inset

tela inteiraDocumentação

Skeleton

Documentação
Avatar
Card
Text
Form
Table

Slider

Documentação
Basic
Range
Multiple Thumbs
Vertical
Controlled
0.3, 0.7
Disabled

Sonner

Documentação
Basic
With Description

Spinner

Documentação
Basic
In Buttons
In Badges
BadgeBadgeBadgeBadge
In Input Group
In Empty State
No projects yet
You haven't created any projects yet. Get started by creating your first project.
Create project
Learn more

Switch

Documentação
Basic
With Description
With Label
Disabled
Sizes

Table

Documentação
Basic
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
With Footer
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
Total$2,500.00
Simple
NameEmailRole
Sarah Chensarah.chen@acme.comAdmin
Marc Rodriguezmarcus.rodriguez@acme.comUser
Emily Watsonemily.watson@acme.comUser
With Badges
TaskStatusPriority
Design homepageCompletedHigh
Implement APIIn ProgressMedium
Write testsPendingLow
With Actions
ProductPriceActions
Wireless Mouse$29.99
Mechanical Keyboard$129.99
USB-C Hub$49.99
With Select
TaskAssigneeStatus
Design homepageIn Progress
Implement APIPending
Write testsNot Started
With Input
ProductQuantityPrice
Wireless Mouse$29.99
Mechanical Keyboard$129.99
USB-C Hub$49.99

Tabs

Documentação
Basic
Line
Variants Alignment
Disabled
With Icons
Icon Only
Multiple
With Content
Manage your account preferences and profile information.
Line With Content
Manage your account preferences and profile information.
Line Disabled
With Dropdown
View your dashboard metrics and key performance indicators.
Vertical
Manage your account preferences and profile information.
With Input and Button
View your dashboard metrics and key performance indicators.

Textarea

Documentação
Basic
Invalid
With Label
With Description

Type your message and press enter to send.

Disabled

Toast

Documentação
Basic
With Action
Promise

Toggle

Documentação
Basic
Outline
Sizes
With Button Text
With Button Icon
With Button Icon + Text
Disabled
With Icon

Toggle Group

Documentação
Basic
Outline
Outline With Icons
Sizes
With Spacing
With Icons
Filter
Date Range
Sort
With Input and Select
Vertical
Vertical Outline
Vertical Outline With Icons
Vertical With Spacing
Font Weight Selector

Use font-normal to set the font weight.

Tooltip

Documentação
Basic
Sides
With Icon
Long Content
Disabled
With Keyboard Shortcut
On Link
Learn more
Formatted Content