UIPackage
Vue React

Event List

block dashboard
Edit on GitHub

List of upcoming events in a SectionCard. Each item shows title + date + optional status badge.

Also available for Vue ->

Installation

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

Or with the named registry: npx shadcn@latest add @uipkge-react/event-list

Examples

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

EventItem 
interface EventItem {
  id: string | number
  title: string
  date: string
  status?: string
  statusVariant?: 'default' | 'secondary' | 'outline' | 'destructive'
}

npm dependencies

lucide-react

Files (1)

  • components/blocks/EventList.tsx 1.4 kB 
    'use client'

import * as React from 'react'
import { Clock } from 'lucide-react'
import { SectionCard } from '@/components/ui/section-card'
import { DataList, DataListItem } from '@/components/ui/data-list'
import { Badge } from '@/components/ui/badge'

export interface EventItem {
  id: string | number
  title: string
  date: string
  status?: string
  statusVariant?: 'default' | 'secondary' | 'outline' | 'destructive'
}

export interface EventListProps {
  title?: string
  description?: string
  events: EventItem[]
  className?: string
}

export function EventList({ title, description, events, className }: EventListProps) {
  return (
    <SectionCard title={title ?? 'Upcoming Events'} description={description} className={className}>
      <DataList>
        {events.map((event) => (
          <DataListItem key={event.id} className="flex-col items-stretch">
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium">{event.title}</p>
              {event.status && <Badge variant={event.statusVariant ?? 'secondary'}>{event.status}</Badge>}
            </div>
            <div className="text-muted-foreground mt-1 flex items-center gap-1.5 text-xs">
              <Clock className="size-3" />
              <span>{event.date}</span>
            </div>
          </DataListItem>
        ))}
      </DataList>
    </SectionCard>
  )
}

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