# Velocity X Components > 1312 recorded Astro + React component versions (103 free/MIT, the rest with lifetime access). The launch price is A$141.90 once (incl. GST), including future updates. Install the CLI from https://aidxn.com/downloads/aidxn-velocityx-cli-0.1.0.tgz. Registry v0.11.3. Velocity X is a component library by Aidxn Design. Components are Tailwind-styled and dependency-light. The free set is public source to copy; paid source delivery and CLI version management are not self-service yet. ## Current access - Free components (MIT): https://github.com/aidenwood/velocity-x-free-components - Copy guide: https://github.com/aidenwood/velocity-x-free-components#copy-into-an-existing-project - Paid library: https://aidxn.com/shop/velocity-x-component-library/ - Docs: https://docs.aidxn.com/docs/getting-started/ ## Library Browse all components: https://ui.aidxn.com/components/ ### Core UI (42 — 11 free) Category page: https://ui.aidxn.com/components/category/core-ui/ - [Accordion / FAQ List](https://ui.aidxn.com/components/accordion-faq/) (react, free/MIT): Expand/collapse FAQ list with measured-height animation, single or multi-open modes, and arrow-key navigation between headers. - [Aurora Glass Footer](https://ui.aidxn.com/components/aurora-glass-footer/) (astro, lifetime licence): AuroraGlassFooter — dark footer with a drifting-blob mesh, a pointer-follow spotlight, and a glass contact/newsletter/social card with a rotating gradient border. - [Aurora Mega Menu Header](https://ui.aidxn.com/components/aurora-mega-menu-header/) (react, lifetime licence): AuroraMegaMenuHeader — one-bar header with a cursor-follow spotlight, an animated gradient hairline, and glass mega-menu panels with a rotating gradient border. - [Avatar + Avatar Group](https://ui.aidxn.com/components/avatar-group/) (astro, free/MIT): Single avatar or an overlapping stack with a plus-N overflow chip, falling back to deterministic initials-over-tint when no image is given. - [Back to Top Button](https://ui.aidxn.com/components/back-to-top/) (react, lifetime licence): Floating button that fades in past a scroll threshold and scrolls to top, instantly under reduced motion. - [Badge / Tag Set](https://ui.aidxn.com/components/badge-tag/) (astro, free/MIT): Single pill component covering solid, soft, and outline badge variants across brand and semantic tones, with an optional removable tag mode. - [Breadcrumbs](https://ui.aidxn.com/components/breadcrumbs/) (astro, free/MIT): Static breadcrumb trail with BreadcrumbList microdata that collapses the middle segments into an ellipsis on long paths. - [Button Set](https://ui.aidxn.com/components/button-set/) (astro, free/MIT): One button primitive covering primary/secondary/ghost/destructive variants, three sizes, a loading spinner state, and an icon-only mode. - [Checkbox Group](https://ui.aidxn.com/components/checkbox-group/) (react, lifetime licence): A labelled multi-choice group built on native checkboxes, with optional descriptions, per-option disabled state, and controlled or local array values. - [Collapsible](https://ui.aidxn.com/components/collapsible/) (react, lifetime licence): A single disclosure panel with controlled or local state, native button keyboard behavior, reduced-motion support, and a Velocity theme transition. - [Cookie / Consent Bar](https://ui.aidxn.com/components/cookie-consent/) (react, lifetime licence): Bottom consent bar with accept-all, reject-all, and an inline expandable preferences checklist, persisted to localStorage. - [Data Table — Sticky Header, Sortable](https://ui.aidxn.com/components/data-table/) (react, lifetime licence): Scrollable data table with a sticky header row and client-side column sorting that cycles ascending, descending, and unsorted. - [Editorial Mega Menu Header](https://ui.aidxn.com/components/editorial-mega-menu-header/) (react, lifetime licence): EditorialMegaMenuHeader — quiet bar, loud panels (Stripe/Figma docs-nav reference). - [Editorial Sitemap Footer](https://ui.aidxn.com/components/editorial-sitemap-footer/) (astro, lifetime licence): EditorialSitemapFooter — dense, confident editorial sitemap (Stripe/Figma footer reference). - [Empty State](https://ui.aidxn.com/components/empty-state/) (astro, free/MIT): Centred placeholder for an empty list, table, or panel with an icon slot, title, description, and action slot. - [Footer — Multi-Column](https://ui.aidxn.com/components/footer-multicolumn/) (astro, lifetime licence): Brand column with description and social icons alongside N link columns, plus a bottom legal bar with copyright and policy links. - [Header Nav — Transparent to Solid](https://ui.aidxn.com/components/header-nav/) (react, lifetime licence): Sticky header that crossfades from transparent to a blurred solid bar after a scroll threshold, with primary links and a CTA. - [Inline Alert — 4 Severities](https://ui.aidxn.com/components/inline-alert/) (astro, free/MIT): Static inline banner covering info, success, warning, and error severities with the correct assertive/polite ARIA role per severity. - [Input Group](https://ui.aidxn.com/components/input-group/) (astro, lifetime licence): Composes a native input, select, or textarea with visible prefix and suffix addons, using Velocity theme tokens and native form semantics. - [Loading Skeleton Set](https://ui.aidxn.com/components/loading-skeleton/) (astro, free/MIT): Shimmer skeleton placeholders for text lines, an avatar row, a card, and a table row, with the shimmer disabled under reduced motion. - [Mega Menu Panel](https://ui.aidxn.com/components/mega-menu/) (react, lifetime licence): Multi-column dropdown panel triggered from a nav item, with link columns plus an optional featured card, closing on outside click or Escape. - [Mobile Menu Drawer](https://ui.aidxn.com/components/mobile-menu-drawer/) (react, lifetime licence): Left-docked full-height nav drawer with focus trap, outside-click close, Escape handling, scroll lock, and focus restoration. - [Motion Reveal](https://ui.aidxn.com/components/motion-reveal/) (astro, lifetime licence): A progressive-enhancement reveal wrapper that animates content as it enters the viewport, using native IntersectionObserver and Velocity motion tokens. - [Motion Stagger](https://ui.aidxn.com/components/motion-stagger/) (astro, lifetime licence): A progressively enhanced staggered reveal for marked child elements, using native IntersectionObserver and Velocity motion tokens. - [Pagination](https://ui.aidxn.com/components/pagination/) (react, free/MIT): Controlled numbered pager with ellipsis compression for large page counts and prev/next controls. - [Popover](https://ui.aidxn.com/components/popover/) (react, lifetime licence): Click-triggered floating panel for rich content that closes on outside click or Escape and restores focus to the trigger. - [Presence](https://ui.aidxn.com/components/presence/) (react, free/MIT): Keeps a React subtree mounted for its CSS exit transition, then unmounts it with reduced-motion support, re-entry cancellation, and inert exiting content. - [Pricing Table — 3-Tier](https://ui.aidxn.com/components/pricing-table/) (astro, lifetime licence): Three-column pricing grid with one visually highlighted plan that scales up and sits on a brand-tinted card. - [Progress Bar & Circular Progress](https://ui.aidxn.com/components/progress-indicators/) (astro, lifetime licence): Linear bar and circular ring progress indicator in one component, each with a determinate and an indeterminate mode. - [Radio Group](https://ui.aidxn.com/components/radio-group/) (react, lifetime licence): A labelled single-choice group built on native radio inputs, with optional descriptions, disabled options and controlled or local state. - [Side Drawer Panel](https://ui.aidxn.com/components/side-drawer-panel/) (react, lifetime licence): The house data-entry surface — right-docked drawer on desktop, three-snap-point draggable bottom sheet on mobile, with focus trap and a dock-minimise control. - [Stepper / Progress Indicator](https://ui.aidxn.com/components/stepper/) (astro, free/MIT): Horizontal multi-step progress indicator with a filling connector line, collapsing to a compact step-count bar on phone. - [Switch](https://ui.aidxn.com/components/switch/) (react, lifetime licence): A single on/off setting backed by a native checkbox, with switch semantics, optional description and controlled or local state. - [Tabs — Underline & Pill](https://ui.aidxn.com/components/tabs/) (react, lifetime licence): Keyboard-accessible tab list with an animated active indicator, switchable between underline and pill visual variants via one prop. - [Text Field](https://ui.aidxn.com/components/text-field/) (react, lifetime licence): A labeled native input with supporting and error text, required and disabled states, and linked accessible descriptions. - [Textarea Field](https://ui.aidxn.com/components/textarea-field/) (react, lifetime licence): A labeled native multiline input with supporting and error text, required and disabled states, and linked accessible descriptions. - [Toast / Notification](https://ui.aidxn.com/components/toast/) (react, lifetime licence): Notification stack with a module-level push/dismiss API, pausable auto-dismiss timer, and swipe-to-dismiss on touch. - [Toggle Button](https://ui.aidxn.com/components/toggle-button/) (react, lifetime licence): A single on/off action with native button keyboard behavior and an accessible pressed state. Use it for toolbar controls such as pin, favourite or preview mode. - [Toolbar Dock Header](https://ui.aidxn.com/components/toolbar-dock-header/) (react, lifetime licence): ToolbarDockHeader — dark, dense, icon-first toolbar header (Figma/Photoshop control-bar aesthetic). - [Toolbar Terminal Footer](https://ui.aidxn.com/components/toolbar-terminal-footer/) (astro, lifetime licence): ToolbarTerminalFooter — Figma/Photoshop control-bar aesthetic translated into a footer: a slim top TOOLBAR strip (logo + contact chips), the sitemap rendered as bordered PANELS over a faint dot-grid canvas, a terminal-styled newsletter panel, and a slim bottom STATUS BAR strip (legal + a continuous CSS ticker, no GSAP). - [Tooltip](https://ui.aidxn.com/components/tooltip/) (react, lifetime licence): Hover/focus label that computes its own placement and flips side on viewport overflow, with no positioning library. - [Vertical Tabs](https://ui.aidxn.com/components/vertical-tabs/) (react, lifetime licence): Side-stacked tab list with a content pane, for settings-style layouts, with up/down arrow keyboard navigation. ### Heroes & Sections (43 — 0 free) Category page: https://ui.aidxn.com/components/category/heroes-and-sections/ - [About Stats Split](https://ui.aidxn.com/components/about-stats-split/) (astro, lifetime licence): AboutStatsSplit — two-column "about us" split: heading + supporting copy and a 2x2 stat-card grid on one side, a single image on the other. - [Animated Feature Card Grid](https://ui.aidxn.com/components/animated-feature-card-grid/) (react, lifetime licence): AnimatedFeatureCardGrid — three labelled groups of three feature cards. - [Approach Bento Grid](https://ui.aidxn.com/components/approach-bento-grid/) (astro, lifetime licence): ApproachBentoGrid — an asymmetric bento grid of approach/process cards, each with a small generic mockup (a fake browser window, a stacked-layer illustration, or an animated bar chart) built from plain CSS and SVG — no screenshots, no image assets required. - [Benefits Checklist](https://ui.aidxn.com/components/benefits-checklist/) (astro, lifetime licence): Copy column paired with a one or two column checklist of benefits. - [Comparison — Us vs. Them](https://ui.aidxn.com/components/comparison-table-section/) (astro, lifetime licence): Accessible comparison table with a highlighted column and horizontal scroll on mobile. - [CTA — Full-Bleed Gradient Banner](https://ui.aidxn.com/components/cta-banner-gradient/) (astro, lifetime licence): Full-bleed brand-gradient CTA banner, the project's single-use-per-page gradient moment. - [CTA — Centred](https://ui.aidxn.com/components/cta-centred/) (astro, lifetime licence): Centred call-to-action card with one or two buttons. - [CTA — Closing with Background Pattern](https://ui.aidxn.com/components/cta-closing-pattern/) (astro, lifetime licence): Final-page CTA with a subtle CSS dot-grid pattern masked behind the copy. - [CTA — Newsletter Section](https://ui.aidxn.com/components/cta-newsletter-section/) (astro, lifetime licence): Bordered two-column section pairing a pitch with an inline newsletter signup form. - [CTA — Split with Image](https://ui.aidxn.com/components/cta-split-image/) (astro, lifetime licence): Rounded CTA card with copy on one side and an image or placeholder on the other. - [Error / 404 State Section](https://ui.aidxn.com/components/error-state-section/) (astro, lifetime licence): Centred full-page error state with a large code, message and primary/secondary actions. - [Feature — Icon Grid (3-up)](https://ui.aidxn.com/components/feature-icon-grid/) (astro, lifetime licence): Responsive 3-up icon, title and description feature grid with a BYO-SVG icon slot. - [Feature — Alternating Rows](https://ui.aidxn.com/components/feature-rows-alternating/) (astro, lifetime licence): Stack of copy/image feature rows that alternate sides per row. - [Feature — Single Large Feature](https://ui.aidxn.com/components/feature-single-large/) (astro, lifetime licence): Flagship single-feature section with heading, bullet list, CTA and a large visual. - [Gallery Grid Triptych](https://ui.aidxn.com/components/gallery-grid-triptych/) (astro, lifetime licence): GalleryGridTriptych — a full-bleed three-image showcase row, no headline or copy. - [Hero Animated Route Map](https://ui.aidxn.com/components/hero-animated-route-map/) (react, lifetime licence): HeroAnimatedRouteMap — hero with a perspective SVG street-grid background that progressively draws a route between stops, each stop pinging a one-line "message" tooltip. - [Hero — Announcement Pill](https://ui.aidxn.com/components/hero-announcement-pill/) (astro, lifetime licence): Centred hero with a linked pill announcement above the headline. - [Hero — Background Image + Scrim](https://ui.aidxn.com/components/hero-background-scrim/) (astro, lifetime licence): Full-bleed background image hero with a solid WCAG-AA scrim behind the copy. - [Hero Blob Gradient](https://ui.aidxn.com/components/hero-blob-gradient/) (astro, lifetime licence): HeroBlobGradient — centred hero over four soft, slowly morphing gradient blobs (pure SVG + CSS keyframes, no canvas/WebGL). - [Hero — Centred](https://ui.aidxn.com/components/hero-centred/) (astro, lifetime licence): Centred eyebrow/headline/sub hero with two optional CTAs. - [Hero — App Device Frame](https://ui.aidxn.com/components/hero-device-frame/) (astro, lifetime licence): Product hero with a CSS-only browser or phone frame wrapping the screenshot. - [Hero — Email Capture](https://ui.aidxn.com/components/hero-email-capture/) (astro, lifetime licence): Centred hero with an inline plain-HTML email capture form wired to any form action. - [Hero — Floating UI Screenshot](https://ui.aidxn.com/components/hero-floating-screenshot/) (astro, lifetime licence): Centred hero with a large product screenshot card floating below the fold with a soft glow. - [Hero Fullscreen Glass Card](https://ui.aidxn.com/components/hero-fullscreen-glass-card/) (astro, lifetime licence): HeroFullscreenGlassCard — a single full-bleed background image with a centred frosted-glass content card (eyebrow/title/description/CTA). - [Hero — Gradient Mesh Background](https://ui.aidxn.com/components/hero-gradient-mesh/) (astro, lifetime licence): Centred hero with a pure-CSS radial gradient mesh backdrop, no shader runtime. - [Hero Integration Network](https://ui.aidxn.com/components/hero-integration-network/) (react, lifetime licence): HeroIntegrationNetwork — hero with a perspective circuit-board grid behind the copy: a spinning hub in the centre wires up to N integration icons, each with a stroke-dash line that draws in on reveal and a brief pulse. - [Hero Live Dashboard Preview](https://ui.aidxn.com/components/hero-live-dashboard-preview/) (react, lifetime licence): HeroLiveDashboardPreview — two-column product hero: copy + bullet list on the left, an animated "live dashboard" mockup on the right (a schedule pane + a zone map with a travelling marker + two connector cards that suggest the product syncing with outside tools). - [Hero — Minimal Text Only](https://ui.aidxn.com/components/hero-minimal-text/) (astro, lifetime licence): Undecorated headline/sub/CTA hero for editorial or brand pages. - [Hero — Split with Image](https://ui.aidxn.com/components/hero-split-image/) (astro, lifetime licence): Copy-left image-right hero with a gradient placeholder fallback when no image is supplied. - [Hero — Trust Logos Below](https://ui.aidxn.com/components/hero-trust-logos/) (astro, lifetime licence): Centred hero with a grayscale-to-colour partner logo strip beneath the fold. - [Hero — Video Background](https://ui.aidxn.com/components/hero-video-background/) (astro, lifetime licence): Full-bleed autoplaying muted video hero with a solid scrim and reduced-motion fallback to the poster frame. - [Hero Wireframe Globe](https://ui.aidxn.com/components/hero-wireframe-globe/) (astro, lifetime licence): HeroWireframeGlobe — centred hero with an endlessly spinning CSS/SVG wireframe sphere above the headline. - [How It Works — Steps](https://ui.aidxn.com/components/how-it-works-steps/) (astro, lifetime licence): Numbered step sequence with a connecting line on desktop, stacked on mobile. - [Integrations — Logo Grid](https://ui.aidxn.com/components/integrations-logo-grid/) (astro, lifetime licence): Grid of linkable integration/partner logo cards. - [Media Grid Intro Section](https://ui.aidxn.com/components/media-grid-intro-section/) (astro, lifetime licence): MediaGridIntroSection — short eyebrow/heading/body intro stacked above a 2-3up image grid. - [Process Chip Timeline](https://ui.aidxn.com/components/process-chip-timeline/) (astro, lifetime licence): ProcessChipTimeline — a static, zero-JS vertical timeline for a multi-step process. - [Process Steps Card Grid](https://ui.aidxn.com/components/process-steps-card-grid/) (astro, lifetime licence): ProcessStepsCardGrid — a 4-step process laid out as filled, icon-led cards in a 2-up grid (2x2 on desktop, single column on mobile). - [Process Sticky Scroll](https://ui.aidxn.com/components/process-sticky-scroll/) (react, lifetime licence): ProcessStickyScroll — a sticky left panel that tracks whichever numbered step is currently in view on the scrolling right-hand list. - [Service Link Icon Grid](https://ui.aidxn.com/components/service-link-icon-grid/) (astro, lifetime licence): ServiceLinkIconGrid — a row of bordered, clickable icon+label cards that link out to service or feature pages (think a site's top-level "what we do" nav, not a features explainer). - [Service Platform Showcase](https://ui.aidxn.com/components/service-platform-showcase/) (astro, lifetime licence): ServicePlatformShowcase — a bento grid of service/offering tiles, a dark "flexibility" panel, and a row of integration initials. - [Stats Band](https://ui.aidxn.com/components/stats-band/) (astro, lifetime licence): Horizontal band of big numbers with labels, with a reversed dark-panel variant. - [Tool Stack Marquee](https://ui.aidxn.com/components/tool-stack-marquee/) (astro, lifetime licence): ToolStackMarquee — a full-bleed, multi-row CSS marquee of tools/technologies with a heading overlaid on top, scrimmed into the section background. - [Value Prop Cards Offset](https://ui.aidxn.com/components/value-prop-cards-offset/) (astro, lifetime licence): ValuePropCardsOffset — numbered, icon-free value-proposition cards in a two-column grid, with the second column offset downward for a light masonry feel. ### Forms (34 — 5 free) Category page: https://ui.aidxn.com/components/category/forms/ - [Address Autocomplete Field Shell](https://ui.aidxn.com/components/address-autocomplete-field/) (react, lifetime licence): Debounced address-search UI shell with keyboard-navigable suggestions dropdown; geocoding is supplied by the host via props. - [Checkbox Card Group](https://ui.aidxn.com/components/checkbox-card-group/) (astro, lifetime licence): Multi-select add-on cards with the radio-card visual language but native checkbox semantics, zero JS. - [Consent Opt-In Group](https://ui.aidxn.com/components/consent-opt-in-group/) (astro, lifetime licence): An in-form consent fieldset: a required legal-acceptance checkbox with an error state, plus granular per-channel marketing opt-ins, each its own named checkbox so consent is recorded separately. - [Contact Form — Simple](https://ui.aidxn.com/components/contact-form-simple/) (astro, free/MIT): Single-column name/email/subject/message contact form with a honeypot field, Netlify Forms opt-in, and a presentational action prop. - [Contact Form — Two-Column with Map Slot](https://ui.aidxn.com/components/contact-form-split/) (astro, lifetime licence): Two-column contact layout with a named aside slot for a map or office photo, stacking to one column on mobile. - [Date/Time Picker Field](https://ui.aidxn.com/components/datetime-picker-field/) (react, lifetime licence): Styled native date and time input pair with a combined human-readable preview and a clear action. - [Email Disclosure Field](https://ui.aidxn.com/components/email-disclosure-field/) (react, lifetime licence): A Continue with Email button that morphs in place into an email field on click — the progressive-disclosure auth pattern, reduced-motion safe. - [Field Error Summary](https://ui.aidxn.com/components/field-error-summary/) (react, lifetime licence): The WCAG error-summary pattern for long forms: an assertive live region listing every invalid field as a jump-to link, self-focusing on mount after a failed submit. - [File Upload — Drag and Drop](https://ui.aidxn.com/components/file-upload-dropzone/) (react, lifetime licence): Drag-and-drop file picker with browse fallback, size validation, and a removable selected-files list. - [Filter Chips / Toggle Row](https://ui.aidxn.com/components/filter-chips-row/) (react, lifetime licence): Horizontal row of togglable multi-select filter chips with an active count and clear-all action. - [Filter Sidebar Panel](https://ui.aidxn.com/components/filter-sidebar-panel/) (astro, lifetime licence): Vertical catalog filter stack with collapsible checkbox groups and a price range, built on native details elements. - [Form Success/Error State Panel](https://ui.aidxn.com/components/form-success-error-panel/) (astro, lifetime licence): Post-submit status panel with success, error, and pending states for the host to swap in after a submission resolves. - [Inline Validation States Showcase](https://ui.aidxn.com/components/inline-validation-showcase/) (react, lifetime licence): Reference demo of idle/valid/invalid inline field validation with live icons and messaging on blur. - [Login Form](https://ui.aidxn.com/components/login-form/) (astro, free/MIT): Email/password sign-in card with a show/hide password toggle driven by a scoped inline script. - [Multi-Step Wizard Form](https://ui.aidxn.com/components/multi-step-wizard-form/) (react, lifetime licence): Three-step form with a segmented progress bar, per-step validation, and back/next navigation before calling onSubmit. - [Newsletter — Card](https://ui.aidxn.com/components/newsletter-card/) (astro, free/MIT): Standalone card-format newsletter opt-in with an icon badge and privacy microcopy. - [Newsletter — Inline Bar](https://ui.aidxn.com/components/newsletter-inline/) (astro, free/MIT): A slim single-row email capture bar for footers or in-content placements. - [OTP / Code Input](https://ui.aidxn.com/components/otp-code-input/) (react, lifetime licence): Segmented one-time-code field with auto-advance, backspace-to-previous, and full-code paste support. - [Password Reset Form](https://ui.aidxn.com/components/password-reset-form/) (astro, lifetime licence): Single-field reset-link request card with a built-in confirmation state toggled via a sent prop. - [Phone Number Field](https://ui.aidxn.com/components/phone-number-field/) (react, lifetime licence): A combined country-dial-code select and national-number input with digit-only sanitisation, emitting one combined E.164-shaped value. - [Quote/Estimate Calculator Form](https://ui.aidxn.com/components/quote-calculator-form/) (react, lifetime licence): Project-type selector, scope slider, and add-on checkboxes that compute a live price range before submitting. - [Radio Card Group](https://ui.aidxn.com/components/radio-card-group/) (astro, lifetime licence): Large selectable radio-as-card tiles for plan or shipping-method pickers, built on native radios with zero JS. - [Range / Budget Slider Field](https://ui.aidxn.com/components/range-slider-field/) (astro, lifetime licence): Single budget or quantity slider with a live value readout driven by a small scoped inline script. - [Rating Input](https://ui.aidxn.com/components/rating-input/) (react, lifetime licence): Accessible star-rating field built on labeled native radio inputs with hover preview. - [Search Input with Suggestions Dropdown](https://ui.aidxn.com/components/search-input-suggestions/) (react, lifetime licence): ARIA combobox search field with keyboard-navigable, client-filtered suggestions dropdown. - [Select / Combobox](https://ui.aidxn.com/components/select-combobox/) (react, lifetime licence): Custom single-select ARIA listbox with type-to-filter and full keyboard support. - [Signup Form](https://ui.aidxn.com/components/signup-form/) (astro, lifetime licence): Name/email/password sign-up card with an inline password-strength meter and terms-acceptance checkbox. - [Social Auth Buttons](https://ui.aidxn.com/components/social-auth-buttons/) (astro, lifetime licence): A composable OAuth Continue with row for Google, GitHub, Apple and Facebook with inline icon marks and no icon-library dependency. - [Date Range Field](https://ui.aidxn.com/components/standard-date-range-field/) (react, lifetime licence): Two native date inputs with linked bounds that preserve an ordered start and end date. - [Native Select Field](https://ui.aidxn.com/components/standard-native-select-field/) (astro, lifetime licence): Accessible grouped native select with a label, description, invalid state, and mobile device picker. - [Tag Input](https://ui.aidxn.com/components/standard-tag-input/) (react, lifetime licence): Keyboard-friendly tag entry with duplicate prevention, paste support, a limit, removable tokens, and form values. - [Transfer List](https://ui.aidxn.com/components/standard-transfer-list/) (react, lifetime licence): Move chosen values between labeled checkbox lists with explicit buttons and native form submission. - [Textarea with Character Counter](https://ui.aidxn.com/components/textarea-character-counter/) (astro, lifetime licence): Textarea with a live N/max counter that shifts to warning and error colour near the limit. - [Toggle Switch Row](https://ui.aidxn.com/components/toggle-switch-row/) (astro, free/MIT): Stacked list of labeled on/off switches for notification preferences, built on native checkboxes with zero JS. ### Carousels & Tickers (39 — 4 free) Category page: https://ui.aidxn.com/components/category/carousels-and-tickers/ - [Announcement Bar Rotator](https://ui.aidxn.com/components/announcement-bar-rotator/) (astro, lifetime licence): Top-of-page rotating announcement bar with dot indicators and a session-persistent dismiss control, vanilla JS only. - [Auto-Advancing Carousel with Progress Bars](https://ui.aidxn.com/components/auto-carousel-progress/) (react, lifetime licence): Auto-advancing carousel where segmented progress bars double as slide indicators, with pause-on-hover and a play/pause control. - [Before/After Image Slider](https://ui.aidxn.com/components/before-after-slider/) (react, lifetime licence): Drag-handle before/after image comparison slider using pointer events and a keyboard-accessible slider role. - [Card Slider (Snap Scroll)](https://ui.aidxn.com/components/card-slider-snap/) (react, lifetime licence): Horizontal card scroller on native CSS scroll-snap with edge-aware arrow buttons and keyboard navigation. - [Carousel Indicator Variants](https://ui.aidxn.com/components/carousel-indicator-variants/) (react, lifetime licence): One slide engine with three swappable indicator styles — dots, prev/next arrows only, or a numeric counter. - [Category Hover Gallery](https://ui.aidxn.com/components/category-hover-gallery/) (astro, lifetime licence): CategoryHoverGallery — a grid of category cards, each holding a strip of thumbnails that shifts left and zooms slightly on hover/focus. - [Category Pill Scroller](https://ui.aidxn.com/components/category-pill-scroller/) (react, lifetime licence): Horizontally scrollable filter pill row with edge-fade masks, conditional nudge arrows and roving-tabindex keyboard navigation. - [Coverflow 3D Slider](https://ui.aidxn.com/components/coverflow-slider/) (react, lifetime licence): 3D coverflow-style carousel using CSS perspective and rotateY transforms, with a flattened fallback under reduced motion. - [Device Frame Screenshot Carousel](https://ui.aidxn.com/components/device-frame-carousel/) (react, lifetime licence): Screenshot carousel inside a CSS-drawn phone or browser-chrome frame, with crossfade, arrows, dots and swipe. - [Dual-Handle Range Slider](https://ui.aidxn.com/components/dual-range-slider/) (react, lifetime licence): Price/range filter with two independently draggable handles on one track, each a fully keyboard-operable slider role. - [Free Scroll Media Strip](https://ui.aidxn.com/components/free-scroll-media-strip/) (astro, lifetime licence): FreeScrollMediaStrip — horizontal strip of variable-width image cells with native momentum scroll (no forced snapping — this is a free-scroll strip, not a paged carousel) plus pointer-drag-to-scroll on desktop and fade-mask edges. - [Generic Content Carousel](https://ui.aidxn.com/components/generic-content-carousel/) (astro, lifetime licence): Framework-free vanilla-JS one-up carousel for arbitrary slotted content, with arrows, dots, keyboard and swipe. - [Hero Fullscreen Slider](https://ui.aidxn.com/components/hero-fullscreen-slider/) (astro, lifetime licence): HeroFullscreenSlider — N-slide full-viewport hero slider: each slide is a full-bleed background image with a centred frosted-glass content card (eyebrow/title/description/CTA). - [Full-Bleed Hero Slider](https://ui.aidxn.com/components/hero-slider-full-bleed/) (react, lifetime licence): Full-bleed crossfading hero image slider with scrim overlay, headline/CTA content, autoplay, arrows, dots and swipe. - [Image Carousel with Thumbnails](https://ui.aidxn.com/components/image-carousel-thumbnails/) (react, lifetime licence): Large image preview with a clickable, auto-scrolling thumbnail rail, arrow/keyboard navigation and swipe support. - [Infinite Pan Zoom Gallery](https://ui.aidxn.com/components/infinite-pan-zoom-gallery/) (react, lifetime licence): InfinitePanZoomGallery — items scattered across a pannable, zoomable canvas. - [Logo Ticker](https://ui.aidxn.com/components/logo-ticker/) (astro, free/MIT): CSS-only infinite marquee of client/partner logos that loops seamlessly in either direction and pauses on hover or focus. - [Horizontal News Ticker](https://ui.aidxn.com/components/news-ticker-horizontal/) (astro, free/MIT): Breaking-news style ticker with a fixed live tag and a CSS-only infinite-scrolling headline marquee. - [Onboarding Slides Carousel](https://ui.aidxn.com/components/onboarding-slides-carousel/) (react, lifetime licence): A user-paced, never-autoplaying in-app tour: icon, title and body slides with a progress-dot rail, explicit Back/Next/Skip controls and a finishing CTA. - [Podcast Episode Carousel](https://ui.aidxn.com/components/podcast-episode-carousel/) (react, lifetime licence): A scroll-snap row of episode cards with a stable per-episode waveform that animates only on the externally controlled playing card. Presentational — it drops into any existing player store. - [Portfolio Gallery Boxed](https://ui.aidxn.com/components/portfolio-gallery-boxed/) (astro, lifetime licence): PortfolioGalleryBoxed — work/portfolio gallery on native CSS scroll-snap, capped at a max container width, px-stepped cell height across breakpoints. - [Portfolio Gallery Compact](https://ui.aidxn.com/components/portfolio-gallery-compact/) (astro, lifetime licence): PortfolioGalleryCompact — work/portfolio gallery on native CSS scroll-snap, boxed at max-w-7xl, the smallest cell-height ladder of the three gallery variants. - [Portfolio Gallery Full Bleed](https://ui.aidxn.com/components/portfolio-gallery-full-bleed/) (astro, lifetime licence): PortfolioGalleryFullBleed — full-bleed work/portfolio gallery on native CSS scroll-snap, no max-width cap, vh-based cell height. - [Portfolio Grid Gallery](https://ui.aidxn.com/components/portfolio-grid-gallery/) (astro, lifetime licence): PortfolioGridGallery — static project grid: image, category label, title and tag chips per card, with a gentle hover zoom + lift. - [Pricing Plan Slider](https://ui.aidxn.com/components/pricing-plan-slider/) (react, lifetime licence): Pricing cards that render as a full grid on desktop and collapse into a one-card-at-a-time snap-scroll carousel with dots on mobile. - [Quote Crossfade Carousel](https://ui.aidxn.com/components/quote-crossfade-carousel/) (react, lifetime licence): Large-type quote rotator with a pure crossfade transition, autoplay, dots and an explicit pause control. - [Radial Orbit Gallery](https://ui.aidxn.com/components/radial-orbit-gallery/) (react, lifetime licence): RadialOrbitGallery — items arranged in a ring you drag to rotate (pointer events + a small rAF inertia decay, no animation library). - [Scroll-Linked Horizontal Gallery](https://ui.aidxn.com/components/scroll-linked-gallery/) (react, lifetime licence): Pinned section where vertical page scroll drives horizontal image movement, falling back to a plain snap-scroll row under reduced motion. - [Stacked Card Swipe Deck](https://ui.aidxn.com/components/stacked-swipe-deck/) (react, lifetime licence): Tinder-style stacked card deck that tracks pointer drag and flies off past a threshold, with explicit accept/reject buttons as a non-drag path. - [Stat Ticker](https://ui.aidxn.com/components/stat-ticker/) (astro, free/MIT): CSS-only infinite marquee of stat tiles with a count-up animation triggered on scroll-into-view. - [Step Slider](https://ui.aidxn.com/components/step-slider/) (react, lifetime licence): Discrete step slider snapped to labeled ticks (plan tiers, quantity breaks), draggable with full keyboard support. - [Synced Compare Carousel](https://ui.aidxn.com/components/synced-compare-carousel/) (react, lifetime licence): Two side-by-side scroll-snap tracks that move in lockstep, so dragging either one snaps the other to match. A mobile-friendly comparison carousel rather than a single drag-reveal slider. - [Team Member Flip Carousel](https://ui.aidxn.com/components/team-member-flip-carousel/) (react, lifetime licence): Scroll-snap team cards that flip in 3D on click, tap or Enter to reveal a bio, one open at a time — a click-first reveal that works on touch, unlike hover-only team cards. - [Testimonial Carousel (Peek)](https://ui.aidxn.com/components/testimonial-carousel-peek/) (react, lifetime licence): Multi-card testimonial carousel on native CSS scroll-snap showing a peek of the next card, with synced dots and arrow controls. - [Testimonial Carousel (Single)](https://ui.aidxn.com/components/testimonial-carousel-single/) (react, lifetime licence): One-up crossfading testimonial carousel with arrows, dots, autoplay with pause-on-hover, swipe and keyboard navigation. - [Testimonial Marquee Wall](https://ui.aidxn.com/components/testimonial-marquee-wall/) (astro, lifetime licence): A continuously scrolling wall of testimonial cards across two rows moving in opposite directions, each pausing independently on hover or focus. - [Text Marquee](https://ui.aidxn.com/components/text-marquee/) (astro, free/MIT): CSS-only scrolling text strip for announcements, joining phrases with a separator glyph and looping infinitely. - [Timeline Slider](https://ui.aidxn.com/components/timeline-slider/) (react, lifetime licence): Horizontal year-marker timeline with a filling progress line, clickable markers and a content panel for the active event. - [Vertical Updates Ticker](https://ui.aidxn.com/components/vertical-ticker/) (react, lifetime licence): Vertical auto-advancing news/updates ticker with manual step controls and an explicit pause toggle. ### Bento & Layout (31 — 15 free) Category page: https://ui.aidxn.com/components/category/bento-and-layout/ - [Alternating Media Rows](https://ui.aidxn.com/components/alternating-media-rows/) (astro, lifetime licence): Repeating zig-zag feature rows with media and copy flipping sides each row, and an optional per-row full-bleed background. - [Aspect-Ratio Media Box](https://ui.aidxn.com/components/aspect-ratio-box/) (astro, lifetime licence): Reserves a stable aspect ratio for media to prevent layout shift, using the native CSS aspect-ratio property. - [Auto-Fit Responsive Card Grid](https://ui.aidxn.com/components/auto-fit-grid/) (astro, free/MIT): Breakpoint-free responsive card grid using CSS grid auto-fit/minmax, column count is purely a function of container width. - [Bento Card Shells](https://ui.aidxn.com/components/bento-card-shells/) (astro, free/MIT): Single card shell component with five variants (icon, stat, image, chart-slot, quote) sharing one accessible article shell. - [Bento Grid — 4 Cell](https://ui.aidxn.com/components/bento-grid-4/) (astro, free/MIT): Responsive 4-cell bento grid, 1 column on phone and 2x2 on tablet/desktop, with four named slots. - [Bento Grid — Asymmetric Feature-Led](https://ui.aidxn.com/components/bento-grid-asymmetric/) (astro, lifetime licence): Feature-led bento grid with one wide lead cell plus three supporting cells, built with CSS grid-template-areas. - [Bento Grid — 6 Cell](https://ui.aidxn.com/components/bento-grid-six/) (astro, free/MIT): Responsive 6-cell bento grid, 1/2/3 columns across phone/tablet/desktop with slots in reading order. - [Bento Mosaic Grid](https://ui.aidxn.com/components/bento-mosaic-grid/) (astro, lifetime licence): A configurable mosaic where every cell declares its own span through a data prop, instead of a fixed bento template. - [Bento Grid — Tall Feature Cell](https://ui.aidxn.com/components/bento-tall-feature/) (astro, lifetime licence): Bento layout with one tall feature cell spanning two rows beside two stacked supporting cells. - [Card Deck Stack](https://ui.aidxn.com/components/card-deck-stack/) (astro, lifetime licence): An interactive peeking card stack with Prev/Next and dot controls, inert isolation on background cards and a live-region status announcement. - [Centred Container](https://ui.aidxn.com/components/center-box/) (astro, free/MIT): Reliable two-axis centring primitive with a flex or grid method and explicit known-height or min-height sizing. - [Cluster Primitive](https://ui.aidxn.com/components/cluster/) (astro, free/MIT): Horizontal wrapping group primitive for tag lists, pills, and button groups using flex-wrap plus gap. - [Dashboard Shell Grid](https://ui.aidxn.com/components/dashboard-shell-grid/) (astro, lifetime licence): A named-region app shell — header strip, sidebar, main and optional right rail — via CSS grid-template-areas, built to mount once per app lifetime. - [Divider Variants](https://ui.aidxn.com/components/divider/) (astro, free/MIT): Solid, dashed, gradient-fade, and labelled divider variants with correct semantic markup for each. - [Full-Bleed Section](https://ui.aidxn.com/components/full-bleed/) (astro, lifetime licence): Escapes a centred max-width container to span the full viewport using the calc(50% - 50vw) technique, with a re-centred inner column. - [12-Column Grid](https://ui.aidxn.com/components/grid-12/) (astro, free/MIT): General-purpose 12-column responsive grid container where children control their own span with plain col-span utilities. - [Responsive Gutter Wrapper](https://ui.aidxn.com/components/gutter-wrapper/) (astro, free/MIT): Self-contained responsive horizontal padding plus centred max-width wrapper with no dependency on any host project's CSS variables. - [Image Pair Grid](https://ui.aidxn.com/components/image-pair-grid/) (astro, lifetime licence): ImagePairGrid — bare responsive image grid, no heading or copy slot. - [Masonry Column Layout](https://ui.aidxn.com/components/masonry-columns/) (astro, lifetime licence): Pinterest-style masonry grid using native CSS multi-column layout with break-inside-avoid, zero JS. - [Overlap/Offset Card Pair](https://ui.aidxn.com/components/overlap-card-pair/) (astro, lifetime licence): Two cards with a deliberate offset overlap using pure CSS positioning, collapsing to a simple stack on mobile. - [Max-Width Prose Container](https://ui.aidxn.com/components/prose-container/) (astro, free/MIT): Centred reading-measure column for long-form copy with sane default heading, link, and list styling. - [Scroll-Snap Row](https://ui.aidxn.com/components/scroll-snap-row/) (astro, lifetime licence): Horizontal scroll-snap row for cards or logos with an optional edge-fade mask, pure CSS and no carousel library. - [Section Header](https://ui.aidxn.com/components/section-header/) (astro, free/MIT): Eyebrow, title, subtitle, and optional trailing action block with a required explicit heading level prop. - [Spacer Primitive](https://ui.aidxn.com/components/spacer/) (astro, free/MIT): Explicit, aria-hidden vertical or horizontal gap element for one-off spacing between unrelated blocks, with a flex-grow mode. - [Split 50/50 Section](https://ui.aidxn.com/components/split-fifty/) (astro, free/MIT): Even two-column split section that stacks to one column on mobile, with an optional mobile reorder flag. - [Split 60/40 with Sticky Side](https://ui.aidxn.com/components/split-sticky-side/) (astro, lifetime licence): 60/40 split section where one column sticks in the viewport while the other scrolls past it, desktop only. - [Stack Primitive](https://ui.aidxn.com/components/stack/) (astro, free/MIT): Vertical rhythm primitive that spaces children with flex gap instead of margin-stacking. - [Sticky Sidebar + Scrolling Content](https://ui.aidxn.com/components/sticky-sidebar-layout/) (astro, lifetime licence): Pinned sidebar with its own internal scroll next to a scrolling main content column, desktop only. - [Sticky Steps Scroller](https://ui.aidxn.com/components/sticky-steps-scroller/) (astro, lifetime licence): Scrollytelling steps: a numbered step list beside a pinned visual that swaps per step through IntersectionObserver-driven active-step tracking. - [Three-Column Feature Row](https://ui.aidxn.com/components/three-column-feature-row/) (astro, free/MIT): Classic three-feature row that collapses to two then one column per breakpoint. - [Two-Column Long-Copy Block](https://ui.aidxn.com/components/two-column-long-copy/) (astro, lifetime licence): Newspaper-style two-column long-form copy split with explicit column slots, stacking to one column below desktop. ### Marketing & Social Proof (36 — 0 free) Category page: https://ui.aidxn.com/components/category/marketing-and-social-proof/ - [Animated Dashboard Preview Card](https://ui.aidxn.com/components/animated-dashboard-preview-card/) (react, lifetime licence): AnimatedDashboardPreviewCard — Velocity Growth Layer ──────────────────────────────────────────────────────────────────────────── A "connect X, see Y" product-value card with a small looping CSS/SVG mockup instead of a real screenshot — useful for showing off a dashboard, analytics view or live-data feature before a buyer has signed up to see the real thing. - [Award Badges Row](https://ui.aidxn.com/components/award-badges-row/) (astro, lifetime licence): Row of award/recognition badge tiles supplied entirely via props. - [Awards Recognition Timeline](https://ui.aidxn.com/components/awards-recognition-timeline/) (astro, lifetime licence): A chronological year-by-year list of awards and recognitions with descriptions and links — the narrative counterpart to a flat badge row. - [Case Study Card](https://ui.aidxn.com/components/case-study-card/) (astro, lifetime licence): Cover image, industry tag, headline and result line linking through to a full case study. - [Case Study Results Band](https://ui.aidxn.com/components/case-study-results-band/) (astro, lifetime licence): Row of metric tiles for the headline numbers inside a case study. - [Client Logo Marquee Section](https://ui.aidxn.com/components/client-logo-marquee-section/) (astro, lifetime licence): Full section wrapper around a CSS-only scrolling logo strip that stops entirely under reduced motion. - [Community Photo Wall](https://ui.aidxn.com/components/community-photo-wall/) (astro, lifetime licence): A horizontally scrolling wall of customer photos with name and location captions and an optional rating. - [CTA with Testimonial Sidebar](https://ui.aidxn.com/components/cta-testimonial-sidebar/) (astro, lifetime licence): Primary CTA block paired with a single supporting testimonial in a side column. - [FAQ Accordion Section](https://ui.aidxn.com/components/faq-accordion-section/) (astro, lifetime licence): Full FAQ section built on native details/summary, zero runtime JS. - [Feature Highlight Scroller](https://ui.aidxn.com/components/feature-highlight-scroller/) (astro, lifetime licence): FeatureHighlightScroller — a single-row, horizontally scrolling feature reference list (icon + name + description + optional "replaces X" tag per card). - [Founder Story Split](https://ui.aidxn.com/components/founder-story-split/) (astro, lifetime licence): FounderStorySplit — a founder/about split: a portrait on one side, a short multi-paragraph story and a 2x2 stat grid on the other. - [Guarantee/Assurance Panel](https://ui.aidxn.com/components/guarantee-panel/) (astro, lifetime licence): Icon-led guarantee block with headline, supporting copy and optional CTA. - [Logo Wall Filterable](https://ui.aidxn.com/components/logo-wall-filterable/) (react, lifetime licence): A client logo grid with tab-style category filters derived from the logos themselves, so the filter bar can never drift from the data. - [Logo Wall (Grid)](https://ui.aidxn.com/components/logo-wall-grid/) (astro, lifetime licence): Plain responsive grid of client logos with text fallback when a logo is missing. - [Logo Wall (Greyscale to Colour Hover)](https://ui.aidxn.com/components/logo-wall-hover-color/) (astro, lifetime licence): Logo grid that desaturates by default and lifts to full colour on hover or keyboard focus. - [Newsletter Social Proof Block](https://ui.aidxn.com/components/newsletter-social-proof/) (astro, lifetime licence): Newsletter signup with subscriber-count proof line and stacked avatar group, no backend assumed. - [Press & Media Mentions Row](https://ui.aidxn.com/components/press-mentions-row/) (astro, lifetime licence): As-featured-in row of press outlet logos with optional article links. - [Pricing Card (Single)](https://ui.aidxn.com/components/pricing-card-single/) (astro, lifetime licence): One standalone plan card with price, feature list, badge and CTA. - [Pricing Checkout Email Gate](https://ui.aidxn.com/components/pricing-checkout-email-gate/) (react, lifetime licence): PricingCheckoutEmailGate — an inline email-capture row for a pricing card's CTA slot: collect the buyer's email, validate it client-side, then hand it to `onContinue` so the host page can do whatever checkout redirect/API call it needs. - [Pricing Feature Matrix](https://ui.aidxn.com/components/pricing-feature-matrix/) (astro, lifetime licence): Row-per-feature plan comparison table with tick, dash and text cell values. - [Pricing Plan Grid](https://ui.aidxn.com/components/pricing-plan-grid/) (astro, lifetime licence): PricingPlanGrid — a responsive 1-to-5-column grid of flat-price plan cards (name, price, period, description, feature checklist, single CTA link), with an optional "badge" ribbon on one highlighted plan. - [Pricing Seat Based Plan Grid](https://ui.aidxn.com/components/pricing-seat-based-plan-grid/) (astro, lifetime licence): PricingSeatBasedPlanGrid — a metered SaaS pricing grid: a flat base fee plus a per-seat rate, a "Most popular" ribbon, and a footnote slot for usage/overage fine print. - [Pricing Toggle](https://ui.aidxn.com/components/pricing-toggle/) (react, lifetime licence): Monthly/annual billing switch that reveals a savings badge on the annual side. - [Before/After Results Panel](https://ui.aidxn.com/components/results-before-after-panel/) (astro, lifetime licence): Static side-by-side before/after metric comparison panel, not an image slider. - [Review Platform Aggregate](https://ui.aidxn.com/components/review-platform-aggregate/) (astro, lifetime licence): Stars, numeric score and review count for a named review platform, with a visible text equivalent. - [Stat Counter Grid](https://ui.aidxn.com/components/stat-counter-grid/) (react, lifetime licence): Grid of stat tiles that count up on scroll into view, disabled entirely under reduced motion. - [Team Grid](https://ui.aidxn.com/components/team-grid/) (astro, lifetime licence): Section header plus a responsive grid of team member cards. - [Team Member Card](https://ui.aidxn.com/components/team-member-card/) (astro, lifetime licence): Headshot, name, role, bio and social links for a single team member. - [Testimonial Card](https://ui.aidxn.com/components/testimonial-card/) (astro, lifetime licence): Single quote card with optional star rating and avatar/initials fallback. - [Featured Testimonial](https://ui.aidxn.com/components/testimonial-featured/) (astro, lifetime licence): Large standalone quote paired with a portrait for one standout endorsement. - [Testimonial Grid (3-up)](https://ui.aidxn.com/components/testimonial-grid-3up/) (astro, lifetime licence): Section header plus a responsive 3-column grid of quote cards. - [Video Testimonial Card](https://ui.aidxn.com/components/testimonial-video-card/) (astro, lifetime licence): Native video element with poster and caption, zero runtime JS. - [Testimonial Video Grid](https://ui.aidxn.com/components/testimonial-video-grid/) (react, lifetime licence): A filterable grid of native-video testimonials with tag tabs by use case or industry. - [Testimonial Wall (Masonry)](https://ui.aidxn.com/components/testimonial-wall-masonry/) (astro, lifetime licence): Dense CSS-columns masonry wall of quotes with no JS masonry library. - [Trust/Security Badge Row](https://ui.aidxn.com/components/trust-badge-row/) (astro, lifetime licence): Row of security/compliance trust marks, each optionally linking out. - [Verified Stat Band](https://ui.aidxn.com/components/verified-stat-band/) (astro, lifetime licence): Headline stat tiles that each cite a source, plus an optional methodology link — built for credibility rather than just a big number. ### E-Commerce (34 — 0 free) Category page: https://ui.aidxn.com/components/category/e-commerce/ - [Add to Cart Button](https://ui.aidxn.com/components/add-to-cart-button/) (react, lifetime licence): Primary CTA with loading, success checkmark and error states around an async add-to-cart handler. - [Bundle Upsell Block](https://ui.aidxn.com/components/bundle-upsell-block/) (react, lifetime licence): Frequently-bought-together block: a main product plus checkbox add-ons, a live combined total and one Add-bundle button. - [Cart Drawer](https://ui.aidxn.com/components/cart-drawer/) (react, lifetime licence): Right-docked cart drawer on desktop and a three-snap-point bottom sheet on mobile, with no backdrop-blur scrim, focus trap and Escape to close. - [Cart Line Item](https://ui.aidxn.com/components/cart-line-item/) (react, lifetime licence): Single cart row with thumbnail, variant text, quantity stepper, line total and a fade-out remove action. - [Cart Summary / Order Totals](https://ui.aidxn.com/components/cart-summary/) (astro, lifetime licence): Order totals block listing subtotal, shipping, tax and discount rows that only render when passed, plus a grand total. - [Category Tile Grid](https://ui.aidxn.com/components/category-tile-grid/) (astro, lifetime licence): Responsive image-and-label tile grid linking into catalogue categories, with an optional item count. - [Checkout Form](https://ui.aidxn.com/components/checkout-form/) (react, lifetime licence): Two-column shipping and payment form with native HTML5 validation and a submit button with a loading state. - [Checkout Order Summary](https://ui.aidxn.com/components/checkout-order-summary/) (astro, lifetime licence): Full checkout-page order summary with line items, a promo code field and the totals breakdown — the richer sidebar companion to a totals-only cart summary. - [Delivery Estimate Row](https://ui.aidxn.com/components/delivery-estimate-row/) (react, lifetime licence): Postcode-based delivery estimate for a product page: enter a postcode, get selectable shipping methods with ETA and price. - [Empty Cart State](https://ui.aidxn.com/components/empty-cart-state/) (astro, lifetime licence): Centred placeholder for an empty cart with icon, copy and a continue-shopping CTA. - [Free Shipping Progress Bar](https://ui.aidxn.com/components/free-shipping-progress-bar/) (react, lifetime licence): Animated fill bar showing amount remaining to a free-shipping threshold, swapping to a success message once met. - [Order Confirmation Panel](https://ui.aidxn.com/components/order-confirmation-panel/) (astro, lifetime licence): Post-checkout success panel with order number, delivery estimate, line items and total paid. - [Order Status Tracker](https://ui.aidxn.com/components/order-status-tracker/) (astro, lifetime licence): Horizontal (vertical on mobile) step tracker for order lifecycle stages, with a dedicated cancelled-order state. - [Price Display](https://ui.aidxn.com/components/price-display/) (astro, lifetime licence): Formatted price with optional struck-through compare-at price and a percentage-off badge, in three sizes. - [Product Card — Grid](https://ui.aidxn.com/components/product-card-grid/) (astro, lifetime licence): Catalogue grid tile with image, title, rating, price with compare-at discount badge, and an out-of-stock overlay. - [Product Card — List/Row](https://ui.aidxn.com/components/product-card-list/) (astro, lifetime licence): Horizontal row card for search results or dense catalogue lists, with an action slot for cart/wishlist buttons. - [Product Card — Quick Add](https://ui.aidxn.com/components/product-card-quick-add/) (react, lifetime licence): Grid product card with an inline quantity stepper and add-to-cart control that shows a loading then success state. - [Product Comparison Table](https://ui.aidxn.com/components/product-comparison-table/) (astro, lifetime licence): Side-by-side comparison of two to four real products with images, price, stock state, spec rows and a per-column Add to cart. - [Product Detail Summary](https://ui.aidxn.com/components/product-detail-summary/) (react, lifetime licence): PDP summary block bundling title, price, colour/size variant pickers, quantity stepper and an add-to-cart button with success state. - [Product Gallery with Zoom](https://ui.aidxn.com/components/product-gallery-zoom/) (react, lifetime licence): Main image with thumbnail rail, hover magnifier lens, and a fullscreen zoom view with keyboard navigation. - [Product Grid Filter Bar](https://ui.aidxn.com/components/product-grid-filter-bar/) (react, lifetime licence): Sticky filter/sort bar with active filter chips, result count, and sort select that wraps a product grid via children. - [Quantity Stepper](https://ui.aidxn.com/components/quantity-stepper/) (react, lifetime licence): Numeric stepper with min/max clamping, direct type-in and a disabled state, used across cart and PDP. - [Quote List Drawer](https://ui.aidxn.com/components/quote-list-drawer/) (react, lifetime licence): QuoteListDrawer — header badge + slide-in panel for a B2B request-a-quote flow, the quote-list equivalent of `CartDrawer`. - [Quote Request Button](https://ui.aidxn.com/components/quote-request-button/) (react, lifetime licence): QuoteRequestButton — "Add to quote" for a B2B request-a-quote flow, as distinct from `AddToCartButton` (which assumes an immediate-checkout cart). - [Quote Request Form](https://ui.aidxn.com/components/quote-request-form/) (react, lifetime licence): QuoteRequestForm — full-page line-items + contact-details panel for a B2B request-a-quote flow. - [Recently Viewed Row](https://ui.aidxn.com/components/recently-viewed-row/) (astro, lifetime licence): Horizontally scrolling rail of small product tiles using native scroll-snap, no carousel library. - [Single Review Card](https://ui.aidxn.com/components/review-card/) (astro, lifetime licence): Customer review card with avatar/initials, verified badge, star rating, photos row and a progressively-enhanced helpful-vote button. - [Review Summary with Rating Breakdown](https://ui.aidxn.com/components/review-summary/) (astro, lifetime licence): Average rating, star row and review count beside a 5-to-1 star horizontal bar breakdown with counts. - [Sticky Add To Cart Bar](https://ui.aidxn.com/components/sticky-add-to-cart-bar/) (react, lifetime licence): Product-page bottom bar with thumbnail, name, price and Add to cart, sliding in once the buy box scrolls out of view. Self-contained and product-aware. - [Stock/Availability Indicator](https://ui.aidxn.com/components/stock-availability-indicator/) (astro, lifetime licence): Dot-and-label status line that derives in-stock/low-stock/out-of-stock from a quantity and threshold, or accepts an explicit status. - [Subscription Plan Switcher](https://ui.aidxn.com/components/subscription-plan-switcher/) (react, lifetime licence): Accessible plan selection for an existing subscription, showing the current plan and collecting explicit confirmation. Billing and proration remain in the host app. - [Variant Swatch Picker](https://ui.aidxn.com/components/variant-swatch-picker/) (react, lifetime licence): Colour swatch and size button picker with per-combination availability so unavailable sizes show struck-through instead of disappearing. - [Wishlist/Save Button](https://ui.aidxn.com/components/wishlist-button/) (react, lifetime licence): Heart toggle with a pop animation on save, in an icon-only or labelled-pill variant. - [Write a Review Form](https://ui.aidxn.com/components/write-review-form/) (react, lifetime licence): Interactive star-rating picker with title and body fields, native validation, and a success confirmation state. ### Content & Dashboard (28 — 0 free) Category page: https://ui.aidxn.com/components/category/content-and-dashboard/ - [Activity Feed List](https://ui.aidxn.com/components/activity-feed-list/) (astro, lifetime licence): Vertical timestamped activity feed with a connecting dot-and-line rail between entries. - [Article Body Layout with Sidebar](https://ui.aidxn.com/components/article-body-sidebar/) (astro, lifetime licence): Two-column article layout with a reader-width prose column and a sticky sidebar slot that collapses above content on mobile. - [Article Header](https://ui.aidxn.com/components/article-header/) (astro, lifetime licence): Article title, byline, avatar, publish/updated date and read time above a divider. - [Author Bio Card](https://ui.aidxn.com/components/author-bio-card/) (astro, lifetime licence): Avatar, name, role, short bio and optional social links for an article sidebar or footer. - [Blog Index Grid with Category Filter](https://ui.aidxn.com/components/blog-index-grid/) (react, lifetime licence): Client-filtered blog index grid driven by a category pill row built from the posts data. - [Blog Post Card](https://ui.aidxn.com/components/blog-post-card/) (astro, lifetime licence): Vertical blog post card with cover image, category eyebrow, title, excerpt, and author/date/read-time meta row. - [Blog Post Card (Horizontal)](https://ui.aidxn.com/components/blog-post-card-horizontal/) (astro, lifetime licence): Image-left, content-right post card for dense list views that stacks to image-top on mobile. - [Calendar Month Grid](https://ui.aidxn.com/components/calendar-month-grid/) (react, lifetime licence): Month calendar grid with prev/next navigation, locale-aware weekday/month labels via Intl, and per-day event dots. - [Timeline / Changelog Feed](https://ui.aidxn.com/components/changelog-timeline-feed/) (astro, lifetime licence): Dated release/changelog entries on a vertical rail with version, date and a coloured change-type tag. - [Chart Card Shell](https://ui.aidxn.com/components/chart-card-shell/) (astro, lifetime licence): Dashboard card chrome with title, sub, a legend built from a series prop, and a default slot for any host-supplied chart. - [Code Block with Copy Button](https://ui.aidxn.com/components/code-block-copy/) (react, lifetime licence): Styled pre/code block with a filename bar and a copy button with a real success state, no syntax highlighter bundled. - [Comment Thread Item](https://ui.aidxn.com/components/comment-thread-item/) (astro, lifetime licence): Single comment with avatar, author, date and body that recursively renders nested replies up to a capped indent depth. - [Dashboard Stat Tile](https://ui.aidxn.com/components/dashboard-stat-tile/) (astro, lifetime licence): Single KPI tile with label, large value, optional icon slot and a directional delta badge. - [Featured Post Hero Card](https://ui.aidxn.com/components/featured-post-hero/) (astro, lifetime licence): Full-bleed editorial hero card for a pinned blog post with a solid scrim over the cover image for legibility. - [KPI Row](https://ui.aidxn.com/components/kpi-row/) (astro, lifetime licence): Horizontal row of KPI figures sharing one divided card for a dashboard header strip. - [Lite Youtube Embed](https://ui.aidxn.com/components/lite-youtube-embed/) (astro, lifetime licence): LiteYoutubeEmbed — a click-to-load YouTube facade. - [Newsletter Block (Article End)](https://ui.aidxn.com/components/newsletter-article-block/) (astro, lifetime licence): Inline subscribe block for the end of an article, a plain form with a host-supplied action/method. - [Notification List Item](https://ui.aidxn.com/components/notification-list-item/) (astro, lifetime licence): Single notification row with avatar/icon, message, timestamp and an unread indicator dot. - [Post Navigation (Prev/Next)](https://ui.aidxn.com/components/post-navigation/) (astro, lifetime licence): Previous/next post navigation links with directional chevrons, stacking to one column on mobile. - [Progress Goal Card](https://ui.aidxn.com/components/progress-goal-card/) (astro, lifetime licence): Single-goal card with a computed percentage progress bar, current/target values and an optional due date. - [Related Posts Row](https://ui.aidxn.com/components/related-posts-row/) (astro, lifetime licence): Compact grid of 2-4 related post cards for the end of an article. - [Share Buttons Row](https://ui.aidxn.com/components/share-buttons-row/) (react, lifetime licence): Share-to-platform link row (X, LinkedIn, Facebook, Email) plus a copy-link button with a real success state. - [Standard Article Sidebar](https://ui.aidxn.com/components/standard-article-sidebar/) (react, lifetime licence): StandardArticleSidebar — the "Standard" (app-shell) sibling of `content/TableOfContents.jsx`. - [Stat Tile with Trend Arrow and Sparkline](https://ui.aidxn.com/components/stat-tile-trend-sparkline/) (react, lifetime licence): KPI tile with a trend arrow and a hand-drawn inline SVG sparkline computed from a numbers array, no chart library. - [Table of Contents (Sticky, Scroll-Spy)](https://ui.aidxn.com/components/table-of-contents/) (react, lifetime licence): Sticky table of contents with IntersectionObserver-driven scroll-spy highlighting that degrades to a plain link list without observer support. - [Tag Cloud](https://ui.aidxn.com/components/tag-cloud/) (astro, lifetime licence): Wrapping row of tag pills with optional count and active state for a tag archive page. - [Task / Checklist Card](https://ui.aidxn.com/components/task-checklist-card/) (react, lifetime licence): Card of checkable tasks with a done/total count, supporting both internal state and parent-controlled toggling. - [Video Episode Hub](https://ui.aidxn.com/components/video-episode-hub/) (astro, lifetime licence): VideoEpisodeHub — a hub hero + episode grid for a video series, podcast or course. ### Backgrounds (31 — 2 free) Category page: https://ui.aidxn.com/components/category/backgrounds/ - [Aurora Drift](https://ui.aidxn.com/components/aurora-drift/) (astro, lifetime licence): Calm, full-bleed aurora wash of drifting colour fields for hero and section backdrops. Pure CSS, no canvas or JS, fixed low opacity so body text keeps AA contrast on top. - [Blueprint Grid](https://ui.aidxn.com/components/blueprint-grid/) (astro, lifetime licence): A static technical drafting-table grid with fine minor rules, bolder major rules every few cells, and a faint crosshair origin marker — a precise, no-motion backdrop for engineering, CAD and dev-tool pages. - [Bokeh Orbs](https://ui.aidxn.com/components/bokeh-orbs/) (astro, lifetime licence): Soft, out-of-focus circles in varied sizes and blur drifting gently behind your content, like camera bokeh behind a subject. Warm and photographic rather than geometric — a gentle backdrop for testimonials, pricing, and about pages. - [Circuit Trace Lines](https://ui.aidxn.com/components/circuit-trace-lines/) (react, lifetime licence): PCB-style wiring paths with travelling light pulses, giving technical and infrastructure pages a systems-and-signal backdrop without any canvas or extra dependency. - [Constellation Field](https://ui.aidxn.com/components/constellation-field/) (react, lifetime licence): Slow drifting field of points that link into triangles when close, like a star map redrawing itself. A calm 'data / network / intelligence' backdrop for dashboard, pricing, and AI-product heroes. - [Cursor Spotlight Wash](https://ui.aidxn.com/components/cursor-spotlight-wash/) (astro, lifetime licence): A soft radial glow that tracks the pointer across a section. One passive pointermove listener writes two CSS variables — no animation loop, no canvas — and it is never attached at all on touch devices or under reduced motion, which get a fixed centred glow in pure CSS. - [Diagonal Stripe Drift](https://ui.aidxn.com/components/diagonal-stripe-drift/) (astro, lifetime licence): A slow, restrained drift of diagonal bands behind a section — reads as quiet motion rather than decoration, so body copy, forms and pricing tables stay fully legible on top. - [Dot Grid Parallax](https://ui.aidxn.com/components/dot-grid-parallax/) (react, lifetime licence): Three depth layers of a dot matrix that drift at different rates with the pointer, giving a flat section real depth. The structured counterpart to free-floating particle backgrounds — sits behind pricing tables, feature grids, and app screenshots. - [Flow Lines](https://ui.aidxn.com/components/flow-lines/) (react, free/MIT): Stripe-style ribbon of thin lines that twists in pseudo-3D — additive blending lights up a glowing fold where the lines bunch. Pure canvas, zero dependencies. - [Goo Lava Blobs](https://ui.aidxn.com/components/goo-lava-blobs/) (astro, lifetime licence): Drifting colour blobs that visibly merge and separate through an SVG goo filter, rather than only blending transparently. Pure CSS and one static filter — no canvas, no JS, nothing to tear down. - [Gradient Border Glow](https://ui.aidxn.com/components/gradient-border-glow/) (astro, lifetime licence): An animated glowing gradient frame that traces the edge of a card or section to single it out — a rotating ring plus soft halo, never a fill, so the content inside stays untouched. - [Grain Overlay](https://ui.aidxn.com/components/grain-overlay/) (astro, lifetime licence): Film-grain texture layer that kills gradient banding and flat-colour plasticky sections. Zero JS, zero canvas — an SVG noise filter with a gentle four-step flicker. - [Halftone Dot Gradient](https://ui.aidxn.com/components/halftone-dot-gradient/) (astro, lifetime licence): A print-style halftone screen whose dots genuinely shrink across the section, like a Ben-Day tone fading to paper. Gives editorial, comic, or print-brand sections real texture instead of a flat gradient, with zero client-side JS. - [Isometric Cube Field](https://ui.aidxn.com/components/isometric-cube-field/) (react, lifetime licence): A wireframe lattice of isometric cubes that drifts sideways at a pace too slow to notice as motion, only as alive. Sits quietly behind pricing tables, dashboards, and dev-tool marketing pages without competing with copy on top. - [Light Leak Wash](https://ui.aidxn.com/components/light-leak-wash/) (astro, lifetime licence): An analogue-film light leak hugging one corner, warm colour streaks drifting slowly like mis-loaded stock. Adds instant warmth and texture to photography, film, and brand-story sections without a stock-photo overlay. - [Maze Growth](https://ui.aidxn.com/components/maze-growth/) (astro, free/MIT): Generative maze that grows outward from a seed cell, drawing itself as a living background. Canvas-based, self-contained, pauses when off screen and stops entirely under prefers-reduced-motion. - [Mesh Gradient Blobs](https://ui.aidxn.com/components/mesh-gradient-blobs/) (astro, lifetime licence): Four soft, oversized colour blobs with morphing organic edges that glide slowly behind content, like a modern gradient-mesh backdrop. Pure CSS, no canvas or JS, fixed low opacity so body text keeps AA contrast on top. - [Paper Texture](https://ui.aidxn.com/components/paper-texture/) (astro, lifetime licence): A fine fibre-grain surface for editorial sections and long-form reading panels — calmer and more static than a film-grain overlay, like uncoated paper stock instead of a scanned photo. - [Perspective Grid Floor](https://ui.aidxn.com/components/perspective-grid-floor/) (astro, lifetime licence): A tilted grid receding to a glowing horizon, drifting slowly forward — the retro-tech synthwave floor, played tasteful rather than loud, for hero sections behind a product shot or a developer-tool landing page. - [Pulse Grid Nodes](https://ui.aidxn.com/components/pulse-grid-nodes/) (astro, lifetime licence): A static grid of nodes where a build-time-seeded subset lights and fades on independent randomised timers, like status LEDs on a server rack. The nodes never move — only brightness breathes. - [Rain Streak Drift](https://ui.aidxn.com/components/rain-streak-drift/) (astro, lifetime licence): Two depth layers of thin falling rain streaks for a nocturnal backdrop. Pure CSS repeating-gradient loop, no JS, no canvas. - [Ripple Wave Field](https://ui.aidxn.com/components/ripple-wave-field/) (astro, lifetime licence): Slow concentric rings expanding from an off-centre point, like a stone dropped in still water. Pure CSS, built for dark hero sections that want quiet, premium motion without the weight of a canvas loop. - [Scanline Glow](https://ui.aidxn.com/components/scanline-glow/) (astro, lifetime licence): Retro-CRT scanline texture with a slow diagonal light sweep, for terminal, dev-tool, and dark dashboard heroes that need hardware texture instead of flat black. Pure CSS, zero JS. - [Scroll Depth Field](https://ui.aidxn.com/components/scroll-depth-field/) (react, lifetime licence): Diagonal line field whose drift and tilt are driven by actual scroll position, not a timed loop — native scroll-timeline CSS where supported, rAF fallback elsewhere. Reverses on scroll-up, freezes the instant scrolling stops. - [Soft Floating Particles](https://ui.aidxn.com/components/soft-floating-particles/) (astro, lifetime licence): A calm field of drifting motes, each sized and faded differently, rising slowly behind content for quiet ambient depth without the sparkle or clutter of a festive particle effect. - [Spotlight Sweep](https://ui.aidxn.com/components/spotlight-sweep/) (astro, lifetime licence): A single soft beam of light passing over a dark section with a quiet top-down vignette, like a stage spotlight crossing the back wall. One deliberate moment of motion for dark hero panels and feature reveals, not a busy texture. Pure CSS, no canvas or JS. - [Starfield Depth Drift](https://ui.aidxn.com/components/starfield-depth-drift/) (react, lifetime licence): A quiet, layered field of drifting stars that gives any dark section real depth — near points move faster and glow brighter, far points barely shift. Reads as premium and spacious, not busy, and never distracts from content laid over the top. - [Tessellation Field](https://ui.aidxn.com/components/tessellation-field/) (react, lifetime licence): A quiet hexagon or triangle grid with one soft highlight travelling across it, like light catching a cut-glass surface. The grid is drawn to canvas once (on mount and resize, never per frame); only a single masked CSS transform animates, so it costs nothing while idle. Built for pricing tables, technical docs, and enterprise-leaning sections. - [Topographic Contours](https://ui.aidxn.com/components/topographic-contours/) (astro, lifetime licence): Stacked elevation-map contour lines that breathe in and out like a slow survey map. Gives fintech, mapping, and B2B-data sections a technical backdrop without another gradient blob. SSR-deterministic SVG, zero JS. - [Vignette Pulse](https://ui.aidxn.com/components/vignette-pulse/) (astro, lifetime licence): A soft breathing edge-darkening that pulls focus back to centred content — built for hero statements and single-CTA sections that want quiet emphasis, not a hard spotlight. - [Wave Surface Drift](https://ui.aidxn.com/components/wave-surface-drift/) (astro, lifetime licence): Three stacked translucent wave bands travelling along a section’s bottom edge like a calm shoreline, built from a seamlessly looping SVG path. ### Cards & Expandables (25 — 1 free) Category page: https://ui.aidxn.com/components/category/cards-and-expandables/ - [Accordion Card Group](https://ui.aidxn.com/components/accordion-card-group/) (react, lifetime licence): A stack of independent cards where opening one smoothly expands its detail and closes any other open card, while every card's summary stays legible whether open or closed. Height animates off the panel's real measured content, so there's never a layout jump. - [Card Grid Skeleton](https://ui.aidxn.com/components/card-grid-skeleton/) (react, lifetime licence): The loading shape for a grid of cards — media block, title line, sub line, sized to match real card dimensions so the grid doesn't shift when data arrives. Ships media, list and stat variants; static (not faster) under reduced motion and hidden from screen readers. - [Comparison Card Pair](https://ui.aidxn.com/components/comparison-card-pair/) (astro, lifetime licence): Two options side by side for an A-vs-B decision point — plan tiers, old-vs-new, build-vs-buy — stacking on mobile, with one card raised and badged as the recommended pick. - [Contact Person Card](https://ui.aidxn.com/components/contact-person-card/) (react, lifetime licence): A directory entry — avatar, name, role, a short list of real tel/email/location contact methods, and one primary action. Built for a staff directory or "your account manager" block, not a hover-reveal bio tile. - [Course Progress Card](https://ui.aidxn.com/components/course-progress-card/) (astro, lifetime licence): A learning-dashboard tile showing course title, lesson completion as both a bar and a written count, time remaining, and a resume action — built for a "continue where you left off" rail. - [Download Resource Card](https://ui.aidxn.com/components/download-resource-card/) (astro, lifetime licence): A content-offer tile for a resource library or lead-magnet grid — file type badge, title, short description, locale-formatted size, and a download action. Built for a standalone promotional grid, not a stacked attachment list. - [Event Date Card](https://ui.aidxn.com/components/event-date-card/) (astro, lifetime licence): A listing row for a meetup, webinar or conference session — a prominent day/month date block, title, location and time, with a one-click add-to-calendar download that generates a real .ics file by hand. No calendar SDK, works even with JS disabled. - [Expandable Card](https://ui.aidxn.com/components/expandable-card/) (react, free/MIT): Card that expands into a focused overlay on desktop and a draggable bottom sheet on mobile, with three snap points. Portal-rendered, focus-trapped, scroll-locked and reduced-motion aware. - [Feature Card Icon Lift](https://ui.aidxn.com/components/feature-card-icon-lift/) (astro, lifetime licence): The standard feature-grid tile — icon, title and one line of copy that lifts and shadows on hover and focus, so a row of them reads as tactile instead of flat text in boxes. - [File Attachment Card](https://ui.aidxn.com/components/file-attachment-card/) (astro, lifetime licence): A row for an upload list or attachment drawer — type icon, filename, locale-formatted file size, and download/remove actions. Built for stacking one per uploaded file, with the remove action firing a hook event so you can wire real deletion. - [Image Overlay Gradient Card](https://ui.aidxn.com/components/image-overlay-gradient-card/) (react, lifetime licence): Full-bleed photo card with title and copy sat over a bottom scrim, tuned so white text stays readable against a bright sky shot exactly as reliably as a dark one — no manual contrast tweaking per image. - [Inbox Message Card](https://ui.aidxn.com/components/inbox-message-card/) (astro, lifetime licence): A full inbox or notification-centre card — sender avatar, subject, clamped preview, timestamp, unread state and optional mark-read/archive actions — for feeds that need a proper card, not a dense list row. - [Integration Connect Card](https://ui.aidxn.com/components/integration-connect-card/) (react, lifetime licence): The tile an integrations or connected-apps settings page is built from — service mark, description, and a clearly-labelled connected/disconnected state with its connect or disconnect action. Shows the linked account and last-synced time once connected. - [Link Preview Card](https://ui.aidxn.com/components/link-preview-card/) (react, lifetime licence): The shared-link unfurl people already expect from iMessage, Slack and Notion — thumbnail, favicon, source and description in one clickable card, dropped into any feed or share surface. - [Map Location Card](https://ui.aidxn.com/components/map-location-card/) (astro, lifetime licence): A store/branch listing tile — address, today's hours, distance and a Get Directions action that deep-links to Google Maps by default. Drop in any static map image (Mapbox/Google Static Maps API or a screenshot) via a plain prop; no map SDK, no API key required to render the card itself. - [Media Cover Card](https://ui.aidxn.com/components/media-cover-card/) (react, lifetime licence): Image or video cover card locked to a fixed aspect ratio with a skeleton placeholder, so the cover never shifts the title or meta row as it loads — the fix for cover-card CLS in blog grids, galleries and video libraries. - [Pricing Reveal Card](https://ui.aidxn.com/components/pricing-reveal-card/) (react, lifetime licence): Pricing tier card that expands in place into a full feature-by-feature comparison table, so shoppers can go deep on one plan without leaving the card or jumping to a separate comparison page. - [Product Spec Card](https://ui.aidxn.com/components/product-spec-card/) (astro, lifetime licence): A compact product tile built for a side-by-side comparison row — image, title, price with an optional strike-through, and a short spec list that stays readable at small widths. Lighter than a full product-detail panel, denser than a storefront grid card. - [Quote Avatar Card](https://ui.aidxn.com/components/quote-avatar-card/) (react, lifetime licence): A testimonial tile sized to sit three-up in a plain grid — quote, name, role, avatar and an optional star rating that's labelled for screen readers, not colour- or icon-only. A generic card primitive rather than a section-owning marketing block. - [Review Rating Card](https://ui.aidxn.com/components/review-rating-card/) (react, lifetime licence): A compact, star-first review tile for a review-wall grid or product page — rating, review text, reviewer identity and a verified-buyer marker. A single-review primitive (not a section), distinct from Marketing & Social Proof's aggregate review-card and quote-led testimonial-card. - [Stat Trend Card](https://ui.aidxn.com/components/stat-trend-card/) (astro, lifetime licence): A single-metric KPI tile for a dashboard grid — big number, an auto-coloured up/down delta pill, and an optional inline sparkline so the direction reads at a glance. No chart library, pure inline SVG. - [Status Ticket Card](https://ui.aidxn.com/components/status-ticket-card/) (react, lifetime licence): The card shape a support queue, issue board or ops tracker is built from — status pill, title, meta row with ID/priority/updated-at, and an assignee chip with avatar fallback. Status is always labelled, never colour-only. - [Team Hover Card](https://ui.aidxn.com/components/team-hover-card/) (react, lifetime licence): Compact team tile that reveals a bio and social links on hover, with the exact same reveal on keyboard focus, so the richer detail isn't mouse-only and the grid never reflows while it opens. - [Timeline Event Card](https://ui.aidxn.com/components/timeline-event-card/) (astro, lifetime licence): A single dated entry for a vertical timeline — changelog, case history, roadmap or company milestones — with a connector node and line sized to chain into a list, a status flag (complete / current / upcoming) that's never colour-only, and a slot for the body copy. - [Video Thumbnail Card](https://ui.aidxn.com/components/video-thumbnail-card/) (react, lifetime licence): The tile a video library, course list or media grid is built from — poster frame, duration badge, play affordance and an optional watched-progress bar. Links out to your own player route rather than embedding one, so a grid of these stays light. ### Stats & Numbers (31 — 1 free) Category page: https://ui.aidxn.com/components/category/stats-and-numbers/ - [Animated Stats Section](https://ui.aidxn.com/components/animated-stats/) (astro, free/MIT): Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately. - [Before/After Comparison Bar](https://ui.aidxn.com/components/before-after-bar/) (astro, lifetime licence): Puts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual. - [Benchmark Percentile Bar](https://ui.aidxn.com/components/benchmark-percentile-bar/) (astro, lifetime licence): A single metric’s percentile rank against a peer benchmark on a quartile-shaded scale, with an auto-generated plain-English comparison sentence. - [Big Number Hero Stat](https://ui.aidxn.com/components/big-number-stat/) (astro, lifetime licence): One headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users. - [Bullet Chart KPI](https://ui.aidxn.com/components/bullet-chart-kpi/) (astro, lifetime licence): The compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually. - [Concentric Goal Rings](https://ui.aidxn.com/components/concentric-goal-rings/) (astro, lifetime licence): Two to four nested progress rings in one dial, each with its own label, value and token colour. - [Count-Up Metric with Delta Badge](https://ui.aidxn.com/components/count-up-delta-stat/) (astro, lifetime licence): A single large figure that counts up the moment it scrolls into view, paired with a directional change badge. No chart library, no runtime dependency — locale-safe number formatting and a permanent screen-reader value so the real number is never hidden behind the animation. - [Cumulative Total Card](https://ui.aidxn.com/components/cumulative-total-card/) (astro, lifetime licence): A lifetime running total — total revenue, total signups, total units shipped — with the current period's own contribution called out underneath, so a reader sees where things stand and what just moved the needle in one card instead of two. - [Distribution Summary Strip](https://ui.aidxn.com/components/distribution-summary-strip/) (astro, lifetime licence): Stacks several datasets as one-line range tracks so min, median, max and the middle-50% spread are readable at a glance down a list — load times by route, deal size by rep, response time by week. A compact alternative to a histogram when the shape of the data matters less than where it sits. - [Donut Breakdown Chart](https://ui.aidxn.com/components/donut-breakdown-chart/) (astro, lifetime licence): Shows how a total splits across a handful of categories — revenue by plan, traffic by channel, tickets by type — as a donut with a legend and an exact-value table underneath. Every segment carries a fixed colour, a direct percentage and a legend row at once, so the breakdown reads correctly even for colourblind viewers or screen readers. - [Forecast Range Stat](https://ui.aidxn.com/components/forecast-range-stat/) (astro, lifetime licence): A forward-looking point estimate shown with its low-high confidence range on one track, for projections rather than observed data. - [Funnel Conversion Chart](https://ui.aidxn.com/components/funnel-conversion-chart/) (astro, lifetime licence): Turns a signup, checkout or sales pipeline into a descending set of stage bars, with the step-over-step conversion rate and the raw drop-off count called out next to each one — so the question 'where are we losing people' is answered on sight, not after opening a tooltip. - [Goal Progress Tracker](https://ui.aidxn.com/components/goal-progress-tracker/) (astro, lifetime licence): A current-vs-target meter for revenue goals, quotas and SLAs, with a labelled threshold marker on the same track so the team can see at a glance whether they're ahead or behind. Over/under is never shown by colour alone — a worded status pill and a hatch texture on the fill carry the same meaning. - [Heatmap Calendar](https://ui.aidxn.com/components/heatmap-calendar/) (astro, lifetime licence): A GitHub-style year grid of daily activity — commits, workouts, orders, logins, anything with one value per day — shaded by a five-step intensity legend so density reads at a glance. Scrolls inside its own container, so a full year never breaks the page layout on mobile. - [Horizontal Bar Ranking](https://ui.aidxn.com/components/horizontal-bar-ranking/) (astro, lifetime licence): A ranked top-N list — top pages, top referrers, top SKUs — where bar length shows magnitude and every label and value stays fully legible outside the fill, never clipped or reversed on dark mode. Auto-sorts descending, prints the rank number on every row, and ships an exact-value table fallback for anyone who can't read the bars visually. - [Sparkline Stat](https://ui.aidxn.com/components/inline-sparkline-stat/) (astro, lifetime licence): A value paired with a compact inline trend line — the pattern for a metric row where every figure needs its recent history at a glance. Hand-rolled SVG computed from a plain number array, no chart library, with an accessible text summary so the trend is never color-only. - [KPI Tile Row](https://ui.aidxn.com/components/kpi-tile-row/) (astro, lifetime licence): A shared-card row of metric tiles for a dashboard header or report summary — label, value and an optional directional delta badge per tile. Reflows to a two-column grid on mobile so nothing truncates at narrow widths. - [Metric Comparison Grid](https://ui.aidxn.com/components/metric-comparison-grid/) (astro, lifetime licence): A grid of metric cards for a monthly or quarterly review, each one showing two periods side by side with its own delta. A per-metric goodDirection flag lets churn or latency colour correctly when down is the win, instead of every metric reading green-for-up. - [Odometer Stat](https://ui.aidxn.com/components/odometer-stat/) (astro, lifetime licence): A big figure where every digit is its own mechanical odometer reel that rolls into place, staggered left to right, and correct with zero JS. - [Percentage Split Bar](https://ui.aidxn.com/components/percentage-split-bar/) (astro, lifetime licence): A single horizontal bar divided into labelled proportions — traffic sources, plan mix, budget allocation — with a legend underneath carrying the exact share for every segment. Built for the "these parts make one hundred percent" read in one horizontal sweep, with a table fallback for anyone who can't read the bar visually. - [Period Selector Stat Card](https://ui.aidxn.com/components/period-selector-stat-card/) (astro, lifetime licence): A metric card with a Day / Week / Month switch that re-renders its own figure and delta instantly, no reload and no chart library — lets one card do the work three separate stat tiles used to, with a real keyboard-operable tab switcher underneath. - [Progress Ring](https://ui.aidxn.com/components/progress-ring/) (astro, lifetime licence): A circular gauge for any 0-100 metric — profile completion, renewal rate, score cards. Reads instantly with a centre value and a labelled track, and exposes real meter semantics so screen readers announce the number, not just the shape. - [Rank Change List](https://ui.aidxn.com/components/rank-change-list/) (astro, lifetime licence): A ranked leaderboard — top accounts, top pages, top reps — where every row states how far it moved since the last period in plain words alongside the arrow, so a skim of the list still tells you who's climbing and who's slipping without reading a tooltip. - [Scorecard Grid with Targets](https://ui.aidxn.com/components/scorecard-grid-targets/) (astro, lifetime licence): Grid of metric cards that scores each one against its own target, with a written verdict — on track, at risk, or missed — instead of colour-only pass/fail. Handles metrics where lower is the win, like churn or response time, with a single flag per card. - [Semi-Circle Gauge Meter](https://ui.aidxn.com/components/semi-circle-gauge-meter/) (astro, lifetime licence): A half-circle gauge with a trig-computed needle, a swept zone band and a worded verdict pill — never colour alone. - [Sparkline Trend Grid](https://ui.aidxn.com/components/sparkline-trend-grid/) (astro, lifetime licence): A wall of small labelled trend lines for scanning every region, SKU or account at once instead of reading one chart at a time. Each tile carries its own value, delta and line, the grid reflows to a single column on mobile, and the full set is mirrored in a table for anyone who can't read the lines visually. - [Stacked Area Mini Chart](https://ui.aidxn.com/components/stacked-area-mini-chart/) (astro, lifetime licence): A compact dashboard-cell chart that stacks two or three series over time — traffic by channel, revenue by segment, tickets by priority — so composition and total trend read together without needing a full-width chart section. - [Stat Milestone Timeline](https://ui.aidxn.com/components/stat-milestone-timeline/) (astro, lifetime licence): A sequence of headline figures pinned along a dated rail, for a company-history or growth-milestones section. One flexbox rail flips from a horizontal scroller on desktop to a vertical list on mobile with a single media query, so there's no JS layout branching to get out of sync. - [Stats Split Counters](https://ui.aidxn.com/components/stats-split-counters/) (astro, lifetime licence): StatsSplitCounters — a value-proposition section: copy + two CTAs on the left, a 2x2 grid of count-up stat cards on the right. - [Trend Line Chart Card](https://ui.aidxn.com/components/trend-line-chart-card/) (astro, lifetime licence): A headline metric paired with a small multi-point trend line, sized to drop straight into a dashboard grid cell — MRR, active users, response time over time. Carries first/last axis labels and an optional second comparison series (this period vs last), with a legend and hidden data table so the trend is never colour-only. - [Waterfall Chart](https://ui.aidxn.com/components/waterfall-chart/) (astro, lifetime licence): Shows how a run of gains and losses builds a start total into an end total, step by step. Positive and negative steps carry their own glyph and position so the direction reads without relying on colour, with a plain-text breakdown underneath for screen readers. ### Long-form (25 — 1 free) Category page: https://ui.aidxn.com/components/category/long-form/ - [Admonition Block](https://ui.aidxn.com/components/admonition-block/) (astro, lifetime licence): The note / tip / warning / danger callout a docs page or technical article needs repeatedly, from one component instead of four. Left accent bar + icon + label so variants read apart at a glance without relying on colour alone, built for pages that stack several of these without feeling noisy. - [Article Disclosure Banner](https://ui.aidxn.com/components/article-disclosure-banner/) (astro, lifetime licence): The affiliate/sponsored/review-unit disclosure strip that monetised long-form content needs near the top of the piece — calm, matter-of-fact copy with an optional link to a standing disclosure policy. - [Article Feedback Prompt](https://ui.aidxn.com/components/article-feedback-prompt/) (astro, lifetime licence): A lightweight 'was this helpful?' strip for the end of a post or docs page — thumbs up/down with an optional comment box that only appears after a choice is made, ending in a thank-you state. A deliberately lighter, binary take than a full satisfaction-score prompt, built to drop straight into prose with no state library. - [Article Hero](https://ui.aidxn.com/components/article-hero/) (astro, lifetime licence): The opening block for a blog or long-form page — kicker, headline, dek, and an author/date/read-time meta row, with an optional cover image. Marked up as a proper document header with one real h1, so the rest of the article's heading order stays correct. - [Article Meta Bar](https://ui.aidxn.com/components/article-meta-bar/) (astro, lifetime licence): Author, date, read time, category and a last-updated stamp collapsed into one compact row you can drop anywhere a piece needs its provenance shown on its own — a reprint, an archive card, a changelog entry — without pulling in a full page header. - [Next Up Banner](https://ui.aidxn.com/components/article-next-up-banner/) (astro, lifetime licence): A deliberate, feature-card-sized hand-off to the next piece worth reading at the end of an article — cover image, title and excerpt — built to feel like an editorial pick rather than a footnote link row. - [Article Summary Panel](https://ui.aidxn.com/components/article-summary-panel/) (astro, lifetime licence): The "in short" box at the top of a long piece — key points plus a meta strip of estimated read time, word count, difficulty level and last-updated date, so a skimmer sees the shape of the article before committing to it. - [Article Table of Contents](https://ui.aidxn.com/components/article-toc/) (astro, lifetime licence): Sticky outline for long-form pages that tracks reading position automatically — the active section highlights itself as the reader scrolls, with no scroll-handler jank. Collapses to a tap-to-open "Jump to section" list on mobile instead of eating sidebar space that isn't there. - [Author Note Aside](https://ui.aidxn.com/components/author-note-aside/) (astro, lifetime licence): A first-person break-in-voice from the writer — indented, dashed-border margin note with a small avatar/initial and name, reading like a personal comment rather than an editorial callout or an enlarged quote from the body text. - [Chapter Divider](https://ui.aidxn.com/components/chapter-divider/) (astro, lifetime licence): A full section break for very long pieces — ebooks, multi-part guides, long docs — so the reader feels a real page turn between chapters instead of just another heading in the scroll. Numbered kicker, title and an optional standfirst, flanked by hairline rules on both themes. - [Citation Block](https://ui.aidxn.com/components/citation-block/) (astro, lifetime licence): A quoted external source formatted like a real citation — quote, author, linked publication name and an optional accessed-on date — for research pieces, reviews and well-sourced articles that quote other outlets. - [Glossary Term Tooltip](https://ui.aidxn.com/components/glossary-term-tooltip/) (astro, lifetime licence): An inline defined term that reveals its definition on hover and focus with a link through to the full glossary entry, so a reader who knows the jargon never breaks stride and one who doesn't gets the answer without leaving the paragraph. Keyboard-operable and dismissible with Escape, never a bare `title` tooltip. - [Inline Poll](https://ui.aidxn.com/components/inline-poll/) (astro, lifetime licence): A single-question poll dropped mid-article, with real radio-button options and a result bar that appears once the reader votes. Keyboard- and screen-reader-operable out of the box; your own API call owns persisting the vote and the caller supplies the tallies back in — this never fakes a backend. - [Annotated Image Figure](https://ui.aidxn.com/components/long-form-annotated-image-figure/) (astro, lifetime licence): A proper image block for long-form writing: real caption, optional source credit, and a click-to-enlarge view for diagrams and screenshots a narrow article column can't show at full detail. No lightbox dependency — the enlarge is a focus-trapped native dialog that closes on Escape and hands focus straight back. - [Footnote List](https://ui.aidxn.com/components/long-form-footnote-list/) (astro, lifetime licence): The end-of-article notes block for a sourced, academic-grade piece — numbered entries that each link back to the exact spot in the body that cited them, so a reader (and a screen reader) can jump to a note and jump straight back without losing their place. - [Series Navigation](https://ui.aidxn.com/components/long-form-series-navigation/) (astro, lifetime licence): Links a multi-part guide together so readers don't have to go hunting through search results to find the next instalment. Shows the series title, the reader's position ('Part 2 of 4'), and a previous/next pair that gracefully folds to one link at either end of the series. - [Prose & Code Split](https://ui.aidxn.com/components/prose-code-split/) (astro, lifetime licence): Runs the explanation and the code sample it's describing side by side instead of stacking a code block under a wall of text — prose on one side, a labelled, independently scrollable code box on the other. Drops to a single column on mobile with the explanation first. No syntax-highlighter dependency to maintain or theme. - [Pull Quote (Breakout)](https://ui.aidxn.com/components/pull-quote-breakout/) (astro, lifetime licence): A large extracted quote that visually breaks out of the article's text column — wider, centred, oversized type, its own top/bottom rules — so a feature or essay gets a real reading-pace rest stop instead of another paragraph. Centred or left-aligned, with an optional name and role for attribution. - [Readability Kit](https://ui.aidxn.com/components/readability-kit/) (astro, free/MIT): Four long-form scannability primitives — Callout (4 variants), a Key Takeaways TL;DR box, a large PullQuote and a reading-time pill. Branded via CSS custom properties, dark-mode aware, zero motion, zero dependencies. - [Reading Preferences Toggle](https://ui.aidxn.com/components/reading-preferences-toggle/) (astro, lifetime licence): Lets readers pick a comfortable text size and line width for a long article and remembers the choice for their next visit, instead of forcing one fixed measure on everyone. Labelled buttons and a radiogroup, never icon-only controls, and it degrades gracefully if storage is blocked. - [Reading Progress Bar](https://ui.aidxn.com/components/reading-progress/) (astro, lifetime licence): A thin fixed bar across the top of the page that fills as the reader moves through an article, giving a constant sense of how much is left. Driven entirely by IntersectionObserver thresholds rather than a scroll handler, so there's no layout thrashing on long pages. - [Related Articles Strip](https://ui.aidxn.com/components/related-articles/) (astro, lifetime licence): A "keep reading" strip for the end of a blog post — category, title and read time on each card, laid out as a grid on desktop and a horizontally-scrollable row on mobile instead of three full-height stacked cards. No JS, no dependencies. - [Share Rail](https://ui.aidxn.com/components/share-rail/) (astro, lifetime licence): A share toolbar for a long-form page — X, LinkedIn, email and copy-link. Sticky in the left gutter on desktop where there's margin to spare, collapses to a horizontal bar next to the byline on mobile. Copy-link confirms via an accessible live region instead of a toast that only sighted users see. - [Sidenote](https://ui.aidxn.com/components/sidenote/) (astro, lifetime licence): An inline footnote marker that reveals its note in a popover on click, instead of sending the reader to the bottom of the page and back. Fully keyboard operable — Enter/Space to open, Escape or an outside click to close. - [Tutorial Step List](https://ui.aidxn.com/components/tutorial-step-list/) (astro, lifetime licence): A numbered how-to walkthrough where every step gets its own anchored heading, optional code block, and optional screenshot, so a reader can bookmark a specific step or a support agent can link straight to the one that's failing instead of saying 'scroll down'. ### Growth & Conversion (35 — 0 free) Category page: https://ui.aidxn.com/components/category/growth-and-conversion/ - [Abandoned Cart Strip](https://ui.aidxn.com/components/abandoned-cart-strip/) (react, lifetime licence): A persistent top-docked bar that resurfaces a cart left behind on any route, showing item count and total with Resume and Clear actions — a cross-page return nudge, not a cart panel. - [App Install Prompt](https://ui.aidxn.com/components/app-install-prompt/) (react, lifetime licence): A bottom-docked banner that nudges mobile visitors to open or install the native app, with iOS/Android-aware copy and store links, and a dismissal that snoozes for two weeks instead of forever. - [Brand Capture Wizard Card](https://ui.aidxn.com/components/brand-capture-wizard-card/) (react, lifetime licence): BrandCaptureWizardCard — Velocity Growth Layer ──────────────────────────────────────────────────────────────────────────── A 3-step progressive-profiling lead form that captures enough brand material (business name, cat - [Community Join Strip](https://ui.aidxn.com/components/community-join-strip/) (react, lifetime licence): A platform-agnostic community invite strip showing member count and an optional live online-now indicator, rendered only when you pass real data. - [Content Upgrade Gate Card](https://ui.aidxn.com/components/content-upgrade-gate-card/) (react, lifetime licence): An inline named-resource email gate for blog and docs pages — it states the specific deliverable rather than a generic newsletter ask, and swaps to a real download link once captured. - [Countdown Urgency Banner](https://ui.aidxn.com/components/countdown-urgency-banner/) (react, lifetime licence): An inline deadline banner for a sale or launch window that counts down and then degrades gracefully to a plain closing message the instant it ends — never a broken negative-time state. Dismissible and remembered for the session. - [Coupon Code Reveal](https://ui.aidxn.com/components/coupon-code-reveal/) (react, lifetime licence): A claim-to-reveal discount code card with one-tap copy and an expiry note, so the offer reads as earned rather than just printed on the page. - [Demo Booking Card](https://ui.aidxn.com/components/demo-booking-card/) (react, lifetime licence): An inline day-and-time picker for booking a demo call, showing every slot in the visitor's own detected timezone so nobody has to do the conversion math themselves. Submits the chosen slot to any scheduling backend and ends in a confirmed state. - [Dismissible Promo Bar](https://ui.aidxn.com/components/dismissible-promo-bar/) (react, lifetime licence): A top-of-page announcement strip for a sale, launch or policy notice, with one link and a close button whose dismissal is remembered across visits so it never nags a visitor who already closed it. - [Email Verification Nudge](https://ui.aidxn.com/components/email-verification-nudge/) (react, lifetime licence): A thin, dismissible reminder that an address still needs confirming, with a resend button that enforces a real cooldown instead of letting users hammer the send button. - [Exit-Intent Offer Bar](https://ui.aidxn.com/components/exit-intent-offer-bar/) (react, lifetime licence): A last-chance discount bar that drops in from the top the moment a visitor looks ready to leave — exit-intent on desktop, fast scroll-up on mobile. Shows once per session with a cooldown, so it never nags a returning visitor. - [Feedback NPS Prompt](https://ui.aidxn.com/components/feedback-nps-prompt/) (react, lifetime licence): A self-contained NPS/satisfaction prompt that walks a visitor through picking a score, leaving an optional follow-up comment, and landing on a thank-you state — a complete inline feedback flow for the end of a feature, ticket, or post-purchase page, not just a bare rating control. - [Free Trial Progress Nudge](https://ui.aidxn.com/components/free-trial-progress-nudge/) (react, lifetime licence): A days-remaining trial card with one upgrade action, whose tone steps from calm to urgent as the account's real trial clock runs down so the nudge gets harder to ignore exactly when it should. - [Generated Preview Reveal](https://ui.aidxn.com/components/generated-preview-reveal/) (react, lifetime licence): GeneratedPreviewReveal — Velocity Growth Layer ──────────────────────────────────────────────────────────────────────────── Renders a mini, generated-site-style preview from a structured brand+copy record — the "reveal" half of a two-step lead flow (pair with `BrandCaptureWizardCard`). - [Inline Upgrade Prompt](https://ui.aidxn.com/components/inline-upgrade-prompt/) (react, lifetime licence): A contextual nudge toward a paid tier sized to live inside a dashboard panel, not interrupt it — no modal, no backdrop. Dismissible with the dismissal remembered per feature, keyboard-escapable, and configurable to either call an upgrade handler or link straight to billing. - [Lead Capture Drawer](https://ui.aidxn.com/components/lead-capture-drawer/) (react, lifetime licence): LeadCaptureDrawer — Velocity Growth Layer ──────────────────────────────────────────────────────────────────────────── A conversion-engineered lead-capture surface, ported from a full-screen modal into a right-docked panel (desktop) / three-snap bottom sheet (mobile) — the house pattern (see `commerce/CartDrawer`). - [Lead-Capture Popup](https://ui.aidxn.com/components/lead-capture-popup/) (react, lifetime licence): Exit-intent (desktop) plus scroll-up (mobile) lead popup. Once-per-session with a cooldown, accessible, dark-mode and dismiss-friendly. - [Onboarding Checklist](https://ui.aidxn.com/components/onboarding-checklist/) (react, lifetime licence): A setup-task checklist that tracks completion with a progress bar and word count, and gets out of the way on its own once every task is done. - [Post-Purchase Upsell Strip](https://ui.aidxn.com/components/post-purchase-upsell-strip/) (react, lifetime licence): An inline one-to-three item cross-sell strip for immediately after checkout, each a quick-add card with a single-tap Add action. - [Price Anchor Strip](https://ui.aidxn.com/components/price-anchor-strip/) (react, lifetime licence): A static banner anchoring your price against a reference price with a computed savings badge. Display-only — it pairs with, rather than duplicates, an interactive ROI calculator. - [Referral Invite Card](https://ui.aidxn.com/components/referral-invite-card/) (react, lifetime licence): A self-contained referral panel for a dashboard or account page — a copyable share link, an invite-by-email field, and a reward progress bar showing exactly how close the user is to their next unlock. Copy works without a toast library and confirms via screen-reader text, with a clipboard fallback for locked-down browsers. - [Referral Progress Tracker](https://ui.aidxn.com/components/referral-progress-tracker/) (react, lifetime licence): A status card for a referral program already in motion — invites sent against conversions, a tiered milestone ladder, and the next reward named in plain words, not just a bar. - [ROI Savings Calculator CTA](https://ui.aidxn.com/components/roi-savings-calculator-cta/) (react, lifetime licence): A two-slider ROI calculator that turns a visitor's own hours-and-cost numbers into an instant dollar figure, then hands them straight to a CTA with that figure attached — built for a pricing or landing page where the sell is personal savings, not a generic feature list. - [Rotating Social Proof Toast](https://ui.aidxn.com/components/rotating-social-proof-toast/) (react, lifetime licence): RotatingSocialProofToast — Velocity Growth Layer ──────────────────────────────────────────────────────────────────────────── A small, tasteful bottom-left toast that rotates short, credible social-proof lines. - [Scarcity / Stock Indicator](https://ui.aidxn.com/components/scarcity-stock-indicator/) (react, lifetime licence): An honest remaining-count or demand signal for a product, seat or event listing, driven entirely by the real numbers you pass in — no manufactured countdown, so it never says 'almost gone' about something that isn't. - [Share Incentive Card](https://ui.aidxn.com/components/share-incentive-card/) (react, lifetime licence): A share-to-unlock card that states the reward plainly and unlocks it the moment a visitor shares via WhatsApp, X, Facebook, email, native share or copy-link — no platform SDKs, just plain share URLs. - [Social-Proof Toast](https://ui.aidxn.com/components/social-proof-toast/) (react, lifetime licence): Bottom-left toast that rotates short, credible social-proof lines on an interval then stops. Pauses on hover, dismisses for the session, aria-live and safe-area aware. - [Spin-to-Win Email Capture](https://ui.aidxn.com/components/spin-to-win-email-capture/) (react, lifetime licence): A gamified email capture: enter an email, spin a CSS and SVG prize wheel, get a code. The outcome is weighted and decided before the spin starts; reduced motion skips the animation, not the fairness. - [Sticky CTA Bar](https://ui.aidxn.com/components/sticky-cta-bar/) (react, lifetime licence): Mobile and tablet bottom CTA bar that slides in past the hero, keeping the primary conversion one thumb-tap away. Dismissible and safe-area aware. - [Sticky Mobile Cta Bar](https://ui.aidxn.com/components/sticky-mobile-cta-bar/) (react, lifetime licence): StickyMobileCtaBar — Velocity Growth Layer ──────────────────────────────────────────────────────────────────────────── A persistent BOTTOM-docked CTA bar for mobile/tablet only (`lg:hidden`). - [Trial Expiry Lock Screen](https://ui.aidxn.com/components/trial-expiry-lock-screen/) (react, lifetime licence): The blocking screen that replaces the product once a trial runs out — upgrade is the one clear action, but data export and support stay reachable so a billing moment never reads as a trap. - [Trust Badge Strip](https://ui.aidxn.com/components/trust-badge-strip/) (react, lifetime licence): A restrained row of security, payment, and compliance signals for a checkout or pricing page — monochrome line icons and a hairline divider instead of a cluttered wall of brand-colour badges. Ships with a built-in icon set (lock, card, shield, refresh) so it needs no image assets, and labels/icons are fully swappable. - [Usage Limit Meter](https://ui.aidxn.com/components/usage-limit-meter/) (react, lifetime licence): Shows consumption against a plan limit — seats, API calls, storage — with tone that escalates toward an upgrade action as the account gets close to its cap. - [Value Proposition Icon Strip](https://ui.aidxn.com/components/value-proposition-icon-strip/) (react, lifetime licence): A reassurance row of three or four benefits — icon, heading, one line — built to sit quietly under a signup or purchase button and settle last-second doubt without competing with the CTA. - [Waitlist Signup Block](https://ui.aidxn.com/components/waitlist-signup-block/) (react, lifetime licence): An inline email-capture block for a pre-launch waitlist that leads with social proof (how many people have already joined) and tells the visitor exactly where they landed in the queue on success. ### Standard Data (56 — 0 free) Category page: https://ui.aidxn.com/components/category/standard-data/ - [Async Job Status List](https://ui.aidxn.com/components/async-job-status-list/) (react, lifetime licence): A list of async job rows with a colour-coded status badge, an indeterminate progress shimmer while a job is in flight, and a two-click armed delete so a slip of the finger can't discard work. - [Booking Availability Calendar](https://ui.aidxn.com/components/booking-availability-calendar/) (react, lifetime licence): Two-month booking calendar with per-date availability dots. - [Controller Mapping Diagram](https://ui.aidxn.com/components/controller-mapping-diagram/) (astro, lifetime licence): primary-* / accent-* with your own colour scale. - [Data Sync Binding List](https://ui.aidxn.com/components/data-sync-binding-list/) (react, lifetime licence): A list of data-source sync bindings — last-synced time, row count, cache TTL, and an inline Resync action. - [Key Mapping Grid](https://ui.aidxn.com/components/key-mapping-grid/) (astro, lifetime licence): primary-* / accent-* with your own colour scale. - [Market Movers List](https://ui.aidxn.com/components/market-movers-list/) (react, lifetime licence): A ranked market-movers / scanner list: rank, symbol, price, a colour + arrow-coded change badge, a gainers/losers toggle, a filter chip, and a per-row watch action. - [Pipeline Flow Diagram](https://ui.aidxn.com/components/pipeline-flow-diagram/) (astro, lifetime licence): primary-* / accent-* with your own colour scale. - [Price Range Bar](https://ui.aidxn.com/components/price-range-bar/) (astro, lifetime licence): primary-* / accent-* with your own colour scale. - [Advanced Filter Builder](https://ui.aidxn.com/components/standard-advanced-filter-builder/) (react, lifetime licence): A query-builder for data tables — stack field/operator/value condition rows and combine them with a shared AND/OR joiner, so users compose multi-condition filters without writing a query language. - [Audit Log List](https://ui.aidxn.com/components/standard-audit-log-list/) (astro, lifetime licence): A compliance-grade record of who did what and when, grouped under calendar-day headers with a severity tag per row and a details disclosure that reveals the structured change data only when someone needs it — built for security and admin audit trails, not a social activity stream. - [Standard Bulk Assign Bar](https://ui.aidxn.com/components/standard-bulk-assign-bar/) (react, lifetime licence): StandardBulkAssignBar — the docked bar that appears once rows are selected and routes them all to one owner, one date, in one action. - [Bulk Selection Toolbar](https://ui.aidxn.com/components/standard-bulk-selection-toolbar/) (react, lifetime licence): Checkbox row selection for a data table with a correctly indeterminate select-all, a live selected count, and a contextual action bar that appears only once something is selected, so bulk edit, export, or delete never need a separate mode. - [Cell Detail Popover](https://ui.aidxn.com/components/standard-cell-detail-popover/) (react, lifetime licence): Turns a truncated table cell into a focus-trapped popover showing the full value with a one-click copy button, so long IDs, JSON blobs or notes never need their own column width. - [Column Visibility Menu](https://ui.aidxn.com/components/standard-column-visibility-menu/) (react, lifetime licence): A settings popover for showing or hiding table columns, with the chosen layout remembered between visits so people don't have to rebuild their view every time they come back. - [Standard Coverage Heat Bar](https://ui.aidxn.com/components/standard-coverage-heat-bar/) (react, lifetime licence): A horizontal heat-intensity bar chart for coverage or activity density — one bar per label (day, region, team) coloured by how close its value is to `max`. - [Standard Coverage Meter List](https://ui.aidxn.com/components/standard-coverage-meter-list/) (react, lifetime licence): StandardCoverageMeterList — one row per region (or team, or queue) showing how much of its demand is actually covered, against a target line. - [Data Freshness Indicator](https://ui.aidxn.com/components/standard-data-freshness-indicator/) (astro, lifetime licence): Shows when a dataset was last updated in plain words, flags it as stale past a threshold you set, and exposes a Refresh action — so a dashboard never leaves a viewer guessing whether the numbers on screen are current. - [Data Grid Skeleton](https://ui.aidxn.com/components/standard-data-grid-skeleton/) (astro, lifetime licence): Shimmering placeholder rows sized to match the real table's columns, so a data grid has zero layout shift the moment live rows arrive. - [Standard Day Plan Timeline](https://ui.aidxn.com/components/standard-day-plan-timeline/) (react, lifetime licence): StandardDayPlanTimeline — one person's day on a single hour rail, with the gaps drawn as first-class blocks rather than empty space. - [Description List](https://ui.aidxn.com/components/standard-description-list/) (astro, lifetime licence): Semantic record details in stacked or two-column layouts with optional field hints and empty-value text. - [Empty State Block](https://ui.aidxn.com/components/standard-empty-state-block/) (astro, lifetime licence): An icon, headline, short explanation and a primary action for the moment a table or list has nothing in it — so empty is a prompt, not a dead end. - [Expandable Tree Table](https://ui.aidxn.com/components/standard-expandable-tree-table/) (react, lifetime licence): A data table for hierarchical records — folders, org charts, category trees — where any row can expand to reveal its children in place, indentation and a disclosure arrow showing depth without leaving the spreadsheet-like layout. - [Export Button With Progress](https://ui.aidxn.com/components/standard-export-button-with-progress/) (react, lifetime licence): A single export button that turns into a determinate progress bar while the job runs, then resolves into a download link or an inline retryable error — so long exports never leave users staring at a frozen button. - [Filter Chip Bar](https://ui.aidxn.com/components/standard-filter-chip-bar/) (react, lifetime licence): Active filters shown as removable chips with a clear-all action, wrapping to extra rows instead of scrolling off so long filter sets stay scannable. - [Standard Geocode Status Badge](https://ui.aidxn.com/components/standard-geocode-status-badge/) (react, lifetime licence): StandardGeocodeStatusBadge — the small inline indicator for "do we actually know where this is?", plus an optional batch progress bar for the run that resolves a whole list. - [Grouped Summary Table](https://ui.aidxn.com/components/standard-grouped-summary-table/) (react, lifetime licence): A data table whose rows collapse into named groups, each with its own subtotal row and a grand total footer — the spreadsheet-pivot view buyers expect for cohort, region, or category reporting without a pivot-table library. - [Histogram Chart](https://ui.aidxn.com/components/standard-histogram-chart/) (astro, lifetime licence): Responsive SVG histogram for numeric arrays with configurable bins, accessible summary, labelled counts, and no chart dependency. - [Import Column Mapper](https://ui.aidxn.com/components/standard-import-column-mapper/) (react, lifetime licence): Lets people map columns from an uploaded file onto your destination fields, with a sample value per column and clear wording for anything left unmapped or assigned twice — so an import gets caught before it runs, not after it fails. - [Inline Editable Table](https://ui.aidxn.com/components/standard-inline-editable-table/) (react, lifetime licence): Edit a data grid in place: click or press Enter to open a cell, Tab commits the change and advances to the next field, Escape cancels back to the original value. No drawer or dialog round trip for quick corrections. - [Standard Job Scheduling Board](https://ui.aidxn.com/components/standard-job-scheduling-board/) (react, lifetime licence): StandardJobSchedulingBoard — a column-per-day (or per-crew, or per-stage) board for moving work between buckets, with capacity shown on each column header rather than discovered after the drop. - [JSON Tree Viewer](https://ui.aidxn.com/components/standard-json-tree-viewer/) (react, lifetime licence): Expandable nested JSON inspector with type-aware values, configurable initial depth, and native keyboard-operable disclosure buttons. - [Standard Map Layer Toggles](https://ui.aidxn.com/components/standard-map-layer-toggles/) (react, lifetime licence): StandardMapLayerToggles — the row of pills that sits over a map or canvas and switches overlays on and off. - [Metadata Panel](https://ui.aidxn.com/components/standard-metadata-panel/) (react, lifetime licence): Label/value rows for an object detail view — IDs, keys, timestamps — with a one-click copy button on every value so nobody has to select-and-drag. - [Standard Ops Stat Banner](https://ui.aidxn.com/components/standard-ops-stat-banner/) (react, lifetime licence): StandardOpsStatBanner — the headline row for a wall-mounted or always-open ops dashboard: a handful of numbers, each with its trend and its share of a target, sized to be read from across a room. - [Pagination Controls](https://ui.aidxn.com/components/standard-pagination-controls/) (react, lifetime licence): Page navigation with a rows-per-page selector and a live "showing X-Y of Z" readout, so users can jump pages or change density without losing their place. - [Query Result Stats Bar](https://ui.aidxn.com/components/standard-query-result-stats-bar/) (astro, lifetime licence): The strip above a results table that states what the query returned — row count, how long it took, and the filters applied — so people trust the table below without re-reading every filter chip themselves. - [Standard Ranked Slot Card](https://ui.aidxn.com/components/standard-ranked-slot-card/) (react, lifetime licence): StandardRankedSlotCard — a ranked list of suggested options with a commit button on each, and a per-card state machine for the commit. - [Record Detail Header](https://ui.aidxn.com/components/standard-record-detail-header/) (react, lifetime licence): The top banner of any single-record page — title, identifiers with one-click copy, a status pill, and the primary and secondary actions for that record — so every detail view opens with the same orientation cues instead of a bespoke header each time. - [Standard Resizable Split Pane](https://ui.aidxn.com/components/standard-resizable-split-pane/) (react, lifetime licence): A draggable two-pane split layout — e.g. - [Standard Route Plan List](https://ui.aidxn.com/components/standard-route-plan-list/) (react, lifetime licence): StandardRoutePlanList — an ordered list of stops on a route, with the travel leg drawn between them rather than stated beside them. - [Standard Route Recommendation List](https://ui.aidxn.com/components/standard-route-recommendation-list/) (react, lifetime licence): A ranked list of scheduling recommendations for a new stop — e.g. - [Row Reorder List](https://ui.aidxn.com/components/standard-row-reorder-list/) (react, lifetime licence): A drag-to-reorder list of rows with a full keyboard equivalent — Alt+Up/Down or move buttons — and a spoken position announcement on every move, for ordered data like pipeline stages or priority queues. - [Saved Views Selector](https://ui.aidxn.com/components/standard-saved-views-selector/) (react, lifetime licence): A dropdown for switching between named table views, with save-current-as-new and rename-in-place built in, so users can keep several filtered/sorted layouts ready without rebuilding them each time. - [Sortable Data Table](https://ui.aidxn.com/components/standard-sortable-data-table/) (react, lifetime licence): Click any column header to sort a dataset ascending or descending, with a sticky header and its own horizontal scroll so wide tables never widen the page on mobile. - [Standard Staff Availability Grid](https://ui.aidxn.com/components/standard-staff-availability-grid/) (react, lifetime licence): StandardStaffAvailabilityGrid — people down the side, days across the top, one editable cell per person per day. - [Standard Staff Utilisation Grid](https://ui.aidxn.com/components/standard-staff-utilisation-grid/) (react, lifetime licence): Weekly staff-by-region availability grid: one row per staff member, one micro-cell per morning/afternoon/evening period per day, shaded by utilization — the shape a booking/dispatch admin reaches for instead of a spreads - [Standard System Health Bar](https://ui.aidxn.com/components/standard-system-health-bar/) (react, lifetime licence): A compact status strip for an ops dashboard reporting the health of each backing integration — connected, degraded, or down — plus a last-updated timestamp and any standing warning notes. - [Standard Territory Legend](https://ui.aidxn.com/components/standard-territory-legend/) (react, lifetime licence): StandardTerritoryLegend — the key for a choropleth or status-banded map. - [Standard Territory Map](https://ui.aidxn.com/components/standard-territory-map/) (react, lifetime licence): StandardTerritoryMap — a choropleth territory map drawn as plain inline SVG. - [Text Diff Viewer](https://ui.aidxn.com/components/standard-text-diff-viewer/) (astro, lifetime licence): Shows exactly what changed between two blocks of text — side-by-side or as a single unified list — with every added or removed line carrying a glyph and a screen-reader label so the change is readable without relying on colour. - [Standard Time Slot Heat Grid](https://ui.aidxn.com/components/standard-time-slot-heat-grid/) (react, lifetime licence): StandardTimeSlotHeatGrid — a days x time-slots grid shaded by how good each slot is, for picking when to schedule something rather than reading what is already scheduled. - [Standard Traffic Light Verdict](https://ui.aidxn.com/components/standard-traffic-light-verdict/) (react, lifetime licence): A three-light RAG (red/amber/green) verdict indicator, drawn as inline SVG so it never depends on an icon package. - [Trade Position Row](https://ui.aidxn.com/components/trade-position-row/) (react, lifetime licence): A single trade/position row for a journal or positions list — ticker, open/closed status, flip count, entry/current/hold mini-grid and a colour + arrow-coded P&L, with a `compact` variant for dense list views. - [Transcript Viewer](https://ui.aidxn.com/components/transcript-viewer/) (react, lifetime licence): Scrollable transcript with a timestamp and speaker per line. - [Watchlist Ticker Card](https://ui.aidxn.com/components/watchlist-ticker-card/) (react, lifetime licence): A compact watchlist card — symbol, name, price, a colour + arrow-coded change badge, and an inline SVG sparkline built from a plain number array. - [Week Strip Agenda](https://ui.aidxn.com/components/week-strip-agenda/) (react, lifetime licence): A horizontal day-strip selector paired with an agenda list for whichever day is active — the "pick a day, see what's on it" pattern scheduling and booking apps reach for instead of a full month grid. ### Standard Navigation (32 — 0 free) Category page: https://ui.aidxn.com/components/category/standard-navigation/ - [Section Subheader Nav](https://ui.aidxn.com/components/section-subheader-nav/) (astro, lifetime licence): SectionSubheaderNav — thin sticky bar that docks directly under a main header: a breadcrumb trail on the left, and either a section's own sub-nav or a single "Back to X" link on the right. - [Account Menu Nav](https://ui.aidxn.com/components/standard-account-menu-nav/) (react, lifetime licence): A persistent app-shell identity menu: avatar trigger, profile header, nav links with aria-current and a pinned sign-out. Reads the current route per render so it never remounts on navigation. - [Anchor Scroll-Spy Nav](https://ui.aidxn.com/components/standard-anchor-scroll-spy-nav/) (react, lifetime licence): In-page section links that highlight themselves as the reader scrolls, so a long docs or landing page always shows where you are without you having to hunt for it. Tracks visibility with IntersectionObserver, never a scroll handler, so it costs nothing on long pages. - [App Launcher Grid](https://ui.aidxn.com/components/standard-app-launcher-grid/) (react, lifetime licence): A 'waffle' product switcher popover for suites that have grown past one nav bar into several standalone apps — a grid of icon tiles for every section, the current one marked, fully arrow-key navigable and closes cleanly on outside click or route change. - [Back Navigation Header](https://ui.aidxn.com/components/standard-back-navigation-header/) (react, lifetime licence): Header for a drill-down screen: a real back link to the parent (not a history hack), the page title and optional subtitle, and an overflow menu for secondary actions that don't need a permanent button. - [Breadcrumb Trail](https://ui.aidxn.com/components/standard-breadcrumb-trail/) (react, lifetime licence): Wayfinding trail for deep page hierarchies that collapses middle segments behind an ellipsis on narrow screens, keeping the root and current page always visible, with the current page shown as text rather than a dead link. - [Command Palette Launcher](https://ui.aidxn.com/components/standard-command-palette/) (react, lifetime licence): A ⌘K search trigger that opens a fuzzy-filterable command list for jumping anywhere or running any action without leaving the keyboard. Hand-rolled matching, no dependency, with full focus trapping and keyboard selection out of the box. - [Filter & Sort Toolbar](https://ui.aidxn.com/components/standard-filter-sort-toolbar/) (react, lifetime licence): The control bar that sits above any listing: result count, a sort dropdown, a List/Grid view switch, and a filter trigger badged with how many filters are active. This sets the state; pair it with a filter-chip row if you also need to show which filters are applied. - [Floating Section Dock](https://ui.aidxn.com/components/standard-floating-section-dock/) (react, lifetime licence): A small floating pill for jumping between named sections on long single-page layouts — stays a quiet handle near the top of the page and expands into labelled section dots once the reader scrolls past the hero. - [Global Search Nav](https://ui.aidxn.com/components/standard-global-search-nav/) (react, lifetime licence): An always-docked header search combobox with grouped live suggestions and a persisted recent-query list. - [Infinite Scroll Sentinel](https://ui.aidxn.com/components/standard-infinite-scroll-sentinel-nav/) (react, lifetime licence): The load-more boundary at the end of a list: an invisible IntersectionObserver trigger pages in more results automatically, backed by a real "Load more" button for anyone whose browser blocks it, and a calm end-of-list message once there's nothing left to fetch. - [Keyboard Shortcuts Help Panel](https://ui.aidxn.com/components/standard-keyboard-shortcuts-help/) (react, lifetime licence): A reference panel listing every keyboard shortcut your app supports, grouped by area, opened with a single press of ? like Linear and GitHub — without hijacking the key while someone's typing in a search box or form field. - [Locale / Region Switcher](https://ui.aidxn.com/components/standard-locale-region-switcher/) (react, lifetime licence): A language-and-region picker for footers and headers that shows the current selection as plain text, never a flag — flags map to countries, not languages, and break down the moment one language spans several regions. - [Mobile Bottom Tab Bar](https://ui.aidxn.com/components/standard-mobile-bottom-tab-bar/) (react, lifetime licence): Fixed, app-style bottom navigation for 3-5 top-level destinations on phone-width screens. Clear active state, icon + label pairing, and safe-area padding so it never collides with an iOS home indicator or Android gesture bar. - [Nav With Count Badges](https://ui.aidxn.com/components/standard-nav-count-badges/) (react, lifetime licence): A sidebar nav list that surfaces live counts next to each item — unread messages, open tickets, new records — so people know where to look first without opening every section. Counts past 99 collapse to a clean "99+" instead of blowing out the rail, and empty counts hide the badge entirely. - [Notification Center Nav](https://ui.aidxn.com/components/standard-notification-center-nav/) (react, lifetime licence): A bell trigger with an unread badge opening a New and Earlier notification feed, with mark-all-read and a persisted last-read marker. - [Open Tabs Strip Nav](https://ui.aidxn.com/components/standard-open-tabs-strip-nav/) (react, lifetime licence): A browser-style strip of open records for multi-document app shells: each tab closable, order persisted, overflow scrolling with edge fades. - [Progress Breadcrumb](https://ui.aidxn.com/components/standard-progress-breadcrumb/) (react, lifetime licence): A breadcrumb-shaped strip that doubles as a flow tracker for checkout, onboarding or any multi-page sequence — completed steps are real links back, the current step is clearly marked, and steps still ahead are genuinely non-interactive until the user gets there. Compact enough for a header bar, where a full step-circle wizard would be overkill. - [Recent Items Switcher](https://ui.aidxn.com/components/standard-recent-items-switcher/) (react, lifetime licence): A small "Recent" trigger that drops a quick-switch list of the records someone just had open — the last deal, ticket or document — so jumping back takes one click instead of a search. Full keyboard support (arrow keys, Enter, Home/End) with no search box at all, which keeps it a fast recall tool rather than a command launcher. - [Standard Region Filter Toolbar](https://ui.aidxn.com/components/standard-region-filter-toolbar/) (react, lifetime licence): StandardRegionFilterToolbar — the control strip above a map/list ops view: search, a date stepper, multi-select region chips, and a map/list/split view switch, in one row that collapses sensibly on a phone. - [Related Links Grid](https://ui.aidxn.com/components/standard-related-links-grid/) (astro, lifetime licence): End-of-page block of onward destinations — a heading and a responsive grid of fully-clickable cards, each with a short description and a hover arrow. Static markup, no client JS, built for "related articles" and "keep exploring" footers. - [Scrollable Section Tabs](https://ui.aidxn.com/components/standard-scrollable-section-tabs/) (react, lifetime licence): A horizontally scrollable tab strip for pages with more sections than fit a narrow screen — edge fade masks hint there's more to scroll, the active tab scrolls itself into view on selection, and the overflow stays contained inside the strip instead of widening the page. - [Segmented Control](https://ui.aidxn.com/components/standard-segmented-control/) (react, lifetime licence): A compact 2-4 option switch for flipping between view modes — List/Grid, Day/Week/Month — rendered as one track with a sliding selection pill instead of separate buttons. Fully arrow-key operable as a radio group. - [Sidebar Nav with Collapsible Groups](https://ui.aidxn.com/components/standard-sidebar-nav/) (react, lifetime licence): App sidebar organised into collapsible sections, each holding its own links. Highlights the active route, auto-opens the section a deep link lands in, and keeps every other section's open/closed state exactly as the user left it across route changes. - [Skip Links](https://ui.aidxn.com/components/standard-skip-links/) (astro, lifetime licence): The "skip to content" links keyboard and screen reader users expect as the first stop on a page, styled to match your brand instead of showing as an unstyled browser-default blue link when focused. - [Step Dots Nav](https://ui.aidxn.com/components/standard-step-dots-nav/) (react, lifetime licence): A compact clickable dot/pill position indicator for slide decks, galleries and onboarding screens — the active dot stretches into a pill, every dot is a real button with roving keyboard focus, and position is announced to screen readers rather than shown by colour alone. - [Sticky Section Progress Nav](https://ui.aidxn.com/components/standard-sticky-section-progress-nav/) (react, lifetime licence): A horizontal section rail that docks under the header once the page scrolls past it, highlights whichever section is actually in view, and shows how far through the whole page the reader has gotten with a thin fill — built for long docs and product pages where a sidebar doesn't fit. - [Tab Bar — Animated Underline](https://ui.aidxn.com/components/standard-tab-bar-underline/) (react, lifetime licence): Horizontal tab bar with a sliding underline that glides to the active tab's measured position, full Left/Right/Home/End keyboard navigation, and panels wired with correct ARIA tabs semantics. - [Tree Navigation](https://ui.aidxn.com/components/standard-tree-navigation/) (react, lifetime licence): Hierarchical documentation or file navigation with ARIA tree semantics, branch disclosure, current-page state, and arrow-key focus movement. - [Vertical Icon Rail](https://ui.aidxn.com/components/standard-vertical-icon-rail/) (react, lifetime licence): A narrow left-docked rail of icon-only buttons for app shells — hover or focus reveals a tooltip naming each destination, and a solid active bar shows where you are without spending any horizontal space on labels. - [Wizard Stepper Nav](https://ui.aidxn.com/components/standard-wizard-stepper-nav/) (react, lifetime licence): Numbered step navigation for checkout, onboarding and signup flows, with clear complete/current/upcoming states and a filling connector line. Collapses to a compact 'Step N of M' progress bar on phone so nothing truncates. - [Workspace Switcher Nav](https://ui.aidxn.com/components/standard-workspace-switcher-nav/) (react, lifetime licence): An org or workspace switcher combobox with a searchable keyboard-navigable listbox, a pinned create action and the last pick persisted. ### Standard Overlays & Menus (34 — 0 free) Category page: https://ui.aidxn.com/components/category/standard-overlays-and-menus/ - [Panel Dock Drawer](https://ui.aidxn.com/components/panel-dock-drawer/) (react, lifetime licence): A right-docked panel manager for multiple drafts at once. - [Alert Dialog](https://ui.aidxn.com/components/standard-alert-dialog/) (react, lifetime licence): Confirmation dialog with least-destructive initial focus, async action support, Escape cancellation, and focus restoration. - [Anchored Callout Badge](https://ui.aidxn.com/components/standard-anchored-callout-badge/) (react, lifetime licence): A small marker pinned to a live element to flag something new or needing attention, that opens its explanation on click rather than hover. The badge itself persists until the user explicitly dismisses it, so a flagged field stays flagged until actually read, not until the cursor happens to pass over it. - [Standard Assignment Drawer](https://ui.aidxn.com/components/standard-assignment-drawer/) (react, lifetime licence): StandardAssignmentDrawer — the right-docked panel for assigning one record: who, where, what state, and a note, with the record's context kept visible beside the fields instead of behind a dimmed modal. - [Bottom Sheet (Snap Points)](https://ui.aidxn.com/components/standard-bottom-sheet-snap-points/) (react, lifetime licence): Mobile data-entry sheet with three drag snap points — peek, half and full — so the page stays reachable behind it instead of a full-screen takeover. Drag by pointer or step by keyboard, Escape to close, focus returns to the trigger. - [Bulk Selection Action Bar](https://ui.aidxn.com/components/standard-bulk-selection-action-bar/) (react, lifetime licence): A floating bottom toolbar that appears only while a list selection is non-empty, announcing the count through a live region. Non-modal by design so the list stays operable underneath. - [Coach-Mark Tour Step](https://ui.aidxn.com/components/standard-coach-mark-tour-step/) (react, lifetime licence): One step of a product walkthrough — a spotlight ring that tracks a live target element, a callout card with a step counter and Next/Back/Skip, fully keyboard operable. Escape always exits the whole tour, never just the current step, so a new user is never stuck in a walkthrough with no way out. - [Comment Thread Popover](https://ui.aidxn.com/components/standard-comment-thread-popover/) (react, lifetime licence): A pin-anchored threaded comment popover with a real composer and single-open coordination across sibling pins. - [Context Menu](https://ui.aidxn.com/components/standard-context-menu/) (react, lifetime licence): Right-click and long-press menu for an item, grouped into labelled sections with arrow-key and typeahead navigation, disabled items, and automatic edge flipping so it never opens off-screen. - [Date Range Popover](https://ui.aidxn.com/components/standard-date-range-popover/) (react, lifetime licence): Two-month calendar in a popover for picking a start/end range, with one-click presets for today, last 7/30 days, and this/last month. - [Destructive Confirm Dialog](https://ui.aidxn.com/components/standard-destructive-confirm-dialog/) (react, lifetime licence): Stops an accidental delete click by keeping the destructive action disabled until the person types the exact resource name back, with full keyboard and screen-reader support. - [Dropdown Action Menu](https://ui.aidxn.com/components/standard-dropdown-action-menu/) (react, lifetime licence): Action menu button with arrow and typeahead navigation, disabled items, separators, Escape close, and focus return. - [Global File Drop Overlay](https://ui.aidxn.com/components/standard-global-file-drop-overlay/) (react, lifetime licence): A full-viewport drag-and-drop surface listening on the window, shown only while a file drag is over the app. - [Hover Card](https://ui.aidxn.com/components/standard-hover-card/) (react, lifetime licence): Rich preview panel that appears when someone hovers or focuses a link or avatar — a bio card, a profile summary, an account snapshot — with open and close delays so it never flashes on a passing pointer. - [Inline Notification Banner](https://ui.aidxn.com/components/standard-inline-notification-banner/) (react, lifetime licence): Full-width, page-level notice bar for outages, trial warnings or a system-wide success confirmation — distinct from a boxed in-content alert card. Pairs an icon with a text severity label so meaning never rides on colour alone, carries an optional action button alongside dismiss, and announces through an aria-live region set to polite for info/success and assertive for warning/error. - [Standard Job Assignment Drawer](https://ui.aidxn.com/components/standard-job-assignment-drawer/) (react, lifetime licence): A right-docked drawer for assigning a job or task to a team member: a job summary header, a picker list of candidates with their current availability, and a notes field. - [Lightbox Gallery Overlay](https://ui.aidxn.com/components/standard-lightbox-gallery-overlay/) (react, lifetime licence): Full-screen viewer for a photo grid — click any thumbnail to open on that frame, then step through with arrows, keyboard or a swipe while a counter and dot rail always show exactly where in the set you are. - [Mobile Filter Sheet](https://ui.aidxn.com/components/standard-mobile-filter-sheet/) (react, lifetime licence): Bottom sheet for narrowing a product or search list — grouped checkbox filters with a live 'show N results' count on the apply button, so shoppers see the effect of a selection before it's committed, and reset undoes the whole draft in one tap. - [Modal Dialog](https://ui.aidxn.com/components/standard-modal-dialog/) (react, lifetime licence): Accessible native modal dialog with inert background, Escape close, backdrop dismissal, and focus restoration. - [Multi-Step Dialog](https://ui.aidxn.com/components/standard-multi-step-dialog/) (react, lifetime licence): A setup or checkout dialog that carries its own wizard flow instead of forcing a custom build: progress rail, Back/Next footer, per-step validation gating, and focus moved to the new step's heading on every change, with focus returned to the trigger on close. - [Nested Submenu Menu](https://ui.aidxn.com/components/standard-nested-submenu-menu/) (react, lifetime licence): Dropdown menu whose items open child menus of their own, any number of levels deep — a 'File > Export > Image' pattern. Up/Down traverse the current level, Right opens a submenu and focuses its first item, Left closes it and returns focus to the parent item, Escape closes every open level at once. Each submenu flips to the opposite side when it would render off the viewport edge. - [Onboarding Checklist Panel](https://ui.aidxn.com/components/standard-onboarding-checklist-panel/) (react, lifetime licence): A corner-docked getting-started checklist that collapses to a progress-ring badge, with its state persisted and a once-only completion callback. - [Popover with Arrow](https://ui.aidxn.com/components/standard-popover-arrow/) (react, lifetime licence): Click-triggered panel for small interactive content — a quick filter, a mini form, a colour picker — with an arrow that stays pinned to the trigger, flips side when it would run off the viewport, and traps focus inside while it's open. - [Reaction Picker Popover](https://ui.aidxn.com/components/standard-reaction-picker-popover/) (react, lifetime licence): An emoji reaction grid popover with a persisted frequently-used row and two-dimensional arrow-key navigation. - [Standard Region Assignment Popover](https://ui.aidxn.com/components/standard-region-assignment-popover/) (react, lifetime licence): A small anchored popover for assigning one team member to a territory for a given day, with a status (available, on leave, sick, …) and a free-text note. - [Searchable Select Menu](https://ui.aidxn.com/components/standard-searchable-select-menu/) (react, lifetime licence): Type-to-filter dropdown for picking one item out of a long list from a toolbar or filter bar, with full keyboard selection and typeahead highlighting. - [Share Sheet Overlay](https://ui.aidxn.com/components/standard-share-sheet-overlay/) (react, lifetime licence): Bottom-anchored share sheet with social and messaging targets plus a copy-link action, built on plain outbound URLs so it needs no platform SDK or API key. - [Sheet With Tabs](https://ui.aidxn.com/components/standard-sheet-with-tabs/) (react, lifetime licence): A right-docked sheet for viewing one record's several facets — details, activity, files — as tabs instead of one long scroll, with arrow-key tab navigation and the open tab remembered across close and reopen. A content organiser for an existing record, not a drafting surface like the slide-over drawer. - [Slide-Over Drawer](https://ui.aidxn.com/components/standard-slide-over-drawer/) (react, lifetime licence): Right-docked drawer for data entry that keeps the page behind it visible and interruptible, with a collapse-to-dock tab so a draft stays open while the user keeps working elsewhere. Trapped focus, locked scroll, Escape to close, focus returns to the trigger. - [Split Button Menu](https://ui.aidxn.com/components/standard-split-button-menu/) (react, lifetime licence): One-click primary action fused to a dropdown of its close relatives — 'Save' plus a chevron for 'Save as draft' or 'Save and publish' — so the common path stays a single tap while the variants are a keystroke away, with each half independently announced to assistive tech. - [Stacked Sheet Layers](https://ui.aidxn.com/components/standard-stacked-sheet-layers/) (react, lifetime licence): Lets a sheet open another sheet on top of itself for a drill-down flow — edit a customer, open their billing history, open one invoice — with every parent layer still visibly behind the newest one and a back path that unwinds exactly one step at a time. - [Toast Stack](https://ui.aidxn.com/components/standard-toast-stack/) (react, lifetime licence): App-wide notification queue triggered from a hook anywhere in the tree: caps how many toasts show at once, holds the rest in a queue, pauses auto-dismiss on hover or focus, and separates urgent from routine variants into the correct screen-reader announcement channel. - [Tooltip](https://ui.aidxn.com/components/standard-tooltip/) (react, lifetime licence): Hover and focus-triggered hint for icon buttons and truncated labels that waits a beat before appearing, repositions itself away from viewport edges, and is reachable and dismissible from the keyboard — unlike the native `title` attribute it replaces. - [Undo Snackbar](https://ui.aidxn.com/components/standard-undo-snackbar/) (react, lifetime licence): A one-at-a-time bar for an action already taken — delete, archive, send — with a visible countdown and an Undo button that stays keyboard-reachable the whole window. Hovering or focusing it pauses the clock. Distinct from the toast queue: this holds exactly one reversible action, not a stream of notices. ## Free components (MIT) The 40 components below are MIT licensed and available as public source to copy into a project. Copy guide: https://github.com/aidenwood/velocity-x-free-components#copy-into-an-existing-project - accordion-faq - animated-stats - auto-fit-grid - avatar-group - badge-tag - bento-card-shells - bento-grid-4 - bento-grid-six - breadcrumbs - button-set - center-box - cluster - contact-form-simple - divider - empty-state - expandable-card - flow-lines - grid-12 - gutter-wrapper - inline-alert - loading-skeleton - login-form - logo-ticker - maze-growth - news-ticker-horizontal - newsletter-card - newsletter-inline - pagination - presence - prose-container - readability-kit - section-header - spacer - split-fifty - stack - stat-ticker - stepper - text-marquee - three-column-feature-row - toggle-switch-row _Total recorded versions: 1312. Unique slugs: 556. The Velocity CLI is not published on npm yet._