2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tdad,"use client"; import { Slot } from "radix-ui"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; const VARIANTS = { default: "bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]", outline: "bg-transparent ring-1 ring-inset ring-black/[0.1] dark:ring-white/[0.12]", soft: "bg-neutral-100/80 dark:bg-white/[0.04]", raised: "bg-white shadow-[inset_0_0_0_1px_rgb(0_0_0/0.06),inset_0_-2px_0_rgb(0_0_0/0.03),0_1px_2px_rgb(0_0_0/0.06),0_8px_24px_-12px_rgb(0_0_0/0.18)] dark:bg-neutral-900 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.06),0_8px_24px_-12px_rgb(0_0_0/0.6)]", } as const; export interface CardProps extends ComponentProps<"div"> { /** default: white with a hairline · outline: border only · soft: filled, no border · raised: inner border and a soft lift. */ variant?: keyof typeof VARIANTS; /** Lifts slightly on hover; use with asChild on a link. */ interactive?: boolean; /** Render your own element (a link, say) with the card styles. */ asChild?: boolean; } export function Card({ variant = "default", interactive = false, asChild = false, className, ...props }: CardProps) { const Comp = asChild ? Slot.Root : "div"; return ( ); } export function CardHeader({ className, ...props }: ComponentProps<"div">) { return

; } export function CardTitle({ className, ...props }: ComponentProps<"h3">) { return

; } export function CardDescription({ className, ...props }: ComponentProps<"p">) { return

; } /** Top-right of the header: a button, a menu or a badge. */ export function CardAction({ className, ...props }: ComponentProps<"div">) { return

; } export function CardContent({ className, ...props }: ComponentProps<"div">) { return

; } export interface CardFooterProps extends ComponentProps<"div"> { /** Sit the footer on a light gray band with a hairline above it. */ muted?: boolean; } export function CardFooter({ muted = false, className, ...props }: CardFooterProps) { return (

); } export default Card; 2e:T6bee,

"use client";

import { Slot } from "radix-ui";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

const VARIANTS = {
  default: "bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]",
  outline: "bg-transparent ring-1 ring-inset ring-black/[0.1] dark:ring-white/[0.12]",
  soft: "bg-neutral-100/80 dark:bg-white/[0.04]",
  raised:
    "bg-white shadow-[inset_0_0_0_1px_rgb(0_0_0/0.06),inset_0_-2px_0_rgb(0_0_0/0.03),0_1px_2px_rgb(0_0_0/0.06),0_8px_24px_-12px_rgb(0_0_0/0.18)] dark:bg-neutral-900 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.06),0_8px_24px_-12px_rgb(0_0_0/0.6)]",
} as const;

export interface CardProps extends ComponentProps<"div"> {
  /** default: white with a hairline · outline: border only · soft: filled, no border · raised: inner border and a soft lift. */
  variant?: keyof typeof VARIANTS;
  /** Lifts slightly on hover; use with asChild on a link. */
  interactive?: boolean;
  /** Render your own element (a link, say) with the card styles. */
  asChild?: boolean;
}

export function Card({ variant = "default", interactive = false, asChild = false, className, ...props }: CardProps) {
  const Comp = asChild ? Slot.Root : "div";
  return (
    <Comp
      className={cn(
        "flex flex-col overflow-hidden rounded-[22px] text-neutral-950 dark:text-white",
        VARIANTS[variant],
        interactive &&
          "outline-none transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_28px_-12px_rgb(0_0_0/0.2)] focus-visible:-translate-y-0.5 active:translate-y-0 dark:hover:shadow-[0_12px_28px_-12px_rgb(0_0_0/0.7)]",
        className,
      )}
      {...props}
    />
  );
}

export function CardHeader({ className, ...props }: ComponentProps<"div">) {
  return <div className={cn("grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-1 px-6 pt-6 [&:last-child]:pb-6", className)} {...props} />;
}

export function CardTitle({ className, ...props }: ComponentProps<"h3">) {
  return <h3 className={cn("col-start-1 text-[15px] font-semibold leading-6 tracking-[-0.015em]", className)} {...props} />;
}

export function CardDescription({ className, ...props }: ComponentProps<"p">) {
  return <p className={cn("col-start-1 text-[13.5px] leading-5 text-neutral-500 dark:text-neutral-400", className)} {...props} />;
}

/** Top-right of the header: a button, a menu or a badge. */
export function CardAction({ className, ...props }: ComponentProps<"div">) {
  return <div className={cn("col-start-2 row-span-2 row-start-1 self-start", className)} {...props} />;
}

export function CardContent({ className, ...props }: ComponentProps<"div">) {
  return <div className={cn("px-6 pt-5 text-[14px] text-neutral-700 dark:text-neutral-300 [&:first-child]:pt-6 [&:last-child]:pb-6", className)} {...props} />;
}

export interface CardFooterProps extends ComponentProps<"div"> {
  /** Sit the footer on a light gray band with a hairline above it. */
  muted?: boolean;
}

export function CardFooter({ muted = false, className, ...props }: CardFooterProps) {
  return (
    <div
      className={cn(
        "mt-auto flex items-center gap-2 px-6",
        muted ? "mt-6 border-t border-black/[0.06] bg-neutral-50 py-4 dark:border-white/[0.08] dark:bg-white/[0.02]" : "pb-6 pt-5",
        className,
      )}
      {...props}
    />
  );
}

export default Card;

2f:T797,import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/scalar-ui/card"; const button = "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97]"; const primary = `${button} bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`; const outline = `${button} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`; const input = "mt-1.5 block h-10 w-full rounded-xl bg-white px-3 text-sm text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.04)] outline-none ring-1 ring-inset ring-black/[0.1] placeholder:text-neutral-400 focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25"; export default function Demo() { return ( Create project Deploy a new project in one click. Name Repository ); } 30:T333d,

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/scalar-ui/card";

const button =
  "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97]";
const primary = `${button} bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`;
const outline = `${button} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`;

const input =
  "mt-1.5 block h-10 w-full rounded-xl bg-white px-3 text-sm text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.04)] outline-none ring-1 ring-inset ring-black/[0.1] placeholder:text-neutral-400 focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25";

export default function Demo() {
  return (
    <Card className="w-full max-w-[380px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy a new project in one click.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <label className="block text-[13px] font-medium text-neutral-800 dark:text-neutral-200">
          Name
          <input className={input} defaultValue="aurora-web" />
        </label>
        <label className="block text-[13px] font-medium text-neutral-800 dark:text-neutral-200">
          Repository
          <input className={input} defaultValue="aurora/web" />
        </label>
      </CardContent>
      <CardFooter className="justify-end">
        <button type="button" className={outline}>
          Cancel
        </button>
        <button type="button" className={primary}>
          Deploy
        </button>
      </CardFooter>
    </Card>
  );
}

31:T20e3,

import { Card, CardDescription, CardHeader, CardTitle } from "@/components/scalar-ui/card";

const variants = [
  ["default", "White with a hairline."],
  ["outline", "Border only, no fill."],
  ["soft", "Filled, no border."],
  ["raised", "Inner border and a soft lift."],
] as const;

export default function Example() {
  return (
    <div className="grid w-full max-w-[520px] grid-cols-2 gap-3">
      {variants.map(([variant, text]) => (
        <Card key={variant} variant={variant}>
          <CardHeader>
            <CardTitle className="capitalize">{variant}</CardTitle>
            <CardDescription>{text}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </div>
  );
}

32:T7c5,import { ArrowDownRight, ArrowUpRight } from "lucide-react"; import { Card, CardContent, CardDescription, CardHeader } from "@/components/scalar-ui/card"; const stats = [ { label: "Revenue", value: "$48,210", delta: "+12.4%", up: true, points: [12, 18, 15, 22, 20, 28, 34] }, { label: "Active users", value: "3,904", delta: "+4.1%", up: true, points: [20, 22, 21, 24, 23, 26, 27] }, { label: "Churn", value: "1.8%", delta: "−0.3%", up: false, points: [30, 28, 29, 24, 22, 20, 18] }, ]; function Spark({ points, up }: { points: number[]; up: boolean }) { const max = Math.max(...points); const min = Math.min(...points); const d = points.map((p, i) => `${(i / (points.length - 1)) * 100},${28 - ((p - min) / (max - min || 1)) * 24}`).join(" L"); return ( ); } export default function Example() { return (

{stats.map((s) => ( {s.label}

{s.value}

{s.up ? : } {s.delta}

))}

); } 33:T65ed,

import { ArrowDownRight, ArrowUpRight } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader } from "@/components/scalar-ui/card";

const stats = [
  { label: "Revenue", value: "$48,210", delta: "+12.4%", up: true, points: [12, 18, 15, 22, 20, 28, 34] },
  { label: "Active users", value: "3,904", delta: "+4.1%", up: true, points: [20, 22, 21, 24, 23, 26, 27] },
  { label: "Churn", value: "1.8%", delta: "−0.3%", up: false, points: [30, 28, 29, 24, 22, 20, 18] },
];

function Spark({ points, up }: { points: number[]; up: boolean }) {
  const max = Math.max(...points);
  const min = Math.min(...points);
  const d = points.map((p, i) => `${(i / (points.length - 1)) * 100},${28 - ((p - min) / (max - min || 1)) * 24}`).join(" L");
  return (
    <svg viewBox="0 0 100 30" preserveAspectRatio="none" className="h-8 w-full" aria-hidden>
      <path d={`M${d}`} fill="none" strokeWidth={2} vectorEffect="non-scaling-stroke" className={up ? "stroke-emerald-500" : "stroke-neutral-400"} />
    </svg>
  );
}

export default function Example() {
  return (
    <div className="grid w-full max-w-[600px] grid-cols-3 gap-3">
      {stats.map((s) => (
        <Card key={s.label}>
          <CardHeader className="px-4 pt-4">
            <CardDescription>{s.label}</CardDescription>
          </CardHeader>
          <CardContent className="px-4 pb-4 pt-1">
            <p className="text-[22px] font-semibold tabular-nums tracking-[-0.03em] text-neutral-950 dark:text-white">{s.value}</p>
            <p className={`mt-0.5 flex items-center gap-0.5 text-[12px] font-medium ${s.up ? "text-emerald-600 dark:text-emerald-400" : "text-neutral-500"}`}>
              {s.up ? <ArrowUpRight className="size-3.5" /> : <ArrowDownRight className="size-3.5" />}
              {s.delta}
            </p>
            <div className="mt-3">
              <Spark points={s.points} up={s.up} />
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

34:T552,import { ArrowUpRight, BookOpen, LifeBuoy, Terminal } from "lucide-react"; import { Card, CardDescription, CardHeader, CardTitle } from "@/components/scalar-ui/card"; const links = [ { icon: BookOpen, title: "Documentation", body: "Guides and API reference." }, { icon: Terminal, title: "CLI", body: "Install components from your terminal." }, { icon: LifeBuoy, title: "Support", body: "Talk to the team behind Aurora." }, ]; export default function Example() { return (

{links.map(({ icon: Icon, title, body }) => ( {title} {body} ))}

); } 35:T2c24,

import { ArrowUpRight, BookOpen, LifeBuoy, Terminal } from "lucide-react";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/scalar-ui/card";

const links = [
  { icon: BookOpen, title: "Documentation", body: "Guides and API reference." },
  { icon: Terminal, title: "CLI", body: "Install components from your terminal." },
  { icon: LifeBuoy, title: "Support", body: "Talk to the team behind Aurora." },
];

export default function Example() {
  return (
    <div className="grid w-full max-w-[600px] grid-cols-3 gap-3">
      {links.map(({ icon: Icon, title, body }) => (
        <Card key={title} interactive asChild>
          <a href="#link" className="group">
            <CardHeader>
              <span className="mb-3 flex size-9 items-center justify-center rounded-xl bg-neutral-100 text-neutral-600 dark:bg-white/[0.06] dark:text-neutral-300">
                <Icon className="size-4" />
              </span>
              <CardTitle className="flex items-center gap-1">
                {title}
                <ArrowUpRight className="size-3.5 text-neutral-400 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
              </CardTitle>
              <CardDescription>{body}</CardDescription>
            </CardHeader>
          </a>
        </Card>
      ))}
    </div>
  );
}

36:T18f2,

import { MapPin } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/scalar-ui/card";

export default function Example() {
  return (
    <Card className="w-full max-w-[320px]">
      <img src="/media/rolling-hills.webp" alt="" className="h-40 w-full object-cover" />
      <CardHeader>
        <CardTitle>Autumn retreat</CardTitle>
        <CardDescription className="flex items-center gap-1">
          <MapPin className="size-3.5" />
          Serra da Estrela · 12–15 Oct
        </CardDescription>
      </CardHeader>
      <CardContent className="pb-6 text-[13.5px] text-neutral-600 dark:text-neutral-400">Three days of walks, workshops and long dinners for the whole team.</CardContent>
    </Card>
  );
}

37:T5b6,import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/scalar-ui/card"; const button = "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97]"; const primary = `${button} bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`; const input = "mt-1.5 block h-10 w-full rounded-xl bg-white px-3 text-sm text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.04)] outline-none ring-1 ring-inset ring-black/[0.1] placeholder:text-neutral-400 focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25"; export default function Example() { return ( Team name Shown on invites, receipts and your public profile. Up to 32 characters. ); } 38:T25bf,

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/scalar-ui/card";

const button =
  "inline-flex h-9 items-center justify-center gap-2 rounded-xl px-3.5 text-[13.5px] font-medium tracking-[-0.01em] transition-[background-color,transform] active:scale-[0.97]";
const primary = `${button} bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`;

const input =
  "mt-1.5 block h-10 w-full rounded-xl bg-white px-3 text-sm text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.04)] outline-none ring-1 ring-inset ring-black/[0.1] placeholder:text-neutral-400 focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25";

export default function Example() {
  return (
    <Card className="w-full max-w-[460px]">
      <CardHeader>
        <CardTitle>Team name</CardTitle>
        <CardDescription>Shown on invites, receipts and your public profile.</CardDescription>
      </CardHeader>
      <CardContent>
        <input className={`${input} mt-0`} defaultValue="Aurora" aria-label="Team name" />
      </CardContent>
      <CardFooter muted className="justify-between">
        <span className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Up to 32 characters.</span>
        <button type="button" className={primary}>
          Save
        </button>
      </CardFooter>
    </Card>
  );
}

39:T62b,import { MoreHorizontal } from "lucide-react"; import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/scalar-ui/card"; const deploys = [ ["#482", "main", "Ready", "2m"], ["#481", "feat/billing", "Ready", "1h"], ["#480", "fix/webhooks", "Failed", "3h"], ]; export default function Example() { return ( Recent deployments aurora-web · production {deploys.map(([id, branch, status, ago]) => (

{id} {branch} {ago}

))} ); } 3a:T3bdb,

import { MoreHorizontal } from "lucide-react";
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/scalar-ui/card";

const deploys = [
  ["#482", "main", "Ready", "2m"],
  ["#481", "feat/billing", "Ready", "1h"],
  ["#480", "fix/webhooks", "Failed", "3h"],
];

export default function Example() {
  return (
    <Card className="w-full max-w-[420px]">
      <CardHeader>
        <CardTitle>Recent deployments</CardTitle>
        <CardDescription>aurora-web · production</CardDescription>
        <CardAction>
          <button
            type="button"
            aria-label="More"
            className="flex size-8 items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white"
          >
            <MoreHorizontal className="size-4" />
          </button>
        </CardAction>
      </CardHeader>
      <CardContent className="space-y-1 pb-4">
        {deploys.map(([id, branch, status, ago]) => (
          <div key={id} className="flex items-center gap-3 rounded-xl px-2 py-2 text-[13px]">
            <span className={`size-2 rounded-full ${status === "Ready" ? "bg-emerald-500" : "bg-red-500"}`} />
            <span className="font-mono text-[12.5px] text-neutral-950 dark:text-white">{id}</span>
            <span className="flex-1 truncate text-neutral-500">{branch}</span>
            <span className="text-neutral-400">{ago}</span>
          </div>
        ))}
      </CardContent>
    </Card>
  );
}

29:["$","section","card",{"id":"card","aria-labelledby":"card-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"card-title","className":"sr-only","children":"Card"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"card","gated":{"unlocked":true,"files":[{"name":"card.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"variants":{"name":"variants.tsx","code":"import { Card, CardDescription, CardHeader, CardTitle } from \"@/components/scalar-ui/card\";\n\nconst variants = [\n [\"default\", \"White with a hairline.\"],\n [\"outline\", \"Border only, no fill.\"],\n [\"soft\", \"Filled, no border.\"],\n [\"raised\", \"Inner border and a soft lift.\"],\n] as const;\n\nexport default function Example() {\n return (\n

\n {variants.map(([variant, text]) => (\n \n \n {variant}\n {text}\n \n \n ))}\n

\n );\n}\n","html":"$31"},"stat":{"name":"stat.tsx","code":"$32","html":"$33"},"interactive":{"name":"interactive.tsx","code":"$34","html":"$35"},"with-image":{"name":"with-image.tsx","code":"import { MapPin } from \"lucide-react\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/scalar-ui/card\";\n\nexport default function Example() {\n return (\n \n $\"\"$ \n \n Autumn retreat\n \n \n Serra da Estrela · 12–15 Oct\n \n \n Three days of walks, workshops and long dinners for the whole team.\n \n );\n}\n","html":"$36"},"muted-footer":{"name":"muted-footer.tsx","code":"$37","html":"$38"},"with-action":{"name":"with-action.tsx","code":"$39","html":"$3a"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add card","shadcn":"npx shadcn@latest add https://scalarui.com/r/card.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3b","toolbar":"$L3c"}]}],["$L3d","$L3e","$L3f","$L40","$L41","$L42"]]}]

Cards

Cards

Variants

Stat

Interactive

With Image

Muted Footer

With Action