# Patterns

19 patterns for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.

Source: https://ui.suiss.app/docs/patterns

- [Action Bar](https://ui.suiss.app/docs/patterns/action-bar): A row of menus that renders as a menubar on desktop and a single More actions sheet on mobile.
- [Action Menu](https://ui.suiss.app/docs/patterns/action-menu): A list of actions that opens as a dropdown menu on desktop and an action sheet on mobile.
- [App Shell](https://ui.suiss.app/docs/patterns/app-shell): An application frame with a collapsible sidebar on desktop and a floating tab bar on mobile.
- [Command Palette](https://ui.suiss.app/docs/patterns/command-palette): A searchable command menu that opens in a dialog on desktop and a drawer on mobile.
- [Confirm](https://ui.suiss.app/docs/patterns/confirm): A confirmation prompt that opens as an alert dialog on desktop and an action sheet on mobile.
- [Context Actions](https://ui.suiss.app/docs/patterns/context-actions): Actions for an element that open as a context menu on right click, or an action sheet on long press on mobile.
- [Date Picker](https://ui.suiss.app/docs/patterns/date-picker): A date field that opens a calendar popover on desktop and wheel pickers in a drawer on mobile.
- [Flyout](https://ui.suiss.app/docs/patterns/flyout): A non-modal panel anchored to a trigger on desktop that becomes a bottom drawer on mobile.
- [Modal](https://ui.suiss.app/docs/patterns/modal): A modal window that opens as a centered dialog on desktop and a bottom drawer on mobile.
- [Navbar](https://ui.suiss.app/docs/patterns/navbar): A site header that renders a navigation menu on wide screens and a fullscreen menu when space runs out.
- [Paged List](https://ui.suiss.app/docs/patterns/paged-list): A list that pages through items with numbered pagination on desktop and a Load more button on mobile.
- [Panel](https://ui.suiss.app/docs/patterns/panel): A side panel that renders as a Sheet on desktop and a swipeable Drawer on mobile.
- [Picker](https://ui.suiss.app/docs/patterns/picker): A single-choice picker that renders a custom Select on desktop and a native select on mobile.
- [Preview](https://ui.suiss.app/docs/patterns/preview): A link preview that shows a hover card on desktop and a drawer on mobile.
- [Search Picker](https://ui.suiss.app/docs/patterns/search-picker): A searchable single-choice picker that renders a Combobox on desktop and a search drawer on mobile.
- [Segment Picker](https://ui.suiss.app/docs/patterns/segment-picker): A segmented control for one exclusive choice that becomes a native select on mobile.
- [Split View](https://ui.suiss.app/docs/patterns/split-view): A two- or three-column sidebar, list and detail layout that becomes a push navigation stack on mobile.
- [Table List](https://ui.suiss.app/docs/patterns/table-list): Tabular data that renders as a table on desktop and a grouped list on mobile.
- [Trail](https://ui.suiss.app/docs/patterns/trail): A navigation trail that shows breadcrumbs on desktop and a back link with history on mobile.