sh4dcnv2 · atlas
← libraries

@uai

Compound React components and page blocks with motion and micro-interactions built in, including AI agent UI (prompt composer, thinking, approvals) and Brazilian commerce (Pix, CEP, installments).

115 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://uaiblocks.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://uaiblocks.dev/r/registry.json
bun bunx shadcn@latest add https://uaiblocks.dev/r/registry.json
fetch registry curl -s https://uaiblocks.dev/r/registry.json

Components

115 total
Uai Theme theme

The warm graphite Uai palette mapped onto the standard shadcn theme tokens, plus the shared motion utilities Uai components use.

npx shadcn@latest add https://uaiblocks.dev/r/uai-theme.json
Uai Number Tick lib

Moves only the characters of a formatted number that changed, in one grid cell per character so widths never jump. Shared by Metric Card and Price Summary.

npx shadcn@latest add https://uaiblocks.dev/r/uai-number-tick.json
Uai Utilities lib

A small class-name merge utility shared by Uai components.

npx shadcn@latest add https://uaiblocks.dev/r/uai-utils.json
Activity Timeline ui

Events, actors, timestamps, metadata, and grouped dates in an ordered timeline.

npx shadcn@latest add https://uaiblocks.dev/r/activity-timeline.json
Agent Question ui

Lets an agent ask for a decision: one to five single or multiple choice questions, a recommended option, Something else, number-key answers, and a record of th…

npx shadcn@latest add https://uaiblocks.dev/r/agent-question.json
Agent Run block

Agent thinking and tool calls, task progress, approvals, and a final run summary.

npx shadcn@latest add https://uaiblocks.dev/r/agent-run.json
Announcement Bar ui

A campaign message with actions, dismissal, and remembered dismissal.

npx shadcn@latest add https://uaiblocks.dev/r/announcement-bar.json
App Header ui

A compound application header with navigation, search, account actions, and responsive overflow.

npx shadcn@latest add https://uaiblocks.dev/r/app-header.json
App Sidebar ui

Nested navigation with collapsed mode, a mobile disclosure, and active states.

npx shadcn@latest add https://uaiblocks.dev/r/app-sidebar.json
Approval Card ui

A composable decision surface that keeps risk, evidence, and impact explicit.

npx shadcn@latest add https://uaiblocks.dev/r/approval-card.json
Approval Queue block

Pending decisions grouped by risk, age, owner, and impact.

npx shadcn@latest add https://uaiblocks.dev/r/approval-queue.json
Article Page block

Long-form reading with metadata, text size controls, sharing, and related articles.

npx shadcn@latest add https://uaiblocks.dev/r/article-page.json
Attachment ui

A file with type icon or thumbnail, upload progress, failure and retry, and removal.

npx shadcn@latest add https://uaiblocks.dev/r/attachment.json
Audit Log ui

Actors, actions, resources, timestamps, filters, and event details.

npx shadcn@latest add https://uaiblocks.dev/r/audit-log.json
Audit Log Viewer block

Filters, events, details, and export controls.

npx shadcn@latest add https://uaiblocks.dev/r/audit-log-viewer.json
Author Card ui

Author identity with an initials fallback, biography, profile links, and a follow toggle.

npx shadcn@latest add https://uaiblocks.dev/r/author-card.json
Billing Portal block

Plan, usage, payment method, invoice history, billing alerts, and confirmed cancellation.

npx shadcn@latest add https://uaiblocks.dev/r/billing-portal.json
Boleto Payment ui

A boleto with the grouped linha digitável and copy, an ITF barcode drawn from the code, due-date urgency, a BolePix tab, and card, plain, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/boleto-payment.json
Breadcrumb Trail ui

Hierarchy with label truncation, collapsed levels, and a compact mobile fallback.

npx shadcn@latest add https://uaiblocks.dev/r/breadcrumb-trail.json
Calendar View ui

Day, week, and month layouts with event overflow.

npx shadcn@latest add https://uaiblocks.dev/r/calendar-view.json
Call to Action block

A closing section with one goal, supporting copy, and reassurance.

npx shadcn@latest add https://uaiblocks.dev/r/call-to-action.json
Cart Drawer block

Review items, quantities, discounts, totals, and checkout actions.

npx shadcn@latest add https://uaiblocks.dev/r/cart-drawer.json
Cart Item ui

A compound cart line with product details, availability, quantity, price, and removal.

npx shadcn@latest add https://uaiblocks.dev/r/cart-item.json
CEP Field ui

A Brazilian postal code field with masking, address lookup states, and rounded, pill, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/cep-field.json
Changelog Entry ui

A release entry with date, version, categories, and linked changes.

npx shadcn@latest add https://uaiblocks.dev/r/changelog-entry.json
Changelog Page block

Releases grouped by date with version, category, and product area filters.

npx shadcn@latest add https://uaiblocks.dev/r/changelog-page.json
Checkout block

Guide contact, delivery, payment, review, and confirmation.

npx shadcn@latest add https://uaiblocks.dev/r/checkout.json
Citation ui

An inline claim marker with a source preview card and destination link.

npx shadcn@latest add https://uaiblocks.dev/r/citation.json
Code Verification block

One-time code entry with paste, resend timing, errors, and alternate methods.

npx shadcn@latest add https://uaiblocks.dev/r/code-verification.json
Command Menu ui

Search and run grouped actions with full keyboard navigation.

npx shadcn@latest add https://uaiblocks.dev/r/command-menu.json
Comment ui

Comments with nested replies, reactions, inline editing, moderation states, and timestamps.

npx shadcn@latest add https://uaiblocks.dev/r/comment.json
Comment Thread block

Nested replies, reactions, sorting, moderation states, and a comment composer.

npx shadcn@latest add https://uaiblocks.dev/r/comment-thread.json
Community Feed block

Posts with authors, tags, reactions, filters, and numbered pagination.

npx shadcn@latest add https://uaiblocks.dev/r/community-feed.json
Comparison Table ui

Compare plans or products with sticky labels and highlighted differences.

npx shadcn@latest add https://uaiblocks.dev/r/comparison-table.json
Confirmation Dialog ui

A native modal that explains impact before destructive actions, with optional typed confirmation.

npx shadcn@latest add https://uaiblocks.dev/r/confirmation-dialog.json
Contact Section block

Contact options, availability, a message form with its states, and expectations.

npx shadcn@latest add https://uaiblocks.dev/r/contact-section.json
Context Meter ui

How full a model's context window is: a composer ring, a stacked breakdown, threshold warnings, and compaction that shows what it freed.

npx shadcn@latest add https://uaiblocks.dev/r/context-meter.json
Conversation Thread block

Messages, cited sources, response states, and a prompt composer in one thread.

npx shadcn@latest add https://uaiblocks.dev/r/conversation-thread.json
Coupon Field ui

A compound discount field with rounded, pill, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/coupon-field.json
Dashboard Shell block

Global navigation, page hierarchy, actions, key metrics, and a layout that stacks on narrow screens.

npx shadcn@latest add https://uaiblocks.dev/r/dashboard-shell.json
Data Explorer block

Query surface, results, saved views, and export actions.

npx shadcn@latest add https://uaiblocks.dev/r/data-explorer.json
Data Table Toolbar ui

Search, filters, column visibility, export, and bulk actions for selected rows.

npx shadcn@latest add https://uaiblocks.dev/r/data-table-toolbar.json
Date Range Picker ui

Presets, date inputs, and a keyboard-navigable calendar for local date ranges.

npx shadcn@latest add https://uaiblocks.dev/r/date-range-picker.json
Description List ui

Labeled facts with responsive alignment and optional actions.

npx shadcn@latest add https://uaiblocks.dev/r/description-list.json
Document Field ui

A CPF and CNPJ field with masking, check-digit validation, alphanumeric CNPJ support, and rounded, pill, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/document-field.json
Documentation Page block

Navigation, an in-page table of contents with the current section, content, and page actions.

npx shadcn@latest add https://uaiblocks.dev/r/documentation-page.json
Empty State ui

A compound blank-slate surface with card, plain, compact, and page variants.

npx shadcn@latest add https://uaiblocks.dev/r/empty-state.json
FAQ Section block

Searchable questions with accessible disclosure answers.

npx shadcn@latest add https://uaiblocks.dev/r/faq-section.json
Feature Showcase block

Benefits through alternating copy, media, and supporting details.

npx shadcn@latest add https://uaiblocks.dev/r/feature-showcase.json
File Analysis block

Attached files, extraction status, and findings that cite the page or cell they came from.

npx shadcn@latest add https://uaiblocks.dev/r/file-analysis.json
File Upload ui

File selection and drag and drop with validation, progress, retry, and removal.

npx shadcn@latest add https://uaiblocks.dev/r/file-upload.json
Filter Bar ui

Composable filters, removable chips, result counts, and reset actions.

npx shadcn@latest add https://uaiblocks.dev/r/filter-bar.json
Form Error Summary ui

A submission error summary with links that focus the matching fields.

npx shadcn@latest add https://uaiblocks.dev/r/form-error-summary.json
Form Field ui

Labels, descriptions, requirements, validation, and character counts.

npx shadcn@latest add https://uaiblocks.dev/r/form-field.json
Hero Section block

Positioning, a primary action, supporting proof, and product media.

npx shadcn@latest add https://uaiblocks.dev/r/hero-section.json
Import Workflow block

File selection, column mapping, validation, preview, and completion.

npx shadcn@latest add https://uaiblocks.dev/r/import-workflow.json
Incident Dashboard block

Status, impact, timeline, responders, and updates.

npx shadcn@latest add https://uaiblocks.dev/r/incident-dashboard.json
Inline Feedback ui

Confirm or reject a local action in a polite live region without interrupting the workflow.

npx shadcn@latest add https://uaiblocks.dev/r/inline-feedback.json
Installment Picker ui

Card installment choices with amounts, interest terms, and totals in list, tiles, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/installment-picker.json
Kanban Board ui

Columns, cards, keyboard movement, and empty states.

npx shadcn@latest add https://uaiblocks.dev/r/kanban-board.json
Map Controls ui

Zoom, compass, locate, and custom camera buttons for any map library.

npx shadcn@latest add https://uaiblocks.dev/r/map-controls.json
Map Frame ui

A labelled map region that hosts any map library, anchors overlays to its edges, and shows a placeholder basemap.

npx shadcn@latest add https://uaiblocks.dev/r/map-frame.json
Map Legend ui

Layer symbols, counts, a color ramp, and visibility toggles for a map.

npx shadcn@latest add https://uaiblocks.dev/r/map-legend.json
Map Marker ui

Selectable map pins, dots, and price labels with tones, captions, and cluster counts.

npx shadcn@latest add https://uaiblocks.dev/r/map-marker.json
Message ui

User, assistant, system, and tool messages with avatar, header, content, actions, and streaming state.

npx shadcn@latest add https://uaiblocks.dev/r/message.json
Metric Card ui

A value with comparison, trend, and supporting context.

npx shadcn@latest add https://uaiblocks.dev/r/metric-card.json
Newsletter Form ui

Email signup with consent, validation, submission, success, and duplicate-email states.

npx shadcn@latest add https://uaiblocks.dev/r/newsletter-form.json
Notification Center block

Updates grouped by date with unread state, filters, per-item toggles, and bulk actions.

npx shadcn@latest add https://uaiblocks.dev/r/notification-center.json
Onboarding Wizard block

Resumable setup steps with validation, progress, optional steps, and completion.

npx shadcn@latest add https://uaiblocks.dev/r/onboarding-wizard.json
Order Status ui

A compound fulfillment timeline with card, plain, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/order-status.json
Order Tracking block

Status, shipment events, delivery estimates, and support.

npx shadcn@latest add https://uaiblocks.dev/r/order-tracking.json
Page Tabs ui

Primary tabs with counts, page actions, and horizontal overflow.

npx shadcn@latest add https://uaiblocks.dev/r/page-tabs.json
Password Recovery ui

A compound account recovery workflow with request, sent, reset, expired, and success states.

npx shadcn@latest add https://uaiblocks.dev/r/password-recovery.json
Pix Automático ui

The authorization step for recurring Pix: clear terms, QR Code or bank-app confirmation with a bank picker, a live waiting state that names the bank, and an ac…

npx shadcn@latest add https://uaiblocks.dev/r/pix-automatico.json
Pix Payment ui

A Pix charge with QR code, copy-and-paste code, expiry countdown, payment status, and card, plain, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/pix-payment.json
Place Card ui

Place details with rating, opening status, contact facts, and actions as a card or map popup.

npx shadcn@latest add https://uaiblocks.dev/r/place-card.json
Price Summary ui

A compound order total with card, plain, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/price-summary.json
Pricing Section block

Plans, billing periods, limits, and purchase actions.

npx shadcn@latest add https://uaiblocks.dev/r/pricing-section.json
Pricing Toggle ui

Switch billing periods while keeping prices, billing context, and savings labels in sync.

npx shadcn@latest add https://uaiblocks.dev/r/pricing-toggle.json
Product Detail block

Gallery, options, availability, price, delivery, and purchase actions.

npx shadcn@latest add https://uaiblocks.dev/r/product-detail.json
Product Gallery ui

Media selection with thumbnails, zoom, fullscreen viewing, and required alt text.

npx shadcn@latest add https://uaiblocks.dev/r/product-gallery.json
Product Listing block

Categories, filters, sorting, result counts, and pagination.

npx shadcn@latest add https://uaiblocks.dev/r/product-listing.json
Profile Page block

Identity, account actions, contact details, and recent activity in a sidebar or stacked layout.

npx shadcn@latest add https://uaiblocks.dev/r/profile-page.json
Progress Summary ui

Progress, elapsed time, remaining work, and cancellation in one composable summary.

npx shadcn@latest add https://uaiblocks.dev/r/progress-summary.json
Prompt Composer ui

A compound prompt bar with composable add, input, and action regions.

npx shadcn@latest add https://uaiblocks.dev/r/prompt-composer.json
Public Profile block

Identity, links, follower counts, pinned work, and recent activity.

npx shadcn@latest add https://uaiblocks.dev/r/public-profile.json
Quantity Picker ui

A compound quantity control with limits, direct input, and stock feedback.

npx shadcn@latest add https://uaiblocks.dev/r/quantity-picker.json
Reaction Bar ui

Reaction counts and selected states with accessible names and an add-reaction menu.

npx shadcn@latest add https://uaiblocks.dev/r/reaction-bar.json
Report Builder block

Select metrics, dimensions, filters, visualization, and export format.

npx shadcn@latest add https://uaiblocks.dev/r/report-builder.json
Research Session block

A research plan, live search activity, sources, and a cited synthesis.

npx shadcn@latest add https://uaiblocks.dev/r/research-session.json
Resource Manager block

List, create, inspect, edit, archive, and delete domain records.

npx shadcn@latest add https://uaiblocks.dev/r/resource-manager.json
Response Status ui

Queued, streaming, stopped, complete, and failed response states with stop and retry actions.

npx shadcn@latest add https://uaiblocks.dev/r/response-status.json
Route Summary ui

Travel modes, stops, totals, and turn-by-turn directions for a route.

npx shadcn@latest add https://uaiblocks.dev/r/route-summary.json
Run Summary ui

A summary of completed agent work with stats, changed artifacts, warnings, and next actions.

npx shadcn@latest add https://uaiblocks.dev/r/run-summary.json
Search Field ui

Clearable search with recent queries, loading, empty, and error feedback.

npx shadcn@latest add https://uaiblocks.dev/r/search-field.json
Search Results block

Query controls, filters, ranked results with highlighted terms, empty states, and pagination.

npx shadcn@latest add https://uaiblocks.dev/r/search-results.json
Settings Page block

Grouped settings with field validation, a sticky save state, and a guarded danger zone.

npx shadcn@latest add https://uaiblocks.dev/r/settings-page.json
Share Menu ui

A share menu with native sharing, copy-link feedback, and channel links.

npx shadcn@latest add https://uaiblocks.dev/r/share-menu.json
Sign-in Card ui

A compound sign-in form with providers, credentials, recovery, and async feedback.

npx shadcn@latest add https://uaiblocks.dev/r/sign-in-card.json
Sign-up Card ui

A compound account creation form with consent, password guidance, and verification feedback.

npx shadcn@latest add https://uaiblocks.dev/r/sign-up-card.json
Skeleton Group ui

Composable loading placeholders that match page structure without layout shift.

npx shadcn@latest add https://uaiblocks.dev/r/skeleton-group.json
Split Pane ui

Two resizable regions with keyboard controls and saved proportions.

npx shadcn@latest add https://uaiblocks.dev/r/split-pane.json
Status Banner ui

Information, success, warning, and error banners with optional actions and dismissal.

npx shadcn@latest add https://uaiblocks.dev/r/status-banner.json
Step Indicator ui

Current, complete, optional, blocked, and error steps with explicit status text.

npx shadcn@latest add https://uaiblocks.dev/r/step-indicator.json
Subscription Management block

Change plans, usage limits, payment, renewal, and cancellation.

npx shadcn@latest add https://uaiblocks.dev/r/subscription-management.json
Task List ui

A composable progress list with card, timeline, and compact variants.

npx shadcn@latest add https://uaiblocks.dev/r/task-list.json
Team Management block

Members, roles, invitations, access status, search, and confirmed removal.

npx shadcn@latest add https://uaiblocks.dev/r/team-management.json
Testimonial Card ui

A quote with the person, role, organization, and an optional proof link.

npx shadcn@latest add https://uaiblocks.dev/r/testimonial-card.json
Testimonials Section block

Customer stories with people, roles, organizations, and a rating summary.

npx shadcn@latest add https://uaiblocks.dev/r/testimonials-section.json
Thinking ui

A composable activity disclosure with explicit states and structured evidence.

npx shadcn@latest add https://uaiblocks.dev/r/thinking.json
Tool Call ui

Queued, running, successful, and failed tool activity with a disclosure for input and output.

npx shadcn@latest add https://uaiblocks.dev/r/tool-call.json
Trust Panel ui

Customer logos, ratings, certifications, and security evidence in one section.

npx shadcn@latest add https://uaiblocks.dev/r/trust-panel.json
Unsaved Changes Bar ui

Persistent save and discard actions with busy, error, and page-exit warnings.

npx shadcn@latest add https://uaiblocks.dev/r/unsaved-changes-bar.json
Waitlist Section block

Collect interest with qualification fields, consent, and confirmation.

npx shadcn@latest add https://uaiblocks.dev/r/waitlist-section.json
Workspace Setup block

Create a workspace, invite teammates, and choose initial settings.

npx shadcn@latest add https://uaiblocks.dev/r/workspace-setup.json