Blog · 64 guides for 64 production-ready UI components
Where to use each component
Practical product surfaces for every AkmanOS block — then jump to the live preview and copy production-ready markdown into your IDE.
Charts
- Active Users HeatmapActive users by hour and calendar day—live now online, orange activity matrix, 7/14/30-day ranges, and single-day drill-down. Explore real product surfaces for the Active Users Heatmap component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-active-users-heatmap
- Bar ChartGrouped session bars by channel — organic, paid, and referral — with date presets, live signals, hover drill-down, and growth badge. Explore real product surfaces for the Bar Chart component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-bar-chart
- ContributionsGitHub-style activity grid — calendar year or last 7 days, level legend, range select, and hover tooltips. Explore real product surfaces for the Contributions component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-contributions-chart
- Funnel ChartHorizontal sign-up funnel — tapered segments with glow edges, conversion badges, growth metric, and stage legend. Explore real product surfaces for the Funnel Chart component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-funnel-chart
- Revenue ChartStacked subscription, one-time, and refunds with average revenue line and currency formatting. Explore real product surfaces for the Revenue Chart component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-revenue-chart
- Visitor Insights ChartStacked visitor area chart with live signals and channel actions. Explore real product surfaces for the Visitor Insights Chart component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-visitor-insights-chart
Cards
- Add-ons & IntegrationsFilterable grid of integrations and premium add-ons with connect, upgrade, and status badges. Explore real product surfaces for the Add-ons & Integrations component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-addons-integrations
- 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./blog/where-to-use-agent-limits-card
- 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./blog/where-to-use-ai-chat-hero
- 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./blog/where-to-use-bento-card
- 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./blog/where-to-use-capacity-allocation-card
- CitationsTypewriter insight with inline citation badges and a collapsible Sources list with favicons. Explore real product surfaces for the Citations component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-citations
- Customer Stories CarouselHorizontal snap carousel with drag inertia, wheel scroll, story cards with tags, and prev/next navigation. Explore real product surfaces for the Customer Stories Carousel component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-customer-stories-carousel
- Forgot Password CardPassword reset request with email field, success state, and back to sign-in link. Explore real product surfaces for the Forgot Password Card component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-forgot-password-card
- GaugeSemi-circular bar gauge with staggered fill animation, animated percent, and performance label. Explore real product surfaces for the Gauge component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-gauge
- Hero SectionLinear-style landing hero — centered headline, glow backdrop, and floating product mock. Explore real product surfaces for the Hero Section component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-hero-section
- Login CardSign-in card with email and password, remember me, social providers, and create-account footer. Explore real product surfaces for the Login Card component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-login-card
- Notion Link PreviewInline link mention with a Notion-style hover tooltip and site preview card. Explore real product surfaces for the Notion Link Preview component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-notion-link-preview
- Pinned Item ListTwo-column pin list with layout motion, pin toggles, and pinned vs all sections. Explore real product surfaces for the Pinned Item List component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-pinned-item-list
- Pricing CardUpgrade card with monthly/yearly toggle, feature list, and liquid metal border. Explore real product surfaces for the Pricing Card component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-pricing-card
- Rich Text EditorTiptap editor with toolbar, bubble menu, headings, lists, links, code blocks, and JSON-first state. Explore real product surfaces for the Rich Text Editor component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-rich-text-editor
- Service CardDark and light product cards with GLB wells, segment pills, and share actions. Explore real product surfaces for the Service Card component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-service-card
- Sign Up CardRegistration card with name, email, password, social sign-up, and sign-in footer. Explore real product surfaces for the Sign Up Card component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-sign-up-card
- Starter BoardOnboarding carousel with autoplay progress, imagery, and CTA. Explore real product surfaces for the Starter Board component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-starter-board
- Statistic CardsFour KPI tiles with icons, animated values, and positive, negative, or neutral growth badges. Explore real product surfaces for the Statistic Cards component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-statistic-cards
- StreakActivity streak card with flame counter, weekly day dots, best streak, and this-week progress. Explore real product surfaces for the Streak component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-streak
- Testimonial CardDark quote card with portrait, opening quote mark, and attribution line. Explore real product surfaces for the Testimonial Card component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-testimonial-card
- Todo ListCollapsible agent task list with live progress, status icons, and replayable demo. Explore real product surfaces for the Todo List component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-todo-list
Motion
- AI Chat AgentFull chat agent UI with Orbit avatars, iOS message bubbles, citation typing, model picker, voice input, uploads, and deep think. Explore real product surfaces for the AI Chat Agent component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-ai-chat-agent
- Animated TextCharacter-by-character reveal with blur and spring motion, optional loop. Explore real product surfaces for the Animated Text component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-animated-text
- Availability SchedulerWeekly hours editor — day toggles, spring time ranges, scrollable picks, and copy across days. Explore real product surfaces for the Availability Scheduler component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-availability-scheduler
- Bounce SidebarVertical nav with a bouncing indicator that arcs to the active item. Explore real product surfaces for the Bounce Sidebar component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-bounce-sidebar
- Bouncy AccordionSingle-open accordion with weighted springs and connected open groups. Explore real product surfaces for the Bouncy Accordion component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-bouncy-accordion
- Command Palette⌘K / Ctrl+K universal menu with category chips, recent results, keyboard shortcuts, and row actions. Explore real product surfaces for the Command Palette component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-command-palette
- Credit CardPremium metal card — fluid chrome face, PAN scramble, EMV chip, and balance odometer. Explore real product surfaces for the Credit Card component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-credit-card
- Cylinder CarouselItems ride the inside or outside of a cylinder — drag, scroll, flick, and arrow keys. Explore real product surfaces for the Cylinder Carousel component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-cylinder-carousel
- Dia TextGradient sweep text reveal with optional repeat and rotating phrases. Explore real product surfaces for the Dia Text component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-dia-text
- Dot Matrix Loaders90 CSS-driven dot matrix loaders — square, circular, triangle, hex, and 3×3 families. Hover a card to copy that loader’s markdown (includes the selected color). Explore real product surfaces for the Dot Matrix Loaders component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-dot-matrix-loaders
- Dynamic Island PaymentPill CTA that morphs through idle, processing, and success states. Explore real product surfaces for the Dynamic Island Payment component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-dynamic-island-payment
- Image CarouselProduct gallery with main stage, arrow controls, dot pagination, and thumbnail rail. Explore real product surfaces for the Image Carousel component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-image-carousel
- iOS Push NotificationsStacked iOS-style banners with spring entry, depth stack, swipe-up dismiss, and automatic demo loop. Explore real product surfaces for the iOS Push Notifications component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-ios-push-notifications
- Morphing TabsLiquid SVG join tab rail with drag-to-reorder physics and workspace rooms. Explore real product surfaces for the Morphing Tabs component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-morphing-tabs
- Notification DropdownAnimated bell menu with unread badge, All/Unread filters, staggered rows, and mark-all-read. Explore real product surfaces for the Notification Dropdown component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-notification-dropdown
- OrbitSiri-like conic gradient orb with size variants and Ask AI chip. Explore real product surfaces for the Orbit component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-orbit
- OTP InputAnimated one-time code field with spring digits, sliding focus, caret blink, and error shake. Explore real product surfaces for the OTP Input component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-otp-input
- Predictive Arc CanvasCanvas 2D predictive arc field with halftone void, signal dots, and theme-aware lime accent. Explore real product surfaces for the Predictive Arc Canvas component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-predictive-arc-canvas
- Preview RailTick rail with hover preview cards — vertical and horizontal section navigation. Explore real product surfaces for the Preview Rail component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-preview-rail
- QR Code ArrivalCanvas QR that arrives via beam streaks or dust particles — hover Beam or Dust labels to copy that variant’s markdown. Explore real product surfaces for the QR Code Arrival component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-qr-code-arrival
- Range SliderSpring-smoothed slider with tick marks and bouncy thumb feedback. Explore real product surfaces for the Range Slider component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-range-slider
- Slash Command DropdownTool picker with category tabs, search, keyboard navigation, and score-sorted matches for chat composers. Explore real product surfaces for the Slash Command Dropdown component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-slash-command-dropdown
- Wheel Picker3D drum wheel for dates and lists — drag, flick, wheel, and keyboard with optional tick sound. Explore real product surfaces for the Wheel Picker component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-wheel-picker
Navigation
- App ShellFull app layout with sidebar navigation, mobile drawer, and scrollable main content. Explore real product surfaces for the App Shell component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-app-shell
- Mailbox ShellThree-column mail app — folder rail, searchable thread list, reading pane, and compose overlay. Explore real product surfaces for the Mailbox Shell component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-mailbox-shell
- NavbarCard-style top nav with mega menus, featured panels, and mobile drawer. Explore real product surfaces for the Navbar component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-navbar
- Navbar FloatingGlass pill navbar with centered mega-menu rail, lime CTA, and blur shell. Explore real product surfaces for the Navbar Floating component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-navbar-floating
- SidebarNavigation sidebar with logo, workspace switcher, expandable pages, and profile menu. Explore real product surfaces for the Sidebar component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-sidebar
Avatars
- Liquid Metal AvatarPaper LiquidMetal ring avatar with sizes, image, and fallback. Explore real product surfaces for the Liquid Metal Avatar component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-liquid-metal-avatar
- Liquid Metal Profile ButtonProfile chip with liquid metal frame and avatar — preview mode skips navigation. Explore real product surfaces for the Liquid Metal Profile Button component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-liquid-metal-profile-button
- Profile DropdownAccount menu with liquid metal avatar, workspace actions, and sign out. Explore real product surfaces for the Profile Dropdown component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-profile-dropdown
- Switch WorkspaceWorkspace switcher with avatar, title, animated dropdown, and add space. Explore real product surfaces for the Switch Workspace component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-switch-workspace
Tables
- Product List TableProduct catalog with SKU, stock, row actions, multi-select, and bulk archive, activate, or delete. Explore real product surfaces for the Product List Table component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-product-list-table
- System Status PageStatuspage-style uptime bars, component health, and incident history. Explore real product surfaces for the System Status Page component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-system-status-page
- Traffic ResourcesLive session table with now online, CSV export, sorting, pagination, empty and error states. Explore real product surfaces for the Traffic Resources component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-traffic-resources
- User List TableUser directory with avatar, membership, row actions, multi-select, and bulk suspend, activate, or delete. Explore real product surfaces for the User List Table component — then open the live AkmanOS preview and copy production-ready source./blog/where-to-use-user-list-table