# Components

URL: /code/ui/components · Id: `page:code/ui/components`

> Every Component in the catalog, with the renderers that draw it as HTML for people, JSON for native clients and Markdown for agents.

Every [Component](/business/nouns/component) renders from one definition three ways: `web` for people, `native` for devices and `markdown` for [Agents](/business/nouns/agent). Each page lists the props a Component takes.

| Component | Renderers |
| --- | --- |
| [MetricTile](/code/ui/components/metric-tile) | `web`, `native`, `markdown` |
| [KeyResult](/code/ui/components/key-result) | `web`, `native`, `markdown` |
| [GoalTree](/code/ui/components/goal-tree) | `web`, `native`, `markdown` |
| [PendingFeed](/code/ui/components/pending-feed) | `web`, `native`, `markdown` |
| [TaskInbox](/code/ui/components/task-inbox) | `web`, `native`, `markdown` |
| [ApprovalSheet](/code/ui/components/approval-sheet) | `web`, `native`, `markdown` |
| [VarianceAlert](/code/ui/components/variance-alert) | `web`, `native`, `markdown` |
| [DataTable](/code/ui/components/data-table) | `web`, `native`, `markdown` |
| [LensGrid](/code/ui/components/lens-grid) | `web`, `native`, `markdown` |
| [Benchmark](/code/ui/components/benchmark) | `web`, `native`, `markdown` |
| [VerbSheet](/code/ui/components/verb-sheet) | `web`, `native`, `markdown` |
| [ActionStatus](/code/ui/components/action-status) | `web`, `native`, `markdown` |
| [ThingDetail](/code/ui/components/thing-detail) | `web`, `native`, `markdown` |
| [Board](/code/ui/components/board) | `web`, `native`, `markdown` |
| [Timeline](/code/ui/components/timeline) | `web`, `native`, `markdown` |
| [Navigation](/code/ui/components/navigation) | `web`, `native`, `markdown` |
| [VerbReference](/code/ui/components/verb-reference) | `web`, `native`, `markdown` |
| [Hero](/code/ui/components/hero) | `web`, `native`, `markdown` |
| [Features](/code/ui/components/features) | `web`, `native`, `markdown` |
| [PriceTable](/code/ui/components/price-table) | `web`, `native`, `markdown` |
| [Faq](/code/ui/components/faq) | `web`, `native`, `markdown` |
| [Reserve](/code/ui/components/reserve) | `web`, `native`, `markdown` |
| [WaitlistJoin](/code/ui/components/waitlist-join) | `web`, `native`, `markdown` |
| [CallToAction](/code/ui/components/call-to-action) | `web`, `native`, `markdown` |
| [Changelog](/code/ui/components/changelog) | `web`, `native`, `markdown` |
| [Footer](/code/ui/components/footer) | `web`, `native`, `markdown` |
| [SignIn](/code/ui/components/sign-in) | `web`, `native`, `markdown` |
| [UserMenu](/code/ui/components/user-menu) | `web`, `native`, `markdown` |
| [TenantSwitcher](/code/ui/components/tenant-switcher) | `web`, `native`, `markdown` |
| [Checkout](/code/ui/components/checkout) | `web`, `native`, `markdown` |
| [InvoiceList](/code/ui/components/invoice-list) | `web`, `native`, `markdown` |
| [UsageMeter](/code/ui/components/usage-meter) | `web`, `native`, `markdown` |
| [StateBadge](/code/ui/components/state-badge) | `web`, `native`, `markdown` |
| [AgentChat](/code/ui/components/agent-chat) | `web`, `native`, `markdown` |