Skip to content

Swiss Tech MonoMotion

Feature Tabs

"How it works": tabs on hairline rules, each a mono meta row ("Step 01" with a small square that turns lime) over a large label, then a panel with the copy on 4 columns and a raised media card on 7 (APG tabs, automatic activation). vertical lists the tabs down the left.

Live, interactive React component · light themeResponsive

About the Swiss Tech Mono Feature Tabs

"How it works": tabs on hairline rules, each a mono meta row ("Step 01" with a small square that turns lime) over a large label, then a panel with the copy on 4 columns and a raised media card on 7 (APG tabs, automatic activation). vertical lists the tabs down the left. With autoplay the tabs advance on their own and the current tab's top bar fills; it pauses on hover, focus, offscreen, in a hidden browser tab and with MotionToggle, stops for good once someone picks a tab, and is off under reduced motion. On phones up to three tabs share the width (labels at body size); four or more scroll sideways. Client component.

It is part of Swiss Tech Mono. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.

The same piece, drawn for a different look. Open one to compare it live.

Neo-Brutal Feature Tabs

"How it works": large folder tabs (each with an auto number chip, 01, 02 …, volt when selected) sitting on a ruled panel: a card-white text cell (a mono label row from meta, the title, text and ticked points) beside a dotted media cell.

Noir Aurora Feature Tabs

"How it works": tabs that each show a title, text, points, meta and a media panel (APG tabs, automatic activation). horizontal puts the tabs above the panel (they scroll sideways on phones); vertical (the Noir look) lists them as numbered steps over 4 columns beside an 8-column lit panel (above it under lg); the selected step is a lit tile with its number in aurora.

Soft Bento Feature Tabs

"How it works": a pill track of tabs (the white clay thumb springs to the picked one and squashes on arrival) above one clay panel per tab, with title, text, ticked points and meta on one side and the media on a candy side (APG tabs, automatic activation).