Components

Card

Displays a card with header, content, and footer.

Notifications

You have a few unread messages

Push Notifications

Send notifications to device

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

Source Code

Copy the following code into your project.

<template>
  <div :class="cn('rounded-lg border p-6', props.class)">
    <slot :props="props" name="header">
      <div class="flex flex-col space-y-1.5">
        <slot :props="props" name="title">
          <h3 v-if="title" class="text-[22px] font-semibold leading-none tracking-tight">
            {{ title }}
          </h3>
        </slot>
        <slot v-if="subtitle" :props="props" name="subtitle">
          <p class="text-sm text-muted-foreground">
            {{ subtitle }}
          </p>
        </slot>
      </div>
    </slot>
    <slot :props="props"></slot>
    <slot :props="props" name="footer"></slot>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps<{
    /**
     * The title of the card
     */
    title?: string;
    /**
     * The subtitle of the card
     */
    subtitle?: string;
    class?: any;
  }>();
</script>

Calendar

Displays a calendar where users can select a date.

Checkbox

A control that allows the user to toggle between checked and not checked.