# Jetpack Compose components

> Explore interactions and different looks. Find a piece to copy into your app.

92 components, grouped by the app template they come from. Each line lists access, UI elements and the Composables CLI ID.

## [Pairel](https://composables.com/apps/pairel.md)

- [Alert Dialog](https://composables.com/apps/pairel/components/alert-dialog.md) · Dialog · `pairel/components/alert-dialog`
- [App Bar](https://composables.com/apps/pairel/components/app-bar.md) · Navigation Bar · `pairel/components/app-bar`
- [Avatar](https://composables.com/apps/pairel/components/avatar.md) · Avatar · `pairel/components/avatar`
- [Bottom Bar](https://composables.com/apps/pairel/components/bottom-bar.md) · Tab Bar · `pairel/components/bottom-bar`
- [Bottom Bar Item](https://composables.com/apps/pairel/components/bottom-bar-item.md) · Tab Bar · `pairel/components/bottom-bar-item`
- [Bottom Sheet](https://composables.com/apps/pairel/components/bottom-sheet.md) · Bottom Sheet · `pairel/components/bottom-sheet`
- [Button](https://composables.com/apps/pairel/components/button.md) · Button · `pairel/components/button`
- [Card](https://composables.com/apps/pairel/components/card.md) · Card · `pairel/components/card`
- [Centered App Bar](https://composables.com/apps/pairel/components/centered-app-bar.md) · Navigation Bar · `pairel/components/centered-app-bar`
- [Checkbox](https://composables.com/apps/pairel/components/checkbox.md) · Checkbox · `pairel/components/checkbox`
- [Choice Button](https://composables.com/apps/pairel/components/choice-button.md) · Button · `pairel/components/choice-button`
- [Conversation List Item](https://composables.com/apps/pairel/components/conversation-list-item.md) · List Item · `pairel/components/conversation-list-item`
- [Conversations List](https://composables.com/apps/pairel/components/conversations-list.md) · List Item · `pairel/components/conversations-list`
- [Disclosure](https://composables.com/apps/pairel/components/disclosure.md) · Accordion · `pairel/components/disclosure`
- [Drawer](https://composables.com/apps/pairel/components/drawer.md) · Drawer · `pairel/components/drawer`
- [Dropdown Menu](https://composables.com/apps/pairel/components/dropdown-menu.md) · Dropdown Menu · `pairel/components/dropdown-menu`
- [Icon](https://composables.com/apps/pairel/components/icon.md) · Icon · `pairel/components/icon`
- [Icon Button](https://composables.com/apps/pairel/components/icon-button.md) · Button · `pairel/components/icon-button`
- [Modal Bottom Sheet](https://composables.com/apps/pairel/components/modal-bottom-sheet.md) · Bottom Sheet · `pairel/components/modal-bottom-sheet`
- [Preference Toggle](https://composables.com/apps/pairel/components/preference-toggle.md) · Switch · `pairel/components/preference-toggle`
- [Progress Indicator](https://composables.com/apps/pairel/components/progress-indicator.md) · Progress Indicator · `pairel/components/progress-indicator`
- [Radio Group](https://composables.com/apps/pairel/components/radio-group.md) · Radio Button · `pairel/components/radio-group`
- [Reply Bar](https://composables.com/apps/pairel/components/reply-bar.md) · Text Area · `pairel/components/reply-bar`
- [Screen Scaffold](https://composables.com/apps/pairel/components/screen-scaffold.md) · Scaffold · `pairel/components/screen-scaffold`
- [Scrollbar](https://composables.com/apps/pairel/components/scrollbar.md) · Scrollbar · `pairel/components/scrollbar`
- [Separator](https://composables.com/apps/pairel/components/separator.md) · Divider · `pairel/components/separator`
- [Sheet Content](https://composables.com/apps/pairel/components/sheet-content.md) · Bottom Sheet · `pairel/components/sheet-content`
- [Slider](https://composables.com/apps/pairel/components/slider.md) · Slider · `pairel/components/slider`
- [Tag](https://composables.com/apps/pairel/components/tag.md) · Chip · `pairel/components/tag`
- [Text](https://composables.com/apps/pairel/components/text.md) · Text · `pairel/components/text`
- [Text Field](https://composables.com/apps/pairel/components/text-field.md) · Text Field · `pairel/components/text-field`
- [Tooltip](https://composables.com/apps/pairel/components/tooltip.md) · Tooltip · `pairel/components/tooltip`
- [Tri State Checkbox](https://composables.com/apps/pairel/components/tri-state-checkbox.md) · Checkbox · `pairel/components/tri-state-checkbox`
- [Your Matches Row](https://composables.com/apps/pairel/components/your-matches-row.md) · Avatar · `pairel/components/your-matches-row`

## [Tally](https://composables.com/apps/tally.md)

- [Alert Dialog](https://composables.com/apps/tally/components/alert-dialog.md) · Dialog · `tally/components/alert-dialog`
- [App Bar](https://composables.com/apps/tally/components/app-bar.md) · Navigation Bar · `tally/components/app-bar`
- [Button](https://composables.com/apps/tally/components/button.md) · Button · `tally/components/button`
- [Filter Chip](https://composables.com/apps/tally/components/filter-chip.md) · Chip · `tally/components/filter-chip`
- [Habit Row](https://composables.com/apps/tally/components/habit-row.md) · List Item, Checkbox · `tally/components/habit-row`
- [Icon](https://composables.com/apps/tally/components/icon.md) · Icon · `tally/components/icon`
- [Icon Button](https://composables.com/apps/tally/components/icon-button.md) · Button · `tally/components/icon-button`
- [Main Navigation](https://composables.com/apps/tally/components/main-navigation.md) · Tab Bar · `tally/components/main-navigation`
- [Modal Bottom Sheet](https://composables.com/apps/tally/components/modal-bottom-sheet.md) · Bottom Sheet · `tally/components/modal-bottom-sheet`
- [Month Calendar](https://composables.com/apps/tally/components/month-calendar.md) · Calendar · `tally/components/month-calendar`
- [Option Group](https://composables.com/apps/tally/components/option-group.md) · List Item · `tally/components/option-group`
- [Option Row](https://composables.com/apps/tally/components/option-row.md) · List Item · `tally/components/option-row`
- [Option Toggle](https://composables.com/apps/tally/components/option-toggle.md) · Switch · `tally/components/option-toggle`
- [Page](https://composables.com/apps/tally/components/page.md) · Scaffold · `tally/components/page`
- [Plan Option](https://composables.com/apps/tally/components/plan-option.md) · Radio Button, Card · `tally/components/plan-option`
- [Recent Days](https://composables.com/apps/tally/components/recent-days.md) · Progress Indicator · `tally/components/recent-days`
- [Screen Scaffold](https://composables.com/apps/tally/components/screen-scaffold.md) · Scaffold · `tally/components/screen-scaffold`
- [Section](https://composables.com/apps/tally/components/section.md) · List Item · `tally/components/section`
- [Segmented Control](https://composables.com/apps/tally/components/segmented-control.md) · Segmented Button · `tally/components/segmented-control`
- [Stat Card](https://composables.com/apps/tally/components/stat-card.md) · Card · `tally/components/stat-card`
- [Template Card](https://composables.com/apps/tally/components/template-card.md) · Card · `tally/components/template-card`
- [Text](https://composables.com/apps/tally/components/text.md) · Text · `tally/components/text`
- [Text Field](https://composables.com/apps/tally/components/text-field.md) · Text Field · `tally/components/text-field`
- [Toast](https://composables.com/apps/tally/components/toast.md) · Toast · `tally/components/toast`

## [Vela](https://composables.com/apps/vela.md)

- [Alert Dialog](https://composables.com/apps/vela/components/alert-dialog.md) · Dialog · `vela/components/alert-dialog`
- [App Bar](https://composables.com/apps/vela/components/app-bar.md) · Navigation Bar · `vela/components/app-bar`
- [Attachment Chip](https://composables.com/apps/vela/components/attachment-chip.md) · Chip · `vela/components/attachment-chip`
- [Avatar](https://composables.com/apps/vela/components/avatar.md) · Avatar · `vela/components/avatar`
- [Button](https://composables.com/apps/vela/components/button.md) · Button · `vela/components/button`
- [Choice Tile](https://composables.com/apps/vela/components/choice-tile.md) · Radio Button · `vela/components/choice-tile`
- [Code Field](https://composables.com/apps/vela/components/code-field.md) · Text Field · `vela/components/code-field`
- [Composer](https://composables.com/apps/vela/components/composer.md) · Text Area · `vela/components/composer`
- [Drawer Item](https://composables.com/apps/vela/components/drawer-item.md) · Drawer, List Item · `vela/components/drawer-item`
- [Empty State](https://composables.com/apps/vela/components/empty-state.md) · Empty State · `vela/components/empty-state`
- [Icon](https://composables.com/apps/vela/components/icon.md) · Icon · `vela/components/icon`
- [Icon Button](https://composables.com/apps/vela/components/icon-button.md) · Button · `vela/components/icon-button`
- [Markdown](https://composables.com/apps/vela/components/markdown.md) · Text · `vela/components/markdown`
- [Message Actions](https://composables.com/apps/vela/components/message-actions.md) · Button · `vela/components/message-actions`
- [Modal Bottom Sheet](https://composables.com/apps/vela/components/modal-bottom-sheet.md) · Bottom Sheet · `vela/components/modal-bottom-sheet`
- [Model Pill](https://composables.com/apps/vela/components/model-pill.md) · Button · `vela/components/model-pill`
- [Option Group](https://composables.com/apps/vela/components/option-group.md) · List Item · `vela/components/option-group`
- [Option Row](https://composables.com/apps/vela/components/option-row.md) · List Item · `vela/components/option-row`
- [Option Toggle](https://composables.com/apps/vela/components/option-toggle.md) · Switch · `vela/components/option-toggle`
- [Page](https://composables.com/apps/vela/components/page.md) · Scaffold · `vela/components/page`
- [Plan Card](https://composables.com/apps/vela/components/plan-card.md) · Card · `vela/components/plan-card`
- [Screen Scaffold](https://composables.com/apps/vela/components/screen-scaffold.md) · Scaffold · `vela/components/screen-scaffold`
- [Scroll To Latest Button](https://composables.com/apps/vela/components/scroll-to-latest-button.md) · Button · `vela/components/scroll-to-latest-button`
- [Search Field](https://composables.com/apps/vela/components/search-field.md) · Text Field · `vela/components/search-field`
- [Section](https://composables.com/apps/vela/components/section.md) · List Item · `vela/components/section`
- [Side Drawer](https://composables.com/apps/vela/components/side-drawer.md) · Drawer · `vela/components/side-drawer`
- [Suggestion Card](https://composables.com/apps/vela/components/suggestion-card.md) · Card · `vela/components/suggestion-card`
- [Text](https://composables.com/apps/vela/components/text.md) · Text · `vela/components/text`
- [Text Field](https://composables.com/apps/vela/components/text-field.md) · Text Field · `vela/components/text-field`
- [Thinking Indicator](https://composables.com/apps/vela/components/thinking-indicator.md) · Progress Indicator · `vela/components/thinking-indicator`
- [Toast](https://composables.com/apps/vela/components/toast.md) · Toast · `vela/components/toast`
- [Tool Chip](https://composables.com/apps/vela/components/tool-chip.md) · Chip · `vela/components/tool-chip`
- [User Message](https://composables.com/apps/vela/components/user-message.md) · Chat Bubble · `vela/components/user-message`
- [Voice Orb](https://composables.com/apps/vela/components/voice-orb.md) · Audio Visualizer · `vela/components/voice-orb`