Card
Component
Section titled “Component” Preview solid
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
export function CardDemo() {return ( <Card class="w-[350px]"> <CardHeader> <CardTitle>Card Title</CardTitle> <CardDescription>Card description goes here.</CardDescription> </CardHeader> <CardContent> <p>Card content goes here.</p> </CardContent> <CardFooter> <p>Card footer</p> </CardFooter> </Card>)}Installation
Section titled “Installation”npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/card.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/card.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/card.jsonimport { type ComponentProps, splitProps } from "solid-js"import { cn } from "@/lib/utils"
// Card - main containerexport const Card = (props: ComponentProps<"div">) => { const [local, rest] = splitProps(props, ["class"])
return ( <div class={cn( "rounded-xl border bg-card text-card-foreground shadow-sm", local.class, )} {...rest} /> )}
// CardHeaderexport const CardHeader = (props: ComponentProps<"div">) => { const [local, rest] = splitProps(props, ["class"])
return ( <div class={cn("flex flex-col space-y-1.5 p-6", local.class)} {...rest} /> )}
// CardTitleexport const CardTitle = (props: ComponentProps<"h3">) => { const [local, rest] = splitProps(props, ["class"])
return ( <h3 class={cn("font-semibold leading-none tracking-tight", local.class)} {...rest} /> )}
// CardDescriptionexport const CardDescription = (props: ComponentProps<"p">) => { const [local, rest] = splitProps(props, ["class"])
return ( <p class={cn("text-sm text-muted-foreground", local.class)} {...rest} /> )}
// CardContentexport const CardContent = (props: ComponentProps<"div">) => { const [local, rest] = splitProps(props, ["class"])
return <div class={cn("p-6 pt-0", local.class)} {...rest} />}
// CardFooterexport const CardFooter = (props: ComponentProps<"div">) => { const [local, rest] = splitProps(props, ["class"])
return ( <div class={cn("flex items-center p-6 pt-0", local.class)} {...rest} /> )}