Cards
Where to Use Add-ons & Integrations in React Apps
Add-ons & Integrations is a filterable grid of integrations and premium add-ons with connect, upgrade, and status badges. Platform teams ship it when the integrations page must sell expansion, not just list OAuth logos.
Where teams use Add-ons & Integrations
Use case 1
SaaS integrations marketplace
Filter by category, show connected versus available, and route Connect into OAuth. Upgrade badges monetize premium connectors beside free ones.
Use case 2
Agent tool store
AI products expose tools and MCP-style add-ons with the same grid. Status badges communicate installed, needs auth, or plan-gated states.
Use case 3
Billing add-on catalog
Finance settings list paid modules with upgrade CTAs and active badges. Filters separate productivity packs from compliance add-ons.
Use case 4
Partner ecosystem directory
ISV partner pages reuse the grid for certified apps. Connect deep-links into partner install flows while badges show verification level.
Who it is for
Platform and partnerships engineers shipping integration and add-on discovery UI.
Try Add-ons & Integrations on AkmanOS
Filter and inspect status badges in the live preview, then copy markdown into your coding tool to hook Add-ons & Integrations to your catalog API.
Preview /preview/addons-integrationsMore in Cards
- Agent Limits CardContext window breakdown with segmented usage bar, expandable tool groups, and plan limit meters. Explore real product surfaces for the Agent Limits Card component — then open the live AkmanOS preview and copy production-ready source.
- AI Chat HeroCream grain landing hero with Acme nav, launch badge, Pro chat shell, model picker, and partner row. Explore real product surfaces for the AI Chat Hero component — then open the live AkmanOS preview and copy production-ready source.
- Bento CardCycling 2×2 bento carousel — four 1:1 tiles per layout, opposite row slide directions. Explore real product surfaces for the Bento Card component — then open the live AkmanOS preview and copy production-ready source.
- Capacity Allocation CardLabor capacity card with contribution-style segment bar, week/month/year range, queued orders, and member stack. Explore real product surfaces for the Capacity Allocation Card component — then open the live AkmanOS preview and copy production-ready source.