For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A grid of 12 brand logo tiles with one round pick, search focused on open and a full width Add app button
When to use
- New record forms over the current page: a project, a quick task or entry, or a finance account
- Access flows: email invites with a role, an app picker and the consent step before a sync
- Pickers and account tasks: a time span, a starter template, settings, a checklist, cancellation or help
When not to use
- The consent step for one chosen provider, with permissions and a sync scope: use the OAuth Consent block
- Integrations listed as page rows with a status badge and a Configure or Install button: use the Connected Apps block
- A plain modal shell you fill with your own title, body and buttons: use the Dialog component
- A data entry layout that sits in the page itself rather than over it: use the Form blocks
- A one question confirm, such as deleting a record, with nothing to fill in: use the Alert Dialog component
Agent notes
- Add app only calls
setOpen; connect the app inselectedAppIdfrom that handler - The
Kbdshortcut hint in the search field is bound to no key; search takes focus on open throughinitialFocus - Replace
CONNECT_APP_RECORDSand the copy inCONNECT_APP_SURFACEin data.tsx with your integrations - Each root renders its own launch
Buttonand startsopenas true inuseState; swap in your trigger and start it closed - Primary actions only close through
setOpen, fire a sonnertoastor have no handler; wire your submit and API call there - Each page.tsx centers the root in a
min-h-svhmain with ansr-onlyh1; mount only the root component inside your page
https://web.dev.reui.io/blocks/application/dialog/dialog-6.mdget_block("dialog-6")npx shadcn@latest add @reui/dialog-6Shadcn Components in the Connect App Picker Block
Dependencies
- cn
Shadcn Connect App Picker Block
App connection dialog with searchable integration grid and single-select checkbox cards. Part of the ReUI Shadcn Application Dialog blocks collection.
Modal to connect a workspace app: search-filtered grid of brand-logo cards with round single-select Checkbox and a footer add button disabled until a pick. Uses shadcn Dialog, InputGroup, Kbd, Item, Empty. Integrations picker, marketplace.
It is composed from Button, Checkbox, Dialog, Empty, Input Group, Item, Kbd, Scroll Area, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Connect App Picker Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Application Dialog blocks to assemble a full screen instead of a single section.
All Shadcn Application Dialog Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Duration Picker Duration picker dialog with start and end time selects plus quick preset toggles
- Bulk Email Invite Workspace invite dialog with multi-email input and role select dropdown
- Cancel Plan Survey Plan cancellation dialog with multi-select reason checkboxes, feedback textarea, and warning banner
- Launch Checklist Workspace launch checklist dialog with accordion sections and inline-editable fields
- Template Library Wide template library dialog with category rail, live search, and selectable template cards
- Support Hub Help and support hub dialog with self-serve routes plus advisor and direct-desk escalation cards
- Per-Person Invite Multi-row collaborator invite dialog with per-row email field and role select
- Project With Cover Create project dialog with cover image upload and status, priority, assignee, and label comboboxes
- Account Settings Modal Tabbed account settings dialog with sidebar rail for profile, workspace, team and billing
- Finance Account Setup Two-pane finance account creation dialog with live account card preview
- Quick Create Entry Tabbed create-entry dialog with status, assignee, due date, priority and label comboboxes
- Project Templates Full-screen create project dialog with template prefill and multi-select labels
- OAuth Consent OAuth connection consent dialog with provider logo rail and radio sync-scope picker
Related Shadcn Application Block Categories
- App Shell (35) App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps.
- Auth (20) Login, register, forgot password, and two-factor authentication page layouts.
- Card (43) Card components for content display, data summaries, and interactive elements.
- Dashboard (8) Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.
- Empty State (14) Empty state screens and no-data placeholders with recovery actions, onboarding prompts, and contextual guidance.
- Event Calendar (6) Event calendar blocks with month, week and day views, drag-and-drop scheduling, and inline editing.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Connect App Picker block?
Use it for a grid of 12 brand logo tiles with one round pick, search focused on open and a full width Add app button.
The Dialog category fits:
- New record forms over the current page: a project, a quick task or entry, or a finance account
- Access flows: email invites with a role, an app picker and the consent step before a sync
- Pickers and account tasks: a time span, a starter template, settings, a checklist, cancellation or help
For the consent step for one chosen provider, with permissions and a sync scope, use the OAuth Consent block. For integrations listed as page rows with a status badge and a Configure or Install button, use the Connected Apps block. For a plain modal shell you fill with your own title, body and buttons, use the Dialog component. For a data entry layout that sits in the page itself rather than over it, use the Form blocks. For a one question confirm, such as deleting a record, with nothing to fill in, use the Alert Dialog component.
What is the Connect App Picker block built with?
Can I restyle the Connect App Picker block?
How should I use Shadcn dialog blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.