Latest Components

"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 button with a flowing gradient background that shifts on hover. Uses vivid color stops and smooth directional transitions.

A compact square button designed to hold a single icon. Features subtle background fill and consistent sizing across breakpoints.

A button that displays an inline spinner during async operations. Disables interaction and dims opacity while loading.

"MantineButton" — 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.

"ShadcnButton" — 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 binary state button with distinct active and inactive visual states. Uses color transitions and optional icon swapping.

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

A card with a prominent image area and text overlay region. Features responsive aspect ratio and smooth image loading transitions.

A user profile display card with avatar, name, and bio sections. Features rounded image framing and balanced vertical spacing.

"ShadcnCard" — 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 numeric statistic display card with large numbers and descriptive labels. Supports trend indicators and compact data visualization.

A customer testimonial card with quote styling and attribution footer. Uses italic typography and subtle quote marks.

"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.

"AlertDialog" — 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.

"Alert" — 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.

"AuroraBackground" — 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.

"Avatar" — 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.

"Badge" — 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.

"Banner" — 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.

"BookmarkButton" — 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.

"BrandAssetsMenu" — 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.

"Button" — 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.

"Card" — 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.

"Chart" — 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.

"Checkbox" — 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.

"CheckoutDialog" — 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.

"CircleProgress" — 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.

"CodeEditorDialog" — 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.

"Code" — 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.

"Collapsible" — 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.

"CommandMenu" — 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.

"Command" — 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.

"Container" — 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.

"ContextMenu" — 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.

"CopyCodeCardButton" — 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.

"CopyPromptDialog" — 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.

"DeleteAccountDialog" — 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.

"Dialog" — 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.

"Drawer" — 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.

"DropdownMenu" — 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.

"EditComponentDialog" — 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.

"ErrorPage" — 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.

"Footer" — 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.

"Form" — 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.

"FullScreenButton" — 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.

"GithubStarsNumber" — 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.

"HeaderClient" — 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.

"HeroPill" — 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.

"HeroSection" — 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.

"HeroVideoDialog" — 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.

"HoverCard" — 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.

"Input" — 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.

"ItemsList" — 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.

"Label" — 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.

"LinkPreview" — 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.

"LoadingDialog" — 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.

"LoadingSpinner" — 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.

"Logo" — 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.

"MaintenancePage" — 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.

"Mockup" — 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.

"Multiselect" — 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.

"NavigationMenu" — 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.

"NewsletterDialog" — 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.

"Pagination" — 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.

"Popover" — 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.

"PricingCard" — 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.

"PricingSection" — 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.

"PricingTab" — 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.

"PricingTable" — 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.

"Progress" — 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.

"RadioGroup" — 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.

"Resizable" — 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.

"ScrollArea" — 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.

"Select" — 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.

"Separator" — 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.

"Sheet" — 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.

"ShimmerButton" — 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.

"Sidebar" — 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.

"Skeleton" — 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.

"Skeletons" — 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.

"Sonner" — 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.

"Switch" — 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.

"Table" — 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.

"Tabs" — 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.

"Tag" — 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.

"TextMorph" — 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.

"TextShimmer" — 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.

"Textarea" — 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.

"ThemeToggle" — 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.

"Toast" — 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.

"Toggle" — 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.

"Tooltip" — 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.

"UserAvatar" — 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 compact button featuring an icon with a soft circular background. Blends muted pastels with gentle hover shadows.

A fully-rounded pill button using a blush pastel accent, soft diffused shadow, and warm-grey label text. It animates color and elevation gently on hover via a cozy ease-out transition.

A rounded primary button with a soft off-white base, sage pastel accent on hover, and a gentle 300ms ease-out transition. It is a static Tailwind-styled React control with no external animation library.

A toggle-style button with warm on/off states and smooth transitions. Features rounded pill shape and cozy color palette.

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

A confirmation dialog with accept and cancel action buttons. Uses clear action labeling and keyboard-accessible focus management.

A slide-in panel from the screen edge with overlay backdrop. Supports left, right, top, and bottom positioning.

A centered modal overlay with backdrop dimming and focus trapping. Features smooth scale-in animation and escape key dismissal.

"ShadcnAlertDialog" — 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.

"ShadcnDialog" — 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 bottom sheet dialog that slides up from the viewport bottom. Features drag-to-dismiss gesture and snap-point positioning.

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

A full-width hero section with an animated gradient background. Features centered headline text and a call-to-action button.

"HeroAspectRatio" — 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.

"HeroSeparator" — 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 clean hero section with large typography and minimal decoration. Uses generous vertical padding and a single accent color.

A two-column hero layout with text on one side and imagery on the other. Uses responsive stacking on smaller viewports.

A hero section with a background video loop and text overlay. Features darkened overlay for text readability and autoplay behavior.

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

"MantineInput" — 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 one-time password input with segmented digit display. Features auto-focus advancement and countdown timer integration.

A multi-digit pin code input with individual character boxes. Supports auto-advance between digits and paste handling.

A search-optimized input with integrated search icon and clear button. Features rounded corners and instant feedback styling.

"ShadcnInput" — 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.

"ShadcnTextarea" — 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.

An input that converts typed text into removable tag chips. Supports keyboard navigation and duplicate prevention.

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 card styled like a torn notebook page with subtle paper texture and ruled lines. Uses warm cream backgrounds and gentle shadows.

A polaroid-style framed image card with a thick off-white border, sand pastel caption strip, and rounded corners. The frame tilts back to level on hover via a soft ease-out transition.

A recipe-style content card with a warm header section and ingredient list layout. Features hand-drawn border accents and soft typography.

A card designed to resemble a vinyl record sleeve with retro typography. Uses muted earth tones and subtle grain overlay.

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 floating content panel with soft shadow and rounded corners. Designed for overlay content with minimal visual weight.

A full-width section with subtle top and bottom borders. Uses horizontal rhythm and centered content alignment.

A two-column layout with adjustable split ratio and minimal divider. Uses ample whitespace and subtle border separators.

A relaxed grid layout with generous spacing between items. Prioritizes breathing room and visual calm.

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

A horizontal breadcrumb navigation trail with separator icons. Features truncation for deep paths and link hover states.

"ShadcnMenubar" — 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.

"ShadcnNavMenu" — 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 vertical sidebar navigation with collapsible sections and active state indicators. Uses icon-label pairs and smooth expand transitions.

A navigation bar that sticks to the top of the viewport on scroll. Features backdrop blur and subtle shadow on scroll activation.

A horizontal tab-style navigation with active indicator animation. Uses underline or pill-style active state and keyboard navigation.

"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.

"PricingLabel" — 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.

"ShadcnTable" — 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 tab component with smooth sliding indicator animation between tabs. Uses spring-based transitions and accessible keyboard navigation.

A tab component where each tab is represented by an icon with optional label. Uses tooltip overlays and icon-state color changes.

"MantineTabs" — 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 using pill-shaped active indicators instead of underlines. Features rounded backgrounds and color-shift transitions.

A horizontally scrollable tab bar for many tabs in limited space. Features fade edges and drag-to-scroll interaction.

"ShadcnTabs" — 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 vertically stacked tab layout with content panel to the right. Features smooth height transitions and compact 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.

A dark lofi dusk theme with deep espresso backgrounds, warm cream ink, and burnt-orange, muted-green, and soft-purple accents. Evokes a dim, cozy late-night workspace with warm low-light surfaces.

A soft paper-café theme with warm ivory backgrounds, gentle brown ink, and rose, teal, and gold accents. Evokes an airy café table with printed-paper textures and understated warmth.