Event List

blockproductivity

List of upcoming events in a SectionCard. Spell rows out inline with DataListItem — title + Clock date + optional status Badge per row.

Also available for React ->

Installation

$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/event-list.json

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/event-list.json

$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/event-list.json

$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/event-list.json

Named registry:npx shadcn-vue@latest add @uipkge/event-listInstalls to:app/components/blocks/

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`title`	`string`	—	optional
`description`	`string`	—	optional
`class`	`string`	—	optional

Includes

section-card data-list

Files installed (1)

app/components/blocks/EventList.vue0.4 kB

<script setup lang="ts">
import { SectionCard } from '@/components/ui/section-card'
import { DataList } from '@/components/ui/data-list'

defineProps<{
  title?: string
  description?: string
  class?: string
}>()
</script>

<template>
  <SectionCard
    data-slot="event-list"
    :title="title ?? 'Upcoming Events'"
    :description="description"
    :class="$props.class"
  >
    <DataList>
      <slot />
    </DataList>
  </SectionCard>
</template>