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 Vue ->

Installation

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

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

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

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

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

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`title`	`string`	—	optional
`description`	`string`	—	optional
`className`	`string`	—	optional
`children`	`React.ReactNode`	—	optional

Includes

section-card data-list

Files installed (1)

components/blocks/EventList.tsx0.6 kB

'use client'

import * as React from 'react'
import { SectionCard } from '@/components/ui/section-card'
import { DataList } from '@/components/ui/data-list'

export interface EventListProps {
  title?: string
  description?: string
  className?: string
  children?: React.ReactNode
}

export function EventList({ title, description, className, children }: EventListProps) {
  return (
    <SectionCard
      data-slot="event-list"
      title={title ?? 'Upcoming Events'}
      description={description}
      className={className}
    >
      <DataList>{children}</DataList>
    </SectionCard>
  )
}