Dark Matrix

A dark comparison table with dashed rows, mint checks, and per-plan CTA pills.

Library

Spectrum UI

Framework

React

Type

block

License

Apache-2.0

Dependencies

lucide-react

Install

npx shadcn@latest add @spectrumui/dark-matrix

Files

• components/spectrumui/blocks/pricing/dark-matrix.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
• Comparison Table Components
• React Comparison Table Components
• Tailwind CSS Comparison Table Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components

More from Spectrum UI

• Account Access Card
• AI Chat Card
• Animated Card
• Animated Testimonials
• API Keys Table
• Approval Card
• Audit Log Table
• Banner Tiers
• Beam Card
• Blueprint Tiers
• Card Collection
• Empty Cart