# All components

> The 75 components a model can use, in 9 packs: what each is for, its attributes, and a live preview drawn by the core.

Every answer can use the `core` pack. The others are added by default; an app that names the packs it wants (`packs` in the API and the SDKs) gets core and those, and the model is told about only those. Fewer packs make a shorter system prompt: core alone is about 1,400 tokens, every pack about 2,900.

| Pack | Components | What it's for |
|---|---|---|
| [Core](/docs/components/core) | 25 | Always included: layout, text blocks, numbers, charts, forms and buttons. |
| [Data](/docs/components/data) | 7 | Ways to show data beyond charts and tables: facts, timelines, gauges, heatmaps, funnels, sparklines and hierarchies. |
| [Commerce](/docs/components/commerce) | 6 | Shopping: products, pricing plans, carts, ratings, comparisons and prices. |
| [Device](/docs/components/device) | 10 | The device's own hardware and apps: maps, camera, scanning, location, files, contacts, the calendar, sharing, voice notes and QR codes. Native on every platform, with a web fallback that needs no JavaScript. |
| [Docs](/docs/components/docs) | 5 | Technical writing: code with a file name, diffs, formulas, file trees and cited sources. |
| [Inputs](/docs/components/inputs) | 6 | More form fields: star ratings, searchable choices, times, toggle groups, steppers and signatures. |
| [Interactive](/docs/components/interactive) | 7 | Things the reader does on the page, kept on their device and reported back: a quiz, flashcards, a poll, a checklist, and what-if sliders. |
| [Media](/docs/components/media) | 4 | Video, audio, embeds from known hosts, and a carousel of images. |
| [Scheduling](/docs/components/scheduling) | 5 | Time: a month calendar, events, time slots to pick, a day's agenda and countdowns. |

## Names models use on their own

A few names models reach for without being told are read as the component they mean, and reported as a note, never taught:

| They write | It's read as |
|---|---|
| `<Table>` | `<Card>`: a section holding a Markdown table |
| `<Column>` | a plain group: one cell of Columns |
| `<Buttons>` | a plain group: a row of buttons |
| `<Text>` | a plain group: what models call a run of text |

## Every component

- **Core:** [Card](/docs/components/core#card), [Columns](/docs/components/core#columns), [Tabs](/docs/components/core#tabs), [Tab](/docs/components/core#tab), [Details](/docs/components/core#details), [Steps](/docs/components/core#steps), [Step](/docs/components/core#step), [Callout](/docs/components/core#callout), [Stat](/docs/components/core#stat), [Badge](/docs/components/core#badge), [Progress](/docs/components/core#progress), [Avatar](/docs/components/core#avatar), [Gallery](/docs/components/core#gallery), [Chart](/docs/components/core#chart), [FollowUps](/docs/components/core#followups), [Form](/docs/components/core#form), [Input](/docs/components/core#input), [TextArea](/docs/components/core#textarea), [Select](/docs/components/core#select), [Date](/docs/components/core#date), [Slider](/docs/components/core#slider), [Checkboxes](/docs/components/core#checkboxes), [Radio](/docs/components/core#radio), [Switch](/docs/components/core#switch), [Button](/docs/components/core#button)
- **Data:** [KeyValue](/docs/components/data#keyvalue), [Timeline](/docs/components/data#timeline), [Gauge](/docs/components/data#gauge), [Heatmap](/docs/components/data#heatmap), [Funnel](/docs/components/data#funnel), [Sparkline](/docs/components/data#sparkline), [Tree](/docs/components/data#tree)
- **Commerce:** [Product](/docs/components/commerce#product), [Plan](/docs/components/commerce#plan), [Cart](/docs/components/commerce#cart), [Rating](/docs/components/commerce#rating), [Compare](/docs/components/commerce#compare), [Price](/docs/components/commerce#price)
- **Device:** [Map](/docs/components/device#map), [Camera](/docs/components/device#camera), [Scan](/docs/components/device#scan), [Location](/docs/components/device#location), [File](/docs/components/device#file), [Contact](/docs/components/device#contact), [AddToCalendar](/docs/components/device#addtocalendar), [Share](/docs/components/device#share), [VoiceNote](/docs/components/device#voicenote), [QR](/docs/components/device#qr)
- **Docs:** [Code](/docs/components/docs#code), [Diff](/docs/components/docs#diff), [Math](/docs/components/docs#math), [FileTree](/docs/components/docs#filetree), [Citation](/docs/components/docs#citation)
- **Inputs:** [RatingInput](/docs/components/inputs#ratinginput), [Combobox](/docs/components/inputs#combobox), [Time](/docs/components/inputs#time), [ToggleGroup](/docs/components/inputs#togglegroup), [Stepper](/docs/components/inputs#stepper), [Signature](/docs/components/inputs#signature)
- **Interactive:** [Quiz](/docs/components/interactive#quiz), [Question](/docs/components/interactive#question), [Flashcards](/docs/components/interactive#flashcards), [Poll](/docs/components/interactive#poll), [Checklist](/docs/components/interactive#checklist), [WhatIf](/docs/components/interactive#whatif), [Result](/docs/components/interactive#result)
- **Media:** [Video](/docs/components/media#video), [Audio](/docs/components/media#audio), [Embed](/docs/components/media#embed), [Carousel](/docs/components/media#carousel)
- **Scheduling:** [Calendar](/docs/components/scheduling#calendar), [Event](/docs/components/scheduling#event), [TimeSlots](/docs/components/scheduling#timeslots), [Agenda](/docs/components/scheduling#agenda), [Countdown](/docs/components/scheduling#countdown)