Card
carduiBordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.
Installation
$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/card.json$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/card.json$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/card.json$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/card.jsonManifest:
https://uipkge.dev/r/svelte/card.jsonInstalls to:src/lib/components/ui/card/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
variant | 'default''elevated''outline''ghost' | default | optional |
ref | HTMLDivElement | null | — | optional |
npm dependencies
Used by
auth-mfaauth-password-resetauth-sign-inauth-sign-upbento-01coming-sooncontact-01contact-uscta-01customer-reviewsdashboard-kpisfaq-01feature-alternating-rowsfeature-interactive-tabsfeatures-01frequently-bought-togetherherohero-01logosnewsletteronboarding-checklistorder-confirmationorder-management-pagepricingpricing-01pricing-matrix-plan-cardsproduct-qa-communityproject-roadmaprecord-detail-pageregister-01section-cardteam-sectiontechnical-specs-sheettestimonialtestimonial-marquee-scrolluser-profile-pagewaitlist
Files installed (9)
src/lib/components/ui/card/Card.svelte0.7 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' import type { CardVariants } from './card.variants' export interface CardProps extends HTMLAttributes<HTMLDivElement> { variant?: CardVariants['variant'] ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' import { cardVariants } from './card.variants' let { class: className, variant = 'default', children, ref = $bindable(null), ...restProps }: CardProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="card" data-variant={variant} class={cn(cardVariants({ variant }), 'overflow-hidden', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/card/CardAction.svelte0.6 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface CardActionProps extends HTMLAttributes<HTMLDivElement> { ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: CardActionProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="card-action" class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/card/CardContent.svelte0.5 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface CardContentProps extends HTMLAttributes<HTMLDivElement> { ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: CardContentProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="card-content" class={cn('p-6 pt-0', className)} {...restProps}> {@render children?.()} </div>src/lib/components/ui/card/CardDescription.svelte0.6 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> { ref?: HTMLParagraphElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: CardDescriptionProps = $props() </script> <p bind:this={ref} data-uipkge data-slot="card-description" class={cn('text-muted-foreground text-sm', className)} {...restProps} > {@render children?.()} </p>src/lib/components/ui/card/CardFooter.svelte0.5 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> { ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: CardFooterProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="card-footer" class={cn('flex items-center p-6 pt-0', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/card/CardHeader.svelte0.7 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> { ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: CardHeaderProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="card-header" class={cn( 'grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] items-start gap-1.5 p-6 has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]', className, )} {...restProps} > {@render children?.()} </div>src/lib/components/ui/card/CardTitle.svelte0.6 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' ref?: HTMLElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, as = 'h3', children, ref = $bindable(null), ...restProps }: CardTitleProps = $props() </script> <svelte:element this={as} bind:this={ref} data-uipkge data-slot="card-title" class={cn('leading-none font-semibold tracking-tight', className)} {...restProps} > {@render children?.()} </svelte:element>src/lib/components/ui/card/card.variants.ts1 kB
import type { VariantProps } from 'class-variance-authority' import { cva } from 'class-variance-authority' /** * Variant definitions live in their own file (rather than the package * `index.ts`) so `Card.vue` can `import { cardVariants } from './card.variants'` * without creating a circular dependency back through the index. The circular * form caused intermittent `$setup.cardVariants is not a function` errors * during dev SSR when several `<Card>` instances rendered in a v-for before * the module graph had fully resolved. */ export const cardVariants = cva( 'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150', { variants: { variant: { default: 'border-border', elevated: 'border-transparent shadow-md hover:shadow-md', outline: 'border-2', ghost: 'border-transparent shadow-none hover:bg-muted/50', }, }, defaultVariants: { variant: 'default', }, }, ) export type CardVariants = VariantProps<typeof cardVariants>src/lib/components/ui/card/index.ts0.8 kB
export { default as Card, type CardProps } from './Card.svelte' export { default as CardAction, type CardActionProps } from './CardAction.svelte' export { default as CardContent, type CardContentProps } from './CardContent.svelte' export { default as CardDescription, type CardDescriptionProps } from './CardDescription.svelte' export { default as CardFooter, type CardFooterProps } from './CardFooter.svelte' export { default as CardHeader, type CardHeaderProps } from './CardHeader.svelte' export { default as CardTitle, type CardTitleProps } from './CardTitle.svelte' // Re-export variant API from the sibling file (kept separate to avoid the // Card.svelte <-> index.ts circular import that broke dev SSR in Vue). export { cardVariants, type CardVariants } from './card.variants'
Raw manifest:https://uipkge.dev/r/svelte/card.json