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

npx shadcn@latest add @aavya/ui-themed-card

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.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.

Props

Part	Prop	Type	Default
ThemedCard	size?	'sm' \| 'md' \| 'lg'	'md'
ThemedCardTitle	size?	'sm' \| 'md' \| 'lg'	'md'
ThemedCardPills	pills	string[]	—
ThemedCardPills	className?	string	—
ThemedCardIcon	icon	React.ComponentType<{ className?: string }>	—
ThemedCardIcon	className?	string	—
ThemedStatCard	size?	'sm' \| 'md' \| 'lg'	'sm'
ThemedStatCard	label	string	—
ThemedStatCard	value	string	—
ThemedStatCard	trend?	string	—
ThemedStatCard	className?	string	—

ThemedCard forwards remaining props to all <div> element props.

Dependencies

npm

lucide-react

Usage Snippet

import { ThemedCard } from '@/components/ui/themed-card'

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