NR — Tabs · Editorial Tab Switcher
An editorial tab set for Framer — a mono index, a serif panel title, and a single 1px
rule that slides to the active tab.
Built for layouts where restraint matters more than decoration — portfolios, agency
sites, product pages, documentation.
Tabs are one of those things you can fake with variants, until you need real keyboard
behaviour. This component implements the full WAI-ARIA tabs pattern: arrow keys move
between tabs and wrap around, Home and End jump to the ends, focus is managed with a
roving tabindex, and every panel carries the correct roles and relationships. You choose
whether selection follows focus or waits for Enter.
What's included:
• Horizontal and vertical orientation
• Three indicator styles — hairline rule, pill, or none
• Drop any canvas layer into a tab, or use the built-in title and text
• Optional mono index numbers (01, 02) and category meta labels
• Light, Dark and Custom themes
• Min and max width, fixed or auto height, and padding on all sides
• Type controls for size, weight, tracking and uppercase
Width and height stay put as you switch tabs. Panels are measured together, so the
layout never jumps when one tab holds more content than another.
Typefaces are limited to the three the system is built on — Cormorant Garamond,
DM Sans and DM Mono. Choose which goes where; the pairing can't be broken.
Fully responsive — Desktop / Tablet / Mobile
All text and colors editable via Component Properties
Part of the JUDE Neo-Retro component library.
More components → https://sub.chujiqiqi.com/@judestudiokorea/
NR — Tabs · Editorial Tab Switcher
An editorial tab set for Framer — a mono index, a serif panel title, and a single 1px
rule that slides to the active tab.
Built for layouts where restraint matters more than decoration — portfolios, agency
sites, product pages, documentation.
Tabs are one of those things you can fake with variants, until you need real keyboard
behaviour. This component implements the full WAI-ARIA tabs pattern: arrow keys move
between tabs and wrap around, Home and End jump to the ends, focus is managed with a
roving tabindex, and every panel carries the correct roles and relationships. You choose
whether selection follows focus or waits for Enter.
What's included:
• Horizontal and vertical orientation
• Three indicator styles — hairline rule, pill, or none
• Drop any canvas layer into a tab, or use the built-in title and text
• Optional mono index numbers (01, 02) and category meta labels
• Light, Dark and Custom themes
• Min and max width, fixed or auto height, and padding on all sides
• Type controls for size, weight, tracking and uppercase
Width and height stay put as you switch tabs. Panels are measured together, so the
layout never jumps when one tab holds more content than another.
Typefaces are limited to the three the system is built on — Cormorant Garamond,
DM Sans and DM Mono. Choose which goes where; the pairing can't be broken.
Fully responsive — Desktop / Tablet / Mobile
All text and colors editable via Component Properties
Part of the JUDE Neo-Retro component library.
More components → https://sub.chujiqiqi.com/@judestudiokorea/
JUDE
