Card - shadcn-svelte

Docs

Card

Displays a card with header, content, and footer.

	<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
  import * as Select from "$lib/components/ui/select/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
 
  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit"
    },
    {
      value: "next",
      label: "Next.js"
    },
    {
      value: "astro",
      label: "Astro"
    },
    {
      value: "nuxt",
      label: "Nuxt.js"
    }
  ];
 
  let framework = $state("");
  const frameworkLabel = $derived(
    frameworks.find((f) => f.value === framework)?.label ?? "Select a framework"
  );
</script>
 
<Card.Root class="w-[350px]">
  <Card.Header>
    <Card.Title>Create project</Card.Title>
    <Card.Description>Deploy your new project in one-click.</Card.Description>
  </Card.Header>
  <Card.Content>
    <form>
      <div class="grid w-full items-center gap-4">
        <div class="flex flex-col space-y-1.5">
          <Label for="name">Name</Label>
          <Input id="name" placeholder="Name of your project" />
        </div>
        <div class="flex flex-col space-y-1.5">
          <Label for="framework">Framework</Label>
          <Select.Root type="single" bind:value={framework}>
            <Select.Trigger id="framework">
              {frameworkLabel}
            </Select.Trigger>
            <Select.Content>
              {#each frameworks as framework}
                <Select.Item value={framework.value} label={framework.label} />
              {/each}
            </Select.Content>
          </Select.Root>
        </div>
      </div>
    </form>
  </Card.Content>
  <Card.Footer class="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </Card.Footer>
</Card.Root>

	<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
  import * as Select from "$lib/components/ui/select/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
 
  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit"
    },
    {
      value: "next",
      label: "Next.js"
    },
    {
      value: "astro",
      label: "Astro"
    },
    {
      value: "nuxt",
      label: "Nuxt.js"
    }
  ];
 
  let framework = $state("");
 
  const selectedFramework = $derived(
    frameworks.find((f) => f.value === framework) ?? "Select a framework"
  );
</script>
 
<Card.Root class="w-[350px]">
  <Card.Header>
    <Card.Title>Create project</Card.Title>
    <Card.Description>Deploy your new project in one-click.</Card.Description>
  </Card.Header>
  <Card.Content>
    <form>
      <div class="grid w-full items-center gap-4">
        <div class="flex flex-col space-y-1.5">
          <Label for="name">Name</Label>
          <Input id="name" placeholder="Name of your project" />
        </div>
        <div class="flex flex-col space-y-1.5">
          <Label for="framework">Framework</Label>
          <Select.Root type="single" bind:value={framework}>
            <Select.Trigger id="framework">
              {selectedFramework}
            </Select.Trigger>
            <Select.Content>
              {#each frameworks as { value, label }}
                <Select.Item {value} {label} />
              {/each}
            </Select.Content>
          </Select.Root>
        </div>
      </div>
    </form>
  </Card.Content>
  <Card.Footer class="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </Card.Footer>
</Card.Root>

Installation

	npx  shadcn-svelte@latest add card

Usage

	<script lang="ts">
  import * as Card from "$lib/components/ui/card";
</script>
 
<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Card Content</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card.Root>

Modify the heading level

By default, the <Card.Title> component renders an <h3> element. You can change this by passing a tag prop to the component.

For example:

	<Card.Title tag="h1">This will render an H1</Card.Title>

...

	<Card.Title tag="h6">This will render an H6</Card.Title>

Examples

	<script lang="ts">
  import Bell from "svelte-radix/Bell.svelte";
  import Check from "svelte-radix/Check.svelte";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
 
  const notifications = [
    {
      title: "Your call has been confirmed.",
      description: "1 hour ago"
    },
    {
      title: "You have a new message!",
      description: "1 hour ago"
    },
    {
      title: "Your subscription is expiring soon!",
      description: "2 hours ago"
    }
  ];
</script>
 
<Card.Root class="w-[380px]">
  <Card.Header>
    <Card.Title>Notifications</Card.Title>
    <Card.Description>You have 3 unread messages.</Card.Description>
  </Card.Header>
  <Card.Content class="grid gap-4">
    <div class="flex items-center space-x-4 rounded-md border p-4">
      <Bell />
      <div class="flex-1 space-y-1">
        <p class="text-sm font-medium leading-none">Push Notifications</p>
        <p class="text-muted-foreground text-sm">
          Send notifications to device.
        </p>
      </div>
      <Switch />
    </div>
    <div>
      {#each notifications as notification, idx (idx)}
        <div
          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
        >
          <span class="flex size-4 translate-y-1 rounded-full bg-sky-500"
          ></span>
          <div class="space-y-1">
            <p class="text-sm font-medium leading-none">
              {notification.title}
            </p>
            <p class="text-muted-foreground text-sm">
              {notification.description}
            </p>
          </div>
        </div>
      {/each}
    </div>
  </Card.Content>
  <Card.Footer>
    <Button class="w-full">
      <Check class="mr-2 size-4" /> Mark all as read
    </Button>
  </Card.Footer>
</Card.Root>

	<script lang="ts">
  import BellRing from "lucide-svelte/icons/bell-ring";
  import Check from "lucide-svelte/icons/check";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
 
  const notifications = [
    {
      title: "Your call has been confirmed.",
      description: "1 hour ago"
    },
    {
      title: "You have a new message!",
      description: "1 hour ago"
    },
    {
      title: "Your subscription is expiring soon!",
      description: "2 hours ago"
    }
  ];
</script>
 
<Card.Root class="w-[380px]">
  <Card.Header>
    <Card.Title>Notifications</Card.Title>
    <Card.Description>You have 3 unread messages.</Card.Description>
  </Card.Header>
  <Card.Content class="grid gap-4">
    <div class=" flex items-center space-x-4 rounded-md border p-4">
      <BellRing />
      <div class="flex-1 space-y-1">
        <p class="text-sm font-medium leading-none">Push Notifications</p>
        <p class="text-muted-foreground text-sm">
          Send notifications to device.
        </p>
      </div>
      <Switch />
    </div>
    <div>
      {#each notifications as notification, idx (idx)}
        <div
          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
        >
          <span class="flex size-2 translate-y-1 rounded-full bg-sky-500"
          ></span>
          <div class="space-y-1">
            <p class="text-sm font-medium leading-none">
              {notification.title}
            </p>
            <p class="text-muted-foreground text-sm">
              {notification.description}
            </p>
          </div>
        </div>
      {/each}
    </div>
  </Card.Content>
  <Card.Footer>
    <Button class="w-full">
      <Check class="mr-2 size-4" /> Mark all as read
    </Button>
  </Card.Footer>
</Card.Root>

Calendar Carousel

On This Page