Kobra Commerce

Oversized display headline on the canvas with eyebrow, sub, one button and one text link. Optional three-product row, first tile large.

50/50 text and featured product image. Image on either side, or tilted -4deg with a second product card overlapping.

Edge-to-edge product or lifestyle image with the headline overlaid on a token scrim. Bottom-start, centered, or with a ticker.

A huge display line scrolling as a marquee, filled and outlined alternating, with a product strip beneath. Pauses on hover, static under reduced motion.

Solid ink title passing behind a hairline-framed garment well. The window variant frames the product in a retro OS title-bar card.

12-column editorial hero: headline across 8 columns, a .micro caption column, three product tiles of differing sizes.

Kobra video full-bleed (muted, looping) with headline and CTA, or split with the video in one half. Poster is the fallback when there is no source or reduced motion is on.

Large images in a horizontal scroll-snap strip with numbered hotspots; each opens a mini product card (Kobra popover and marker). The grid variant lays the looks out as a mosaic.

Ink bar (wraps to two lines on narrow screens, balanced, instead of truncating): static, marquee of several messages, or a tabular drop countdown. Dismissible, remembered in localStorage.

Brand, links, product search (Kobra command-menu), cart count, and a Kobra sheet menu on mobile. Minimal, centered, mega (navigation-menu with collection images), and sticky transparent-to-solid.

Heading and up to six display-l lines with a hairline between each. List, two-column, or numbered.

Generic CSS marquee of text, logos or product thumbs. Pauses on hover and focus, static under reduced motion. The Marquee primitive is exported for other blocks.

Kobra logo-carousel wrapper for 'as seen in' or the brand network. Text marks fall back to the brand display face.

Email capture with pending, success and error states the Kobra way: label turns out, spinner turns in, aria-busy, never disabled. Inline, stacked, or with an image.

Link columns, brand network links (plain dofollow anchors from data/network.json), make-your-own CTA, legal line and theme toggle. Columns, compact, or oversized wordmark.

Up to two quote cards with .micro attribution. Renders nothing when empty (no invented proof).

Heading, two short paragraphs and an image, or text only.

Closing offer band: one heading, one sentence, one button. Surface, inverted (ink), or with a product.

A message thread of the brand's lines: bubbles alternate sides with initials avatars, products ride along as linked attachments, typing indicator at the end. Group chat, DM, or receipts with read marks and reactions.

The atom: image with hover swap, title, line, price (from-range), color dots, badge and a quick-view button. Five faces, plus a skeleton and a sold-out state.

Responsive grid of product cards with density 2 to 5, collection filter chips, sort, designed empty and loading states and load-more. Uniform, masonry (first tile spans 2) and with-sidebar.

Heading, view-all link and a horizontal Kobra carousel of product cards. Cards, oversized (one card 80vw on mobile) and with-intro-tile.

One tile per collection with the first product's image, label and count. Grid, row of chips (the shop-by chips) and oversized type over the image.

One product, big: a two-image gallery, display-l title, price, garment and color pickers, one CTA and a details link. Image-start, image-end and stacked.

Countdown to a drop with fixed-width tabular digits, a designed live-now state, an optional product teaser and a notify-me form with the Kobra pending flip. Bar, hero card and inline.

Six to eight products in an asymmetric bento; one tile shows the same product on a light and a dark ground. 2x3 and 3x3.

Kobra table comparing 2 to 4 products from a rows prop (price, fabric, fit, print, whatever the data holds); stacked cards on mobile.

Thin mono stat row plus up to two quotes. Renders nothing when the arrays are empty and never invents proof.

Kobra accordion of questions and answers with a heading. Single column, two columns, or with a contact card.

Masonry or justified imagery on Kobra lightbox: photos open with the ripple zoom, captions in mono, optional shop-the-look hotspots.

Kobra halftone-dots morphing between 2 to 4 product images beside a bold headline. The auto-morph plays once per session; reduced motion shows the first image and the picker drives the rest.

Marquee of product thumbnails, titles and prices linking to PDPs. Pauses on hover and focus, has a pause button, and is static and scrollable under reduced motion.

Strip of products driven by localStorage handles. Renders nothing when empty; ships recordRecentlyViewed() for PDPs.

Product gallery: vertical thumbnails + large image, stacked scroll, or two-up grid; a swipeable carousel with dots on mobile. Click zooms through the Kobra lightbox ripple.

Color swatches with image tooltips, size pills with sold-out states, garment segmented control. Swatches, dropdowns, or pills-only. Emits through the shared variant selection.

A text-link trigger that opens a Kobra sheet (desktop) or drawer (mobile) with a size table, in/cm toggle, fit notes and a measure-yourself slot.

Display title, price (strike compare), variant picker, quantity, Add to cart with the Kobra busy button and toast, mrch.shop link or a coming-soon line, trust row, share.

A hairline strip with thumbnail, title, price and a small Add button that slides in once the buy box scrolls out of view (IntersectionObserver).

Kobra accordion: details (from the product), fabric and fit, shipping and returns, care. Brand defaults override the neutral print-on-demand copy.

Home / collection / product on the Kobra breadcrumb, in mono micro type.

Average with gray stars, distribution bars (Kobra progress) and up to three review cards. Renders nothing when there are no reviews.

Country select with an estimated delivery window from a static rates table. Spinner in the trigger and a skeleton result while it resolves.

A local bag in a Kobra sheet from the end edge: line items with quantity steppers, subtotal, checkout that exits to mrch.shop or Shopify, a designed empty state and an optional free-shipping bar.

The whole PDP in a Kobra dialog (centered two columns, mini gallery with dot pagination, buy box, size guide, view full details) or a bottom drawer on mobile. QuickViewProvider + useQuickView() open it from any grid.

A strip of 4 to 8 products from the same collection: scroll-snap rail with a peeking card, or a four-up grid. Uses product-card and opens the quick view when one is mounted.

Two or three products in a row with a size choice each and one Add all button. The total is only the sum of the listed prices.

The PDP top section: breadcrumb, gallery and buy box in a 7/5 or 6/6 grid with a sticky buy column, or a stacked-scroll gallery beside a sticky buy box. Optional title-bar windows for playful brands.

The full customizer screen: sticky stage (7/5 split), numbered sections with trailing hairlines (garment, color, art, text, placement, size), live price and a sticky Add bar. Variants: split, stacked (mobile first) and minimal.

The art composited onto a real garment photo: dashed print area with corner handles, draggable and resizable art clamped to the print area, colourway swap, front/back, zoom.

Garment colour from the real colourways (swapped, not recoloured), plus a Kobra colour palette for custom colours where a silhouette mask exists. Dots or photo cards.

The brand's prints as a grid, each shown on the colour of the chosen garment with the ink variant that suits it. Active print ringed; Kobra scroll-area rail on mobile.

One line of text on the print: brand display font, CAPS when the brand voice says so, max length with a tabular counter and a single shake, size slider, alignment, ink swatches with picker, arc toggle. Live on the stage.

Width percent and top offset as Printify-style placement (widthPct, topPx) with keyboard-stepped sliders, plus left chest, center chest, full front and back presets. Tabular readouts.

Drop a PNG on the print with Kobra's magnetic dropzone: type and size validated, previewed on the stage instantly, with a reset back to the library art.

Live price breakdown: base garment plus the options that are on (garment upcharge, back print, text line, upload, size). Tabular digits ease between totals with no layout shift; never invents a surcharge.

Summary of every choice with size pills, live price, Add to cart (cart store or onAddToCart), Save design to a URL hash, and the external Make your own with MRCH link.

Sticky price and Add to cart for the customizer: live total, Kobra busy button (spinner in, label out, never disabled) wired to the cart store, and a Save design button that writes the design to the URL hash.

External 'Make your own with MRCH' call to action. Opens the sellmerch.ai intake seeded with the design in play and the garment, with the network UTM scheme and analytics data attributes.

Kobra tabs for a product page: Details and Customize, where Customize mounts the minimal customizer (stage, color, size, add).

A shareable card of the design: layered CSS preview (no snapshot library needed), brand, title, spec and price, with a Kobra QR code of the saved-design URL that ripples when the design changes.

Designs saved from the customizer, remembered in localStorage per brand and shown as small stage thumbnails. Click to load one back onto the stage; designed loading and empty states.

Formatted money with default, large display, strike-through compare, and from-range variants.

Color dots and garment pills for variant selection, built on Kobra toggle-group.

Brand name in the brand display face, four sizes up to display-xl. CAPS follow the brand token.

The .micro mono label above headlines.

Kobra Button rendered as a link (44px hero size) plus a quiet underlined text link.

Bag icon button with a tabular count badge. Link or button; count is a prop.

Commerce state badges (new, back print, sold out, low stock, limited, sale, coming soon) on Kobra badge.

Availability marker: printed on demand, in stock, low, sold out, coming soon. Dot, pill, or text.

Gray stars with fractional fill, optional value and count. Only for real review data.

Minus, number, plus. Spinbutton with arrow keys, tabular digits, compact, default and large sizes.

Size and garment pills on Kobra toggle-group: pill and segmented, struck + disabled + tooltip when unavailable.

A row of small mono statements with icons: made to order, shipping, returns. Neutral defaults, brand-overridable.

Quiet area chart on the Kobra chart: single, multi, stacked, bare and full-bleed KPI shapes, with a custom tooltip, loading skeleton and empty state.

Bar chart on the Kobra chart: columns or horizontal bars, grouped, stacked, previous-period comparison and a bare KPI shape, with loading and empty states.

A number formatted with Intl (currency, percent, compact, unit, sign display, locale), tabular, with an optional digit flip on change.

A badge that reads a change at a glance: up, down or flat from the sign of a number, with the arrow and the sign as a second channel to colour.

A metric card built from parts: label, value, trend chip, icon, progress, footer, actions and a sparkline inline or bleeding off the bottom. Gaps in the data stay visible; loading and empty are designed.

Line chart on the Kobra chart: multi-series colors, dashed comparison, dots, a bare sparkline shape, portfolio and traffic-source headers, and stat tabs that switch the series.

Bars, lines and areas on one plot with an optional second Y axis: stacked bars with a line, area with a line, bar with an area, and a three-type mix.

Kobra ChartTooltipContent in every configuration, shown pinned open on a live plot: auto content, no header, line indicator, inactive, custom row and total formatters, chart colors.

Pie, donut, donut with a total or custom content in the hole, nested donut and a linked breakdown list, on the Kobra chart palette.

Radar with area, line or dots-only marks, multiple series, an optional radius axis and a dashed comparison series.

Radial bars as a progress ring, a half-circle gauge, concentric rings with a legend, and a gauge grid, with a readout in the middle.

Several metrics in one card with hairline dividers: side by side when there is room, stacked when there is not, or always vertical. Supports a 'from' comparison.

Dashboard tile shell with header, actions, content and footer, shown holding bar and line charts, a donut, KPIs, a table, a usage summary and a full dashboard grid.

Tiny trend mark on the Kobra chart in area, line or bar form, with an auto success or error tone, three heights, optional tooltip, and cells for KPIs and tables.

Floating selection toolbar on Base UI Toolbar and Kobra button: floating or attached, horizontal or vertical, labels collapse to icons with tooltips under 640px, enters and exits on the Kobra curves.

Designed empty surface on the Kobra empty: default, minimal, outline and background variants, three sizes, full height, icon, avatar and avatar-group media.

Vertical or horizontal timeline with start, end and alternate placement, three sizes and three densities. Indicators hold a dot, an icon or an avatar; items carry time, title, body and badge. Demos: compact log, version history, incident response, repository activity, split content, centered milestones.

Icon, title and description row on the Kobra item, with trailing value, switch, select or multi select; pressable, selected, vertical stack and four variants.

Groups item cards as one fused list or a 2 or 3 column grid, with headers, multiple sections, shared variants and pressable cards.

Drag-and-drop board on dnd-kit. Cards move within and between columns with a dashed drop slot, keyboard move (space to lift, arrows, space to drop, escape to cancel) with live-region announcements, add-card form, count and WIP limit, three sizes. Demos: project board and Notion-style board.

Keyboard-navigable single column on the Kobra item: roving tabindex, arrows, space and enter, shift-range, select all, typeahead; single, multiple and no selection.

MapLibre map on the free demo tiles, restyled with Kobra tokens: markers, popups, clusters, routes, arcs, zones, heatmap, store locator, live tracking, light and dark, skeleton, and a static fallback.

Accessible tree on Kobra Collapsible: role tree and treeitem with aria-expanded, aria-level and aria-selected, arrow keys, home and end, type-ahead, extension icons, guide lines, three sizes, single and multiple selection, drag and drop (and cut and paste) to move, lazy folders with a loading row, custom indicators, and a pull request file review composition.

Kobra table driven by TanStack Table: sorting, selection, resizing, pinned columns, row reorder, expandable rows, editable cells, loading skeleton, windowed long lists, empty state, bulk action bar and footer.

Embla carousel with thumbnails, dots, several slides per view, loop, accessible autoplay, a Dialog lightbox and an API escape hatch.

Pointer-tracked 3D tilt with a holographic foil and glare, driven by CSS custom properties from one pointermove handler. Static mode, membership and credit card compositions.

Day, week and month calendar on the Kobra Calendar picker. Time grid with slot duration and start and end hour, overlap lanes, all-day row, drag to move and resize with 15-minute snapping, drag on empty space to create, current-time line, weekend highlight, keyboard moves. Controlled view, date and events with onEventCreate, Move, Resize and Delete.

Hover and focus preview card on the Kobra hover card: placements, optional arrow, image preview, custom delays and controlled open.

Scroll-tracked table of contents: a rail of collapsed bars that opens a hierarchical list on hover or press, with left or right placement, controlled open and a windowed list for very long documents.

Highlighted code for chat answers with a language or filename header, copy, optional line numbers and soft wrap, and a bare variant.

Markdown for chat answers with Kobra typography, tables, code blocks and memoized streaming.

Copy, retry, like and dislike actions for a chat message with tooltips, a minimal variant and a slot for custom icons.

A chat turn on the Kobra Message with user and assistant layouts, avatar, timestamp, markdown, a loading shimmer and an actions slot.

Sources for a chat answer as inline chips, document rows, grouped lists or stacked favicons, with an optional hover preview.

A status label that shimmers while work is running, built on Kobra's text shimmer. Token colors, three sizes, a CSS-only engine for dense lists, and a plain static finish.

What a reply looks like before it has started: typing dots, skeleton lines in the shape of text, or a shimmering status word. Static under reduced motion, announced as a status, optional start delay.

Image and file attachments on Kobra's Attachment: rows and tiles, a grouped strip with a +N overflow, upload and error states, and a composer variant with a remove button.

Conversation thread rows on Kobra's Item: title, snippet, time, unread dot and an active state, grouped by day, in default or compact density. Arrow-key navigation with a roving tab stop, skeleton and empty states.

Starter prompts as chips or cards. Keyboard reachable with arrow-key movement, a single onValueChange with the prompt text, and a scrolling one-row chip layout for narrow screens.

The chat composer, drawn in the look of Kobra's chat-input (a rebuild, not a wrapper: chat-input has no slots or status) with a quiet Voice Glow beam: four variants, a toolbar with model select, attach and tool toggles, send / stop states, queued prompts, @mention and /command pills, attachments, drag and drop, auto-grow, and a review composer.

A collapsible tool-call card on the Kobra task-list and plan-card patterns with five states, JSON panes, streaming output and approval actions.

A collapsible reasoning trace on the Kobra reasoning-steps pattern with a streaming step and an agent-trace mode.

A chat transcript on Kobra's message scroller and conversation bubbles: it sticks to the bottom while messages stream in, lets go when the reader scrolls up, and brings back a scroll-to-bottom button. Includes a full-chat demo that streams text on a timer.

A settings row with a Kobra switch: icon, label, description, the whole row acts as the label. Controlled or not, disabled, default and secondary variants, grouped with hairlines, with a feature-announcement badge.

A settings row with a Kobra select as its trailing control: click anywhere on the row to open it. Controlled, custom trigger value and option rows (font preview), disabled, default and secondary variants, grouped.

A settings row with a Kobra slider under the label and a tabular readout on the right. Controlled, integer or fractional step, custom value format, disabled, default and secondary variants, grouped.

A settings row with a color swatch. The swatch opens a Kobra popover with the color palette for quick picks and the color picker for custom values; optional preset dots sit under the label. Controlled, disabled, default and secondary variants, grouped.

A Kobra select whose trigger reads as text, with an underline on hover and a small chevron, so it sits inside a sentence. Team switcher with avatars and a custom indicator, a multi-select variant on Kobra multi-select, and placements.

Card-style options on Kobra Checkbox: the whole card is the label. Icon cards, grid or stack, custom or no indicator, controlled, render-prop children, optional ripple.

Card-style single choice on Kobra RadioGroup: the selection dot travels between cards. Icon cards, grid, custom or no indicator, subscription plans, delivery and payment.

A labeled native select on Kobra native-select: description, invalid message (aria-invalid, role alert), disabled options, option groups, placeholder row, full width, default and secondary variants, and a form example on Kobra Form with react-hook-form.

Kobra Input between two Buttons, extending the quantity stepper: min, max, step, Intl formatting, typed entry parsed on blur, press-and-hold auto-repeat with acceleration, keyboard arrows and page keys.

The state and parts around Kobra's magnetic dropzone: accept filters, max size and max files with an alert beside the field, a file list (default, compact, thumbnails) with remove, custom icon and triggers.

Tiptap in Kobra's textarea chrome: a toggle-group toolbar with a link popover, a bubble menu on selection, controlled JSON, character count, placeholder, disabled and read-only, extensible commands.

A wrapper that answers a press with a pointer-origin ripple, a highlight, and a sweep that fills while the press is held: hold to confirm and progress feedback. Works around Buttons and Cards.

An emoji and a count on a Kobra Toggle. Selecting pops the emoji and flips the digits that changed, with the Kobra digit tokens.

The interactive sibling of the read-only Rating: hover preview, half steps, arrow keys, custom and per-item icons, a token color variable, and a review form sub-demo.

Segmented control on the Kobra toggle-group with a sliding transform-only pill: default and ghost, separators, sizes, icons, icon expand, theme switcher.

Progress stepper with numbered, icon and bullet indicators, horizontal and vertical layouts, controlled value with clickable completed steps, and tracking, onboarding and trial timelines.

Resizable panes on the Kobra resizable: horizontal and vertical, line, bar and grip handles, three variants, nesting, collapsible panes with a reopen tab, a drag size indicator and persisted sizes.

Command palette on the Kobra command-menu engine: default, minimal, clean, launcher, dev toolbar and split-view variants, multi-term search, nested groups, sizes and modal backdrop variants.

App navbar on the Kobra navigation-menu: brand, links, dropdowns and actions, static, sticky or fixed, sizes, max width, direction-aware hide on scroll and a Kobra sheet menu for narrow containers.

Ready Kobra sidebar configurations: labelled and collapsible groups, nested pages, badges, icon rail, inset and floating variants, avatar menu, right side, configurable shortcut, persisted state and reduced motion.

App scaffold on the Kobra sidebar: sidebar, sticky navbar with breadcrumbs, toolbar, main, footer and an aside with a shortcut and a mobile sheet. Resizable panes, page or content scroll, controlled and persisted state.

Right click or press and hold anywhere on a surface. A menu described as data (items, sections, submenus, checkbox and radio choices, disabled rows) on the Kobra context menu, with a 500ms touch hold that cancels on movement and a controlled open state.

frimousse (headless, virtualized, keyboard navigable) dressed in Kobra tokens: search on the Kobra input, a category rail on the toggle group, recents, a skin tone button, three sizes, custom categories, inline or in a popover.

A draggable sheet on Vaul through the Kobra drawer: four edges, snap points (sequential, custom fade, controlled), detached, handle-only, nested, non-dismissable, pinned header over scrolling content, dim, blur or no backdrop. Demos include a form, an emoji picker sheet and message actions.