Event List

blockproductivity

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

Installation

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

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

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

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

Manifest:https://uipkge.dev/r/svelte/event-list.jsonInstalls to:src/lib/components/blocks/event-list/

Variants

Loading interactive previews…

Includes

section-card data-list

Files installed (1)

src/lib/components/blocks/event-list/EventList.svelte0.5 kB

<script lang="ts">
  import type { Snippet } from 'svelte'
  import { DataList } from '$lib/components/ui/data-list'
  import { SectionCard } from '$lib/components/ui/section-card'

  interface Props {
    title?: string
    description?: string
    class?: string
    children?: Snippet
  }

  let { title = 'Upcoming Events', description, class: className, children }: Props = $props()
</script>

<SectionCard data-slot="event-list" {title} {description} class={className}>
  <DataList>
    {@render children?.()}
  </DataList>
</SectionCard>

Raw manifest:https://uipkge.dev/r/svelte/event-list.json

Change language