Components
Every UI SDK component, styled and installable on its own, plus the app frame, data display parts and kits. They use UI SDK’s own parts and names, so its docs apply as they are. Open any one for its usage and code.
pnpm dlx shadcn@latest add superzero11/uiset/uiset superzero11/uiset/button superzero11/uiset/field superzero11/uiset/selectActions
Button
Button
Toggle
Toggle, ToggleGroup
Toolbar
Toolbar, ToolbarButton, ToolbarSeparator
Inputs
Field and Input
Field, FieldLabel, Input, FieldDescription, FieldError
We send the invite here.
Textarea
Textarea
Number input
NumberInput, NumberInputGroup, NumberInputControl
Password input
PasswordInput, PasswordInputControl, PasswordInputToggle
One-time code
OTPInput, OTPInputGroup, OTPInputSlot
Checkbox
Checkbox, CheckboxGroup, CheckboxIndicator
Radio
RadioGroup, Radio, RadioIndicator
Switch
Switch, SwitchThumb
Slider
Slider, SliderControl, SliderTrack, SliderThumb
Segmented control
SegmentedControl, SegmentedControlItem
Rating
Rating, RatingItem
Color picker
ColorPicker, ColorPickerArea, ColorPickerSlider, ColorPickerInput
File input
FileInput, FileInputDropzone, FileInputList, FileInputItem
Drop images or PDFs here, or paste them.
Choosing
Select
Select, SelectTrigger, SelectContent, SelectItem
Role
Combobox
Combobox, ComboboxInput, ComboboxList, ComboboxItem
Autocomplete
Autocomplete, AutocompleteInput, AutocompleteList
Listbox
Listbox, ListboxItem, ListboxItemIndicator
main
develop
release
Command
Command, CommandInput, CommandList, CommandItem
New project
Invite teammate
Open billing
Token input
TokenInput, TokenInputEditor
Summarize routes.ts
Trigger menu
TriggerMenu, TriggerMenuInput, TriggerMenuContent, TriggerMenuItem
Dates and times
Date input
DateInput, DateInputSegment
Time input
TimeInput, TimeInputSegment
Date picker
DatePicker, DatePickerInput, DatePickerTrigger, DatePickerContent
Calendar
Calendar, CalendarGrid, CalendarDay
November 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 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 | 1 | 2 | 3 | 4 | 5 |
Overlays
Dialog
Dialog, DialogTrigger, DialogContent, DialogTitle
Alert dialog
AlertDialog, AlertDialogClose
Drawer
Drawer, DrawerTrigger, DrawerContent
Popover
Popover, PopoverTrigger, PopoverContent
Hover card
HoverCard, HoverCardTrigger, HoverCardContent
Tooltip
Tooltip, TooltipTrigger, TooltipContent
Hidden from lists, kept for 30 days
Menu
Menu, MenuTrigger, MenuContent, MenuItem
Menubar
Menubar, Menu
Toast
ToastRegion, Toast, toast()
Navigation and structure
Tabs
Tabs, TabsList, TabsTab, TabsPanel
Three services, all healthy.
Navigation menu
NavigationMenu, NavigationMenuTrigger, NavigationMenuLink
Pagination
Pagination, PaginationList, PaginationLink
Accordion
Accordion, AccordionItem, AccordionTrigger, AccordionPanel
Collapsible
Collapsible, CollapsibleTrigger, CollapsiblePanel
Tree
Tree, TreeItem, TreeItemLabel, TreeGroup
src
app.tsx
main.tsx
package.json
Resizable
Resizable, ResizablePanel, ResizableHandle
Files
Editor
Scroll area
ScrollArea, ScrollAreaViewport, ScrollAreaScrollbar
Version 2.12: fixes and improvements.
Version 2.11: fixes and improvements.
Version 2.10: fixes and improvements.
Version 2.9: fixes and improvements.
Version 2.8: fixes and improvements.
Version 2.7: fixes and improvements.
Version 2.6: fixes and improvements.
Version 2.5: fixes and improvements.
Version 2.4: fixes and improvements.
Version 2.3: fixes and improvements.
Version 2.2: fixes and improvements.
Version 2.1: fixes and improvements.
Separator
Separator
Above the lineBelow the line
Showing information
Avatar
Avatar, AvatarImage, AvatarFallback
ALGH
Progress
Progress, ProgressTrack, ProgressIndicator
Meter
Meter, MeterTrack, MeterIndicator
Timeline
Timeline, TimelineItem, TimelineMarker
Deployed to production
Version 2.4.1 is live.
Preview ready
Waterfall
Waterfall, WaterfallRow, WaterfallBar
/
app.css
app.js
/api/projects
Carousel
Carousel, CarouselViewport, CarouselItem
Image cropper
ImageCropper, ImageCropperViewport, ImageCropperSelection
%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22140%22%20r%3D%2260%22%20fill%3D%22%23ffd36e%22%2F%3E%3Cpath%20d%3D%22M0%20380%20L180%20220%20L320%20340%20L470%20200%20L800%20400%20L800%20500%20L0%20500Z%22%20fill%3D%22%234f6d7a%22%2F%3E%3Cpath%20d%3D%22M0%20430%20L260%20320%20L520%20420%20L800%20360%20L800%20500%20L0%20500Z%22%20fill%3D%22%232f4858%22%2F%3E%3C%2Fsvg%3E)
Preferences
Preferences, createPreference
Saved as data-density=“comfortable” and kept between visits.
App shell and page structure
App shell
AppShell, SidebarNav, SidebarGroup, SidebarItem (Drawer, Tooltip, Preferences, useShortcut)
Atlas
Production, Europe. Last deployed 4 minutes ago.
Requests
1.2M
Up 12% vs last week
Errors
0.4%
Up 0.1% vs last week
p95 latency
182 ms
Down 9 ms
Breadcrumbs
nav, ol, aria-current
Page header
PageHeader
Billing
Plan, usage and invoices.
Card
Card, CardHeader, CardTitle, CardContent, CardFooter
Pro plan
$20 per seat, monthly.
5 of 10 seats used.
Stepper
Stepper (Button, aria-current=step)
Search field
SearchField (Input, createInputController, useShortcut)
/
Data display
Badge
Badge
DraftBuildingReadyQueuedFailed
Stat
Stat
Monthly revenue
$48,210
Up 8.2% vs October
Empty state
EmptyState
No deployments yet
Push to your main branch and the first one shows up here.
Skeleton and loading
Skeleton, SkeletonText, Loading
Loading the team…
Description list
DescriptionList
- Region
- Europe (Frankfurt)
- Runtime
- Node.js 24
- Domain
- atlas.acme.dev
Item list
ItemList, Item
- ALAda Lovelaceada@acme.dev
- GHGrace Hoppergrace@acme.dev
Alert
Alert
Note: Maintenance on Sunday
The dashboard is read-only from 02:00 to 03:00 UTC.
Success: Domain verified
Warning: Card expires soon
Error: Build failed
Type error in src/app.tsx, line 12.
Keyboard keys
Kbd (useShortcutHint)
Search with ⌘K, save with ⌘S.
Spinner
Spinner
Saving Saving…
Copy button
CopyButton (announce)
npx shadcn add superzero11/uiset/cardRich text
Rich text editor
RichTextEditor, RichTextContent (Toolbar, Toggle, Select, Popover, TriggerMenu, createUndoStack)
Data grid
Data grid
DataGrid, DataGridToolbar (grid focus, cell range, inline edit, virtualizer, Menu, Popover, Select)
Task
Owner
Status
Points
Due
Done
Status: In progress3
Ship the invoice export
Ada
In progress
5
Nov 20
No
Dark mode for charts
Margaret
In progress
3
Nov 21
No
Search across projects
Linus
In progress
8
Nov 28
No
Status: In review2
Fix the login redirect
Linus
In review
2
Nov 17
No
Retry failed webhooks
Grace
In review
5
Nov 18
No
Status: Backlog3
Rate-limit the public API
Grace
Backlog
8
Dec 2
No
Onboarding checklist
Margaret
Backlog
3
Dec 5
No
Keyboard shortcuts sheet
Ada
Backlog
2
Dec 8
No
Status: Done2
Audit the cookie banner
Ada
Done
1
Nov 12
Yes
Remove the old billing tables
Grace
Done
2
Nov 10
Yes
Arrow keys move between cells. Enter sorts a column or edits a cell, Escape cancels. Shift with arrows selects cells. On a column header, Shift+F10 opens the column menu, Alt (Option on a Mac) with Left or Right resizes the column, and adding Shift moves it.
Board
Board
Board, BoardToolbar, BoardCardDialog (createTransfer, roving focus, Dialog, AlertDialog)
Arrow keys move between cards and columns. Space picks a card up; arrows move it; Space drops it; Escape puts it back. Enter opens a card.
Backlog
3 cardsRate-limit the public APIAPIHigh priority. Due Dec 2. Grace Hopper. Labels: API
Onboarding checklistDesignDue Dec 5. Margaret Hamilton. Labels: Design
Keyboard shortcuts sheetDocsLabels: Docs
In progress
2 of 3 cardsShip the invoice exportAPIDue Nov 20. Ada Lovelace. Labels: API
Dark mode for chartsDesignUrgent. Overdue Nov 12. Margaret Hamilton. Labels: Design
In review
2 of 2 cardsFix the login redirectBugHigh priority. Due Nov 17. Linus Pauling. Labels: Bug
Retry failed webhooksAPIBugDue Nov 18. Grace Hopper. Labels: API, Bug
Full: finish a card to add more.
Done
1 cardsAudit the cookie bannerDocsAda Lovelace. Labels: Docs
Scheduler
Scheduler
Schedule, MonthView, SchedulerToolbar, EventDialog (createSpans, stackSpans, Calendar)
Each event is a button. Arrow keys move it, Shift with arrows changes when it ends, Delete removes it, and Enter opens it.
Room timeline
Schedule axis="x" overlap={false}
Each event is a button. Arrow keys move it, Shift with arrows changes when it ends, Delete removes it, and Enter opens it.
Canvas
Canvas
Canvas, CanvasToolbar, CanvasInspector, useCanvasHistory (createViewport, createMove, createLasso, createConnect, spatialMove)
Arrow keys go to the nearest node that way. Alt with arrows moves it, Space selects it, C starts a wire (arrows choose an input, Enter connects, Escape stops), Delete removes, Enter opens. Plus and minus zoom; 0 resets.
User questionInputTextFrom the chat boxOutputs: Text to Answer template Question; Text to Search docs Query.
Answer templatePromptQuestionPromptAnswer briefly, cite sources.Inputs: Question from User question Text. Outputs: Prompt to Draft answer Prompt.
Search docsToolQueryResultsTop 5 pagesInputs: Query from User question Text. Outputs: Results to Draft answer Context.
Draft answerModelPromptTextContextFast model, temperature 0.2Inputs: Prompt from Answer template Prompt; Context from Search docs Results. Outputs: Text to Reply Text.
ReplyOutputTextSent to the chatInputs: Text from Draft answer Text.
Mobile
Mobile
SwipeList, PullToRefresh, TimeWheel, WheelPicker, Sheet, ActionSheet, AppBar, TabBar (createSwipeActions, bindScrollPicker, rubberBand, Drawer, Listbox)
Inbox
- Left and Right show this row's actions; Escape hides them; Enter opens it.
Terminal
Terminal
Terminal (createInputHistory, createStickToBottom, ANSI colors, streaming commands, Ctrl+C)
Welcome. Type help for the commands; Tab completes, Up brings back the last one.
Up and Down bring back earlier commands. Tab completes. Ctrl+C stops a running command, Ctrl+L clears.
IDE
IDE
FileTree, EditorTabs, CodeEditor, CommandPalette, ProblemsList, StatusBar (Tree, Tabs, Command, Dialog, Textarea, Resizable)
Files
src
lib
format.ts
greet.ts
config.ts
index.ts
package.json
README.md
Tab indents and Shift+Tab outdents; press Escape, then Tab, to leave the editor. 2 problems; F8 goes to the next.
mainLn 1, Col 1TypeScript
Charts
Charts
LineChart, BarChart, SegmentedBar, Heatmap, ScatterChart, Sparkline, Stat (chart frame: legend, table twin, listbox of data positions)
Revenue
$91,000
Up 9.6% vs Nov
Active users
2,504
Up 3.1% vs last week
Costs
$60,000
Up 3.4% vs Nov
Revenue and costs2026, by month
Daily active usersLast 90 days
Visits by channelStacked, 2026
Revenue by region2026, ranked
Sign-ups by plan2026, by quarter
Sign-ups, all plansStacked by plan
Traffic sourcesLast 30 days, 412,000 visits
Sessions by day and hourLast 4 weeks, UTC
Deal size and time to closeClosed deals, 2026
Looks good. Ship it once @Grace Hopper signs off.