Card

A flexible and highly customizable card component with three distinct styling variants: Neo-SaaS, Glassmorphic, and Neo-Brutalism.

Usage

Each card variant is installed as a separate component to keep your bundle size small. Choose the style that matches your design system.

A clean, modern card with subtle shadows and rounded corners, perfect for SaaS dashboards and landing pages.

Project Alpha

A next-generation platform for building scalable applications.

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/card-neo-saas.json"

Features a frosted glass effect with backdrop blur, ideal for modern, aesthetically rich interfaces.

Crystal Vision

Experience clarity with our new optical enhancements.

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/card-glassmorphic.json"

Characterized by bold borders, hard shadows, and high contrast for a striking, retro-modern look.

Bold Moves

Stand out from the crowd with un-apologetic design.

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/card-neo-brutalism.json"

Prop	Type	Default	Description
`children`	`ReactNode`	-	The content of the card.
`className`	`string`	-	Additional CSS classes to apply to the card.
`height`	`number`	`280`	The height of the card (interactive variants).
`width`	`number`	`220`	The width of the card (interactive variants).
`src`	`string`	-	Source URL for the card image (Image subcomponent).
`alt`	`string`	-	Alt text for the card image (Image subcomponent).