Feedback components
Components that tell people what is happening: toasts, inline alerts, progress bars and circles, spinners, skeletons and empty states.
Spinners wait before they appear and then stay long enough to read, so fast work never flickers, and every change is announced to screen readers.
- AlertInline messages for status and feedback, with a neutral surface, a colored icon and a dismiss that collapses smoothly.
- EmptyA placeholder for screens with nothing to show yet, with an icon, a message and the next action.
- ProgressA bar or ring that shows how far a task has come, eases between updates and slides while the total is unknown.
- SkeletonPlaceholders that wait 150ms before showing, take the exact size of the content they wrap, and fade it in without moving anything.
- SpinnerA loading indicator with Apple-style ticks or a breathing ring that can wait before showing and stay long enough not to flicker.
- ToastBrief messages that stack neatly, expand on hover, swipe away, and turn a loading state into success or error in place.
Built into Pro blocks
Blocks for AI products that are built from these components.
- MarkdownMarkdown rendering for AI answers. Handles streaming without half-typed syntax, tables you can copy and inline citations.
- BillingThe plan and usage page of an AI product. Handles credits running out mid-cycle, plan changes with proration and card errors.
- Diff ReviewA review of an agent’s file edits before they land. Handles accept or reject per change, comments back to the agent and edits still streaming.
- API keysThe API keys page of an AI product. Handles a secret shown only once, revoke with undo and rotation with a grace period.
- SecurityThe Security section of an AI product’s settings. Handles sessions, two-factor with recovery codes and deletion behind a typed confirmation.
- SettingsThe settings page of an AI product. Handles a save bar that appears only when something changed, field errors and loading states.