---
name: "@uai"
slug: "uai"
description: "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)."
category: "Animated components"
tags: ["ai", "animation", "auth", "blocks", "buttons", "cards", "dashboard", "developer-tools", "e-commerce", "forms", "loaders", "maps", "marketing", "media", "navigation", "onboarding", "overlays", "payments", "pro-available", "tables", "theming"]
framework: "react"
license: "MIT"
author: "victor-teles"
website: "https://uaiblocks.dev"
github: "https://github.com/victor-teles/uai"
registry: "https://uaiblocks.dev/r/registry.json"
pro: true
pro_url: "https://uaiblocks.dev/components/pricing-toggle"
github_stars: 1
component_count: 112
generated_at: "2026-10-20T06:35:22.791Z"
---

# @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).

## Links

- Website: https://uaiblocks.dev
- GitHub: https://github.com/victor-teles/uai
- Registry JSON: https://uaiblocks.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/uai
- This file: https://sh4dcn.vercel.app/md/uai.md
- Pro / pricing: https://uaiblocks.dev/components/pricing-toggle

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://uaiblocks.dev/r/registry.json
pnpm dlx shadcn@latest add https://uaiblocks.dev/r/registry.json
bunx shadcn@latest add https://uaiblocks.dev/r/registry.json
# clone the source repo
git clone https://github.com/victor-teles/uai.git
# fetch the raw registry index
curl -s https://uaiblocks.dev/r/registry.json
```

## Components (112)

| name | type | description | install |
| --- | --- | --- | --- |
| uai-theme | registry: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-utils | registry:lib | A small class-name merge utility shared by Uai components. | `npx shadcn@latest add https://uaiblocks.dev/r/uai-utils.json` |
| uai-number-tick | registry: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` |
| thinking | registry:ui | A composable activity disclosure with explicit states and structured evidence. | `npx shadcn@latest add https://uaiblocks.dev/r/thinking.json` |
| approval-card | registry:ui | A composable decision surface that keeps risk, evidence, and impact explicit. | `npx shadcn@latest add https://uaiblocks.dev/r/approval-card.json` |
| empty-state | registry:ui | A compound blank-slate surface with card, plain, compact, and page variants. | `npx shadcn@latest add https://uaiblocks.dev/r/empty-state.json` |
| task-list | registry:ui | A composable progress list with card, timeline, and compact variants. | `npx shadcn@latest add https://uaiblocks.dev/r/task-list.json` |
| prompt-composer | registry:ui | A compound prompt bar with composable add, input, and action regions. | `npx shadcn@latest add https://uaiblocks.dev/r/prompt-composer.json` |
| sign-in-card | registry: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 | registry: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` |
| password-recovery | registry: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` |
| coupon-field | registry:ui | A compound discount field with rounded, pill, and compact variants. | `npx shadcn@latest add https://uaiblocks.dev/r/coupon-field.json` |
| quantity-picker | registry:ui | A compound quantity control with limits, direct input, and stock feedback. | `npx shadcn@latest add https://uaiblocks.dev/r/quantity-picker.json` |
| cart-item | registry:ui | A compound cart line with product details, availability, quantity, price, and removal. | `npx shadcn@latest add https://uaiblocks.dev/r/cart-item.json` |
| price-summary | registry:ui | A compound order total with card, plain, and compact variants. | `npx shadcn@latest add https://uaiblocks.dev/r/price-summary.json` |
| order-status | registry:ui | A compound fulfillment timeline with card, plain, and compact variants. | `npx shadcn@latest add https://uaiblocks.dev/r/order-status.json` |
| app-header | registry:ui | A compound application header with navigation, search, account actions, and responsive overflow. | `npx shadcn@latest add https://uaiblocks.dev/r/app-header.json` |
| form-field | registry:ui | Labels, descriptions, requirements, validation, and character counts. | `npx shadcn@latest add https://uaiblocks.dev/r/form-field.json` |
| search-field | registry:ui | Clearable search with recent queries, loading, empty, and error feedback. | `npx shadcn@latest add https://uaiblocks.dev/r/search-field.json` |
| filter-bar | registry:ui | Composable filters, removable chips, result counts, and reset actions. | `npx shadcn@latest add https://uaiblocks.dev/r/filter-bar.json` |
| file-upload | registry:ui | File selection and drag and drop with validation, progress, retry, and removal. | `npx shadcn@latest add https://uaiblocks.dev/r/file-upload.json` |
| date-range-picker | registry: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` |
| form-error-summary | registry:ui | A submission error summary with links that focus the matching fields. | `npx shadcn@latest add https://uaiblocks.dev/r/form-error-summary.json` |
| unsaved-changes-bar | registry: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` |
| step-indicator | registry:ui | Current, complete, optional, blocked, and error steps with explicit status text. | `npx shadcn@latest add https://uaiblocks.dev/r/step-indicator.json` |
| app-sidebar | registry:ui | Nested navigation with collapsed mode, a mobile disclosure, and active states. | `npx shadcn@latest add https://uaiblocks.dev/r/app-sidebar.json` |
| breadcrumb-trail | registry:ui | Hierarchy with label truncation, collapsed levels, and a compact mobile fallback. | `npx shadcn@latest add https://uaiblocks.dev/r/breadcrumb-trail.json` |
| page-tabs | registry:ui | Primary tabs with counts, page actions, and horizontal overflow. | `npx shadcn@latest add https://uaiblocks.dev/r/page-tabs.json` |
| command-menu | registry:ui | Search and run grouped actions with full keyboard navigation. | `npx shadcn@latest add https://uaiblocks.dev/r/command-menu.json` |
| split-pane | registry:ui | Two resizable regions with keyboard controls and saved proportions. | `npx shadcn@latest add https://uaiblocks.dev/r/split-pane.json` |
| status-banner | registry:ui | Information, success, warning, and error banners with optional actions and dismissal. | `npx shadcn@latest add https://uaiblocks.dev/r/status-banner.json` |
| progress-summary | registry:ui | Progress, elapsed time, remaining work, and cancellation in one composable summary. | `npx shadcn@latest add https://uaiblocks.dev/r/progress-summary.json` |
| inline-feedback | registry: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` |
| confirmation-dialog | registry: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` |
| activity-timeline | registry:ui | Events, actors, timestamps, metadata, and grouped dates in an ordered timeline. | `npx shadcn@latest add https://uaiblocks.dev/r/activity-timeline.json` |
| skeleton-group | registry:ui | Composable loading placeholders that match page structure without layout shift. | `npx shadcn@latest add https://uaiblocks.dev/r/skeleton-group.json` |
| data-table-toolbar | registry:ui | Search, filters, column visibility, export, and bulk actions for selected rows. | `npx shadcn@latest add https://uaiblocks.dev/r/data-table-toolbar.json` |
| metric-card | registry:ui | A value with comparison, trend, and supporting context. | `npx shadcn@latest add https://uaiblocks.dev/r/metric-card.json` |
| description-list | registry:ui | Labeled facts with responsive alignment and optional actions. | `npx shadcn@latest add https://uaiblocks.dev/r/description-list.json` |
| comparison-table | registry:ui | Compare plans or products with sticky labels and highlighted differences. | `npx shadcn@latest add https://uaiblocks.dev/r/comparison-table.json` |
| kanban-board | registry:ui | Columns, cards, keyboard movement, and empty states. | `npx shadcn@latest add https://uaiblocks.dev/r/kanban-board.json` |
| calendar-view | registry:ui | Day, week, and month layouts with event overflow. | `npx shadcn@latest add https://uaiblocks.dev/r/calendar-view.json` |
| audit-log | registry:ui | Actors, actions, resources, timestamps, filters, and event details. | `npx shadcn@latest add https://uaiblocks.dev/r/audit-log.json` |
| author-card | registry: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` |
| comment | registry:ui | Comments with nested replies, reactions, inline editing, moderation states, and timestamps. | `npx shadcn@latest add https://uaiblocks.dev/r/comment.json` |
| reaction-bar | registry: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` |
| share-menu | registry:ui | A share menu with native sharing, copy-link feedback, and channel links. | `npx shadcn@latest add https://uaiblocks.dev/r/share-menu.json` |
| changelog-entry | registry:ui | A release entry with date, version, categories, and linked changes. | `npx shadcn@latest add https://uaiblocks.dev/r/changelog-entry.json` |
| announcement-bar | registry:ui | A campaign message with actions, dismissal, and remembered dismissal. | `npx shadcn@latest add https://uaiblocks.dev/r/announcement-bar.json` |
| pricing-toggle | registry: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` |
| testimonial-card | registry:ui | A quote with the person, role, organization, and an optional proof link. | `npx shadcn@latest add https://uaiblocks.dev/r/testimonial-card.json` |
| product-gallery | registry:ui | Media selection with thumbnails, zoom, fullscreen viewing, and required alt text. | `npx shadcn@latest add https://uaiblocks.dev/r/product-gallery.json` |
| trust-panel | registry:ui | Customer logos, ratings, certifications, and security evidence in one section. | `npx shadcn@latest add https://uaiblocks.dev/r/trust-panel.json` |
| newsletter-form | registry:ui | Email signup with consent, validation, submission, success, and duplicate-email states. | `npx shadcn@latest add https://uaiblocks.dev/r/newsletter-form.json` |
| message | registry: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` |
| citation | registry:ui | An inline claim marker with a source preview card and destination link. | `npx shadcn@latest add https://uaiblocks.dev/r/citation.json` |
| attachment | registry: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` |
| tool-call | registry: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` |
| response-status | registry: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` |
| run-summary | registry: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` |
| context-meter | registry: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` |
| map-frame | registry: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-controls | registry:ui | Zoom, compass, locate, and custom camera buttons for any map library. | `npx shadcn@latest add https://uaiblocks.dev/r/map-controls.json` |
| map-marker | registry: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` |
| map-legend | registry:ui | Layer symbols, counts, a color ramp, and visibility toggles for a map. | `npx shadcn@latest add https://uaiblocks.dev/r/map-legend.json` |
| place-card | registry: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` |
| route-summary | registry:ui | Travel modes, stops, totals, and turn-by-turn directions for a route. | `npx shadcn@latest add https://uaiblocks.dev/r/route-summary.json` |
| hero-section | registry:block | Positioning, a primary action, supporting proof, and product media. | `npx shadcn@latest add https://uaiblocks.dev/r/hero-section.json` |
| feature-showcase | registry:block | Benefits through alternating copy, media, and supporting details. | `npx shadcn@latest add https://uaiblocks.dev/r/feature-showcase.json` |
| pricing-section | registry:block | Plans, billing periods, limits, and purchase actions. | `npx shadcn@latest add https://uaiblocks.dev/r/pricing-section.json` |
| testimonials-section | registry:block | Customer stories with people, roles, organizations, and a rating summary. | `npx shadcn@latest add https://uaiblocks.dev/r/testimonials-section.json` |
| faq-section | registry:block | Searchable questions with accessible disclosure answers. | `npx shadcn@latest add https://uaiblocks.dev/r/faq-section.json` |
| call-to-action | registry:block | A closing section with one goal, supporting copy, and reassurance. | `npx shadcn@latest add https://uaiblocks.dev/r/call-to-action.json` |
| waitlist-section | registry:block | Collect interest with qualification fields, consent, and confirmation. | `npx shadcn@latest add https://uaiblocks.dev/r/waitlist-section.json` |
| contact-section | registry:block | Contact options, availability, a message form with its states, and expectations. | `npx shadcn@latest add https://uaiblocks.dev/r/contact-section.json` |
| dashboard-shell | registry: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` |
| settings-page | registry: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` |
| profile-page | registry: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` |
| team-management | registry:block | Members, roles, invitations, access status, search, and confirmed removal. | `npx shadcn@latest add https://uaiblocks.dev/r/team-management.json` |
| notification-center | registry: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` |
| billing-portal | registry:block | Plan, usage, payment method, invoice history, billing alerts, and confirmed cancellation. | `npx shadcn@latest add https://uaiblocks.dev/r/billing-portal.json` |
| search-results | registry:block | Query controls, filters, ranked results with highlighted terms, empty states, and pagination. | `npx shadcn@latest add https://uaiblocks.dev/r/search-results.json` |
| resource-manager | registry:block | List, create, inspect, edit, archive, and delete domain records. | `npx shadcn@latest add https://uaiblocks.dev/r/resource-manager.json` |
| data-explorer | registry:block | Query surface, results, saved views, and export actions. | `npx shadcn@latest add https://uaiblocks.dev/r/data-explorer.json` |
| import-workflow | registry:block | File selection, column mapping, validation, preview, and completion. | `npx shadcn@latest add https://uaiblocks.dev/r/import-workflow.json` |
| approval-queue | registry:block | Pending decisions grouped by risk, age, owner, and impact. | `npx shadcn@latest add https://uaiblocks.dev/r/approval-queue.json` |
| audit-log-viewer | registry:block | Filters, events, details, and export controls. | `npx shadcn@latest add https://uaiblocks.dev/r/audit-log-viewer.json` |
| incident-dashboard | registry:block | Status, impact, timeline, responders, and updates. | `npx shadcn@latest add https://uaiblocks.dev/r/incident-dashboard.json` |
| report-builder | registry:block | Select metrics, dimensions, filters, visualization, and export format. | `npx shadcn@latest add https://uaiblocks.dev/r/report-builder.json` |
| product-detail | registry:block | Gallery, options, availability, price, delivery, and purchase actions. | `npx shadcn@latest add https://uaiblocks.dev/r/product-detail.json` |
| product-listing | registry:block | Categories, filters, sorting, result counts, and pagination. | `npx shadcn@latest add https://uaiblocks.dev/r/product-listing.json` |
| cart-drawer | registry:block | Review items, quantities, discounts, totals, and checkout actions. | `npx shadcn@latest add https://uaiblocks.dev/r/cart-drawer.json` |
| checkout | registry:block | Guide contact, delivery, payment, review, and confirmation. | `npx shadcn@latest add https://uaiblocks.dev/r/checkout.json` |
| order-tracking | registry:block | Status, shipment events, delivery estimates, and support. | `npx shadcn@latest add https://uaiblocks.dev/r/order-tracking.json` |
| subscription-management | registry:block | Change plans, usage limits, payment, renewal, and cancellation. | `npx shadcn@latest add https://uaiblocks.dev/r/subscription-management.json` |
| code-verification | registry:block | One-time code entry with paste, resend timing, errors, and alternate methods. | `npx shadcn@latest add https://uaiblocks.dev/r/code-verification.json` |
| onboarding-wizard | registry:block | Resumable setup steps with validation, progress, optional steps, and completion. | `npx shadcn@latest add https://uaiblocks.dev/r/onboarding-wizard.json` |
| workspace-setup | registry:block | Create a workspace, invite teammates, and choose initial settings. | `npx shadcn@latest add https://uaiblocks.dev/r/workspace-setup.json` |
| article-page | registry:block | Long-form reading with metadata, text size controls, sharing, and related articles. | `npx shadcn@latest add https://uaiblocks.dev/r/article-page.json` |
| documentation-page | registry: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` |
| changelog-page | registry:block | Releases grouped by date with version, category, and product area filters. | `npx shadcn@latest add https://uaiblocks.dev/r/changelog-page.json` |
| comment-thread | registry:block | Nested replies, reactions, sorting, moderation states, and a comment composer. | `npx shadcn@latest add https://uaiblocks.dev/r/comment-thread.json` |
| community-feed | registry:block | Posts with authors, tags, reactions, filters, and numbered pagination. | `npx shadcn@latest add https://uaiblocks.dev/r/community-feed.json` |
| public-profile | registry:block | Identity, links, follower counts, pinned work, and recent activity. | `npx shadcn@latest add https://uaiblocks.dev/r/public-profile.json` |
| conversation-thread | registry:block | Messages, cited sources, response states, and a prompt composer in one thread. | `npx shadcn@latest add https://uaiblocks.dev/r/conversation-thread.json` |
| research-session | registry:block | A research plan, live search activity, sources, and a cited synthesis. | `npx shadcn@latest add https://uaiblocks.dev/r/research-session.json` |
| file-analysis | registry: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` |
| agent-run | registry: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` |
| document-field | registry: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` |
| cep-field | registry: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` |
| pix-payment | registry: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` |
| installment-picker | registry: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` |

## For AI agents

```text
You are adding components from @uai to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/uai.md) for the component list.
2. Fetch the machine-readable index: https://uaiblocks.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: uai).
```