Component catalog

"ScrollArea" — a React component curated from the MIT-licensed repository of shadcn-ui, restyled to the Cozy Design Spec (rounded-2xl corners, stone/pastel palette, soft diffused shadows). It is a Tailwind-styled component with cozy hover transitions.

A transparent button with visible borders that fills with color on hover. Uses smooth transition animations and clean typography.

A product feature highlight card with icon, title, and description. Uses a clean bordered layout with hover elevation.

"Accordion" — a React component curated from the MIT-licensed repository of serafimcloud, restyled to the Cozy Design Spec (rounded-2xl corners, stone/pastel palette, soft diffused shadows). It is a Tailwind-styled component with cozy hover transitions.

A transparent button with a subtle hover effect that reveals a warm pastel background. Uses soft transitions and rounded corners in the Cozy Design Spec.

A focused alert dialog with destructive action confirmation pattern. Features prominent warning styling and binary action buttons.

A hero section with animated entrance effects for headline and subtext. Uses staggered fade-in and subtle parallax scrolling.

An input field with a label that animates from placeholder position to above the field on focus. Uses smooth transition and compact spacing.

A calm content card with rounded corners, an off-white surface, warm-grey body copy, and a soft diffused shadow. It lifts gently on hover with a 300ms ease-out transition.

A minimalist vertical stack layout with generous spacing, an off-white canvas, and rounded section panels. Each panel softly elevates on hover with a cozy ease-out transition.

A fixed bottom navigation bar designed for mobile interfaces. Features icon-label pairs and badge indicators for notifications.

"PricingBadge" — a React component curated from the MIT-licensed repository of shadcn-ui, restyled to the Cozy Design Spec (rounded-2xl corners, stone/pastel palette, soft diffused shadows). It is a Tailwind-styled component with cozy hover transitions.

"MantineTable" — a React component curated from the MIT-licensed repository of mantinedev, restyled to the Cozy Design Spec (rounded-2xl corners, stone/pastel palette, soft diffused shadows). It is a Tailwind-styled component with cozy hover transitions.

A tab component with smooth sliding indicator animation between tabs. Uses spring-based transitions and accessible keyboard navigation.

A calm single-page landing template with a soft hero section and a low-key features grid. Uses gentle CSS transitions and warm neutral surfaces for a cozy, approachable first impression.

A warm daylight theme with soft cream backgrounds, muted brown ink, and gentle peach, sage, and lavender accents. Evokes a calm, sunlit reading nook with low-contrast, paper-like surfaces.