Swiss Grid
Swiss grid pricing section with precision typography.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.