Gradient Tiers

Pastel gradient card headers with icons and color-coded inheritance labels.

Library

Spectrum UI

Framework

React

Type

block

License

Apache-2.0

Dependencies

lucide-react

Install

npx shadcn@latest add @spectrumui/gradient-tiers

Files

• components/spectrumui/blocks/pricing/gradient-tiers.tsx
• components/spectrumui/blocks/pricing/types.ts
• components/spectrumui/blocks/pricing/reveal.ts
• lib/utils.ts

Source

https://github.com/arihantcodes/spectrum-ui

Categories

• Card Components
• React Card Components
• Tailwind CSS Card Components
• Commerce Components
• React Commerce Components
• Tailwind CSS Commerce Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• Pricing Card Components
• React Pricing Card Components
• Tailwind CSS Pricing Card Components

More from Spectrum UI

• Account Access Card
• AI Chat Card
• Animated Card
• Animated Testimonials
• Approval Card
• Banner Tiers
• Beam Card
• Blueprint Tiers
• Card Collection
• Empty Cart
• Dark Matrix
• Event Badge 3D