registry:component

Themed Card

v1.0.0beta

Theme-adaptive glass card: frosted paper in light mode, indigo underglow in dark mode. Pure CSS — no JS, no hydration flicker.

Registry Endpoint

Open JSON

https://registry.aavya.com/r/ui-themed-card.json

npx shadcn@latest add https://registry.aavya.com/r/ui-themed-card.json

Live Preview

Toggle the theme (top-right) to see the surface switch between frosted paper and glass.

Platform

Multi-Agent Orchestration

Coordinate specialised agents across complex workflows.

MCPLive

Active Users

14.2k

+12% this month

Registry

Installable Components

One CLI command to add any component.

Usage Snippet

import ThemedCard from '@/components/ui/themed-card.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <ThemedCard />
    </div>
  )
}

Source Preview

/**
 * ThemedCard — Aavya brand portal
 *
 * Theme-adaptive glass card: frosted paper in light mode, indigo-underglow
 * glass in dark mode. Uses CSS dark: variants — no JS, no hydration flicker.
 *
 * Same composable API as GlassCard / FrostedCard. Use this when the card
 * appears in a context that can be either light or dark.
 *
 * Usage:
 *   <ThemedCard size="md">
 *     <ThemedCardArrow />
 *     <ThemedCardHeader>
 *       <ThemedCardEyebrow>Platform</ThemedCardEyebrow>
 *       <ThemedCardTitle>Enterprise AI</ThemedCardTitle>
 *       <ThemedCardDescription>Engineered for governance.</ThemedCardDescription>
 *     </ThemedCardHeader>
 *     <ThemedCardFooter>
 *       <ThemedCardPills pills={['MCP', 'Live']} />
 *     </ThemedCardFooter>
 *   </ThemedCard>
 */

import * as React from 'react'
import { ArrowUpRight, TrendingUp } from 'lucide-react'
import { cn } from '@/lib/utils'

const sizePad = { sm: 'p-[22px]', md: 'p-[28px]', lg: 'p-[36px]' } as const
const sizeText = { sm: 'text-[18px]', md: 'text-[22px]', lg: 'text-[28px]' } as const

function ThemedCard({
  size = 'md',
  className,
  ...props
}: React.ComponentProps<'div'> & { size?: 'sm' | 'md' | 'lg' }) {
  return (
    <div
      data-slot="themed-card"
      className={cn(
        // Shared
        'relative isolate overflow-hidden rounded-[18px] flex flex-col gap-4 text-foreground',
        // Light — froste