React UI library · 64 production-ready UI components
UI components & UI blocks
Browse the AkmanOS UI library by category — production-ready React UI components and UI blocks for Next.js and Tailwind v4. Open a card for a live preview, then copy markdown into Claude, Cursor, Grok, ChatGPT, v0, and other AI editors.
Looking for charts, tables, auth cards, navigation shells, or motion UI blocks? Start below, or read where to use each component.
Tables
- Traffic ResourcesLive session table with now online, CSV export, sorting, pagination, empty and error states./preview/traffic-resources
- User List TableUser directory with avatar, membership, row actions, multi-select, and bulk suspend, activate, or delete./preview/user-list-table
- Product List TableProduct catalog with SKU, stock, row actions, multi-select, and bulk archive, activate, or delete./preview/product-list-table
- System Status PageStatuspage-style uptime bars, component health, and incident history./preview/system-status-page
Cards
- Statistic CardsFour KPI tiles with icons, animated values, and positive, negative, or neutral growth badges./preview/statistic-cards
- Rich Text EditorTiptap editor with toolbar, bubble menu, headings, lists, links, code blocks, and JSON-first state./preview/rich-text-editor
- Pinned Item ListTwo-column pin list with layout motion, pin toggles, and pinned vs all sections./preview/pinned-item-list
- Todo ListCollapsible agent task list with live progress, status icons, and replayable demo./preview/todo-list
- StreakActivity streak card with flame counter, weekly day dots, best streak, and this-week progress./preview/streak
- GaugeSemi-circular bar gauge with staggered fill animation, animated percent, and performance label./preview/gauge
- Capacity Allocation CardLabor capacity card with contribution-style segment bar, week/month/year range, queued orders, and member stack./preview/capacity-allocation-card
- Pricing CardUpgrade card with monthly/yearly toggle, feature list, and liquid metal border./preview/pricing-card
- Service CardDark and light product cards with GLB wells, segment pills, and share actions./preview/service-card
- Starter BoardOnboarding carousel with autoplay progress, imagery, and CTA./preview/starter-board
- Add-ons & IntegrationsFilterable grid of integrations and premium add-ons with connect, upgrade, and status badges./preview/addons-integrations
- Agent Limits CardContext window breakdown with segmented usage bar, expandable tool groups, and plan limit meters./preview/agent-limits-card
- Login CardSign-in card with email and password, remember me, social providers, and create-account footer./preview/login-card
- Forgot Password CardPassword reset request with email field, success state, and back to sign-in link./preview/forgot-password-card
- Sign Up CardRegistration card with name, email, password, social sign-up, and sign-in footer./preview/sign-up-card
- Testimonial CardDark quote card with portrait, opening quote mark, and attribution line./preview/testimonial-card
- Customer Stories CarouselHorizontal snap carousel with drag inertia, wheel scroll, story cards with tags, and prev/next navigation./preview/customer-stories-carousel
- Hero SectionLinear-style landing hero — centered headline, glow backdrop, and floating product mock./preview/hero-section
- AI Chat HeroCream grain landing hero with Acme nav, launch badge, Pro chat shell, model picker, and partner row./preview/ai-chat-hero
- Bento CardCycling 2×2 bento carousel — four 1:1 tiles per layout, opposite row slide directions./preview/bento-card
- Notion Link PreviewInline link mention with a Notion-style hover tooltip and site preview card./preview/notion-link-preview
- CitationsTypewriter insight with inline citation badges and a collapsible Sources list with favicons./preview/citations
Motion
- OrbitSiri-like conic gradient orb with size variants and Ask AI chip./preview/orbit
- Animated TextCharacter-by-character reveal with blur and spring motion, optional loop./preview/animated-text
- Dia TextGradient sweep text reveal with optional repeat and rotating phrases./preview/dia-text
- Predictive Arc CanvasCanvas 2D predictive arc field with halftone void, signal dots, and theme-aware lime accent./preview/predictive-arc-canvas
- AI Chat AgentFull chat agent UI with Orbit avatars, iOS message bubbles, citation typing, model picker, voice input, uploads, and deep think./preview/ai-chat-agent
- Slash Command DropdownTool picker with category tabs, search, keyboard navigation, and score-sorted matches for chat composers./preview/slash-command-dropdown
- Notification DropdownAnimated bell menu with unread badge, All/Unread filters, staggered rows, and mark-all-read./preview/notification-dropdown
- Command Palette⌘K / Ctrl+K universal menu with category chips, recent results, keyboard shortcuts, and row actions./preview/command-palette
- Dynamic Island PaymentPill CTA that morphs through idle, processing, and success states./preview/dynamic-island-payment
- iOS Push NotificationsStacked iOS-style banners with spring entry, depth stack, swipe-up dismiss, and automatic demo loop./preview/ios-push-notifications
- Bounce SidebarVertical nav with a bouncing indicator that arcs to the active item./preview/bounce-sidebar
- Bouncy AccordionSingle-open accordion with weighted springs and connected open groups./preview/bouncy-accordion
- Morphing TabsLiquid SVG join tab rail with drag-to-reorder physics and workspace rooms./preview/morphing-tabs
- 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)./preview/dot-matrix-loaders
- QR Code ArrivalCanvas QR that arrives via beam streaks or dust particles — hover Beam or Dust labels to copy that variant’s markdown./preview/qr-code-arrival
- Wheel Picker3D drum wheel for dates and lists — drag, flick, wheel, and keyboard with optional tick sound./preview/wheel-picker
- Cylinder CarouselItems ride the inside or outside of a cylinder — drag, scroll, flick, and arrow keys./preview/cylinder-carousel
- Preview RailTick rail with hover preview cards — vertical and horizontal section navigation./preview/preview-rail
- Range SliderSpring-smoothed slider with tick marks and bouncy thumb feedback./preview/range-slider
- OTP InputAnimated one-time code field with spring digits, sliding focus, caret blink, and error shake./preview/otp-input
- Availability SchedulerWeekly hours editor — day toggles, spring time ranges, scrollable picks, and copy across days./preview/availability-scheduler
- Credit CardPremium metal card — fluid chrome face, PAN scramble, EMV chip, and balance odometer./preview/credit-card
- Image CarouselProduct gallery with main stage, arrow controls, dot pagination, and thumbnail rail./preview/image-carousel
Avatars
- Liquid Metal AvatarPaper LiquidMetal ring avatar with sizes, image, and fallback./preview/liquid-metal-avatar
- Liquid Metal Profile ButtonProfile chip with liquid metal frame and avatar — preview mode skips navigation./preview/liquid-metal-profile-button
- Profile DropdownAccount menu with liquid metal avatar, workspace actions, and sign out./preview/profile-dropdown
- Switch WorkspaceWorkspace switcher with avatar, title, animated dropdown, and add space./preview/switch-workspace
Charts
- Visitor Insights ChartStacked visitor area chart with live signals and channel actions./preview/visitor-insights-chart
- 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./preview/active-users-heatmap
- Revenue ChartStacked subscription, one-time, and refunds with average revenue line and currency formatting./preview/revenue-chart
- Bar ChartGrouped session bars by channel — organic, paid, and referral — with date presets, live signals, hover drill-down, and growth badge./preview/bar-chart
- ContributionsGitHub-style activity grid — calendar year or last 7 days, level legend, range select, and hover tooltips./preview/contributions-chart
- Funnel ChartHorizontal sign-up funnel — tapered segments with glow edges, conversion badges, growth metric, and stage legend./preview/funnel-chart