Swiss Grid
Swiss grid pricing section with precision typography.
Main Features of Swiss Grid
How to Use Swiss Grid in Next.js
Installation Guide for Swiss Grid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | PRI | Section title text (first part). |
title2 | string | CING | Section title text (second part). |
badgeText | string | International Style System | Badge text (can include newlines). |
tiers | Array<{letter: string, name: string, price: number}> | [] | Array of pricing tiers with letter, name, and price. |
backgroundColor | string | #F2F2F2 | Background color (hex, rgb, or hsl). |
containerBgColor | string | #ffffff | Container background color. |
containerBorderColor | string | #111111 | Container border color. |
containerShadowColor | string | #111111 | Container shadow color. |
titleColor | string | #111111 | Title text color. |
badgeBgColor | string | #FF4400 | Badge background color. |
badgeTextColor | string | #ffffff | Badge text color. |
tierBgColor | string | #ffffff | Tier background color. |
tierHoverBgColor | string | #FFD700 | Tier hover background color. |
tierBorderColor | string | #111111 | Tier border color. |
tierLetterColor | string | #111111 | Tier letter text color. |
tierNameColor | string | #111111 | Tier name text color. |
tierPriceColor | string | #111111 | Tier price text color. |
tierPriceLabelColor | string | #111111 | Tier price label text color. |
buttonBgColor | string | #000000 | Button background color. |
buttonTextColor | string | #ffffff | Button text color. |
buttonHoverBgColor | string | #ffffff | Button hover background color. |
buttonHoverTextColor | string | #000000 | Button hover text color. |
buttonBorderColor | string | #000000 | Button border color. |
buttonText | string | Select | Button text. |
Related Components
When to Use
Ideal for editorial-heavy platforms, architecture sites, and Next.js projects that want a bold, European modernist aesthetic. Use this React component for a Swiss-style pricing grid with heavy lines, bold letter-tiering, and high typographic precision.
Best Practices
Maintain consistent spacing within your design system by aligning the grid gaps with your primary layout. Follow React best practices by pairing this with clean, Sans-Serif typography (like Inter or Roboto). Optimize for performance by using efficient grid transforms.
Why This Component Matters in Modern UI Development
Swiss design is the foundation of modern visual clarity. This production-ready UI component helpsคุณ build an interface that feels authoritative and structured, making complex pricing easy to digest.
Frequently Asked Questions
QWhat is the 'Letter Tiering'?
Each plan is assigned a bold alphabetical letter (A, B, C) to create a clear, architectural hierarchy inspired by classic modernist posters.
QCan I change the highlight color?
Yes, the `badgeBgColor` and `tierHoverBgColor` props allow you to inject vibrant Swiss-style color accents like International Orange or Gold.
QIs the border width adjustable?
The component uses a signature 2px 'precision' border to maintain its architectural feel across all screen sizes.