Cards
Modern cards for dashboards, blogs, grids, and account statistics.
Cards
Cards are content containers used to display summaries, product highlights, user reviews, or analytical dashboard metrics in structured grids.
Interactive Showcase
Browse all the interactive card designs and variants included in Synapse UI.
Welcome back
Sign in to your account to continue
Don't have an account?
By signing in, you agree to our and
Create an account
Get started with your free account today
Already have an account?
Your data is protected with enterprise-grade encryption
Sarah Anderson
Product Designer
Total Revenue
$45,231.89
This product has transformed how we approach our workflow. Highly recommended for any team.
Marcus Johnson
CEO at TechCorp
Electronics
Premium Wireless Headphones
$199.99
React Query
Powerful asynchronous state management library for data fetching and caching.
Design Team
5 of 10 members
Product Launch Event
Update Available
A new version of our software is ready to download.
Conversion Rate
3.24%
Previously: 2.89%
Pro Member
Level 5
Design System v2.0
Comprehensive design tokens and components
Getting Started with Next.js 14
Learn the fundamentals of Next.js 14 and build your first application with server components and more.
Professional
Security Alert
Your account has unusual activity detected. Review and confirm actions below.
Alex Thompson
In a meeting
Project Checklist
2 of 4 completed
Loading Data
Fetching your information...
No Results
Try adjusting your search or filters to find what you're looking for.
Notification Settings
Control how you receive updates and alerts.
Email Notifications
Get notified via email
Push Notifications
Receive push alerts
SMS Updates
Text message reminders
Open to work
Seraphina Vance
@seraphina.design
Lead Interaction Designer & Creative Technologist. Building the future of spatial computing interfaces.
Eugene K
Senior Developer
Installation
Install any of the card components directly into your project via the CLI:
# Install Card 01 (Dashboard Stat Card)
npx shadcn@latest add http://localhost:3000/r/card-01.json
# Install Card 02 (Feature Highlight Card)
npx shadcn@latest add http://localhost:3000/r/card-02.json
# Install Card 03 (Hover Elevated Card)
npx shadcn@latest add http://localhost:3000/r/card-03.json