Shadcn 时间线组件

一个美观、无障碍且可定制的时间线组件，基于 shadcn/ui 以及 React 和 Tailwind CSS 构建。

与 shadcn/ui 一样，所有组件均可免费用于个人和商业用途。

只需复制并粘贴到您的项目中，并根据需求进行定制。代码归您所有。

演示与文档

• 🔗 查看 Storybook 文档
• 🔗 在线演示

特性

• 🎨 可定制的外观，支持不同的尺寸和颜色
• ♿️ 完全无障碍，支持 ARIA 属性
• 🔄 加载和错误状态
• 🎭 使用 Framer Motion 实现平滑动画
• 📱 响应式设计
• 🎯 TypeScript 支持
• 🌐 兼容 SSR
• 📚 完整的 Storybook 文档和示例

安装

# Clone the repository
git clone https://github.com/timDeHof/shadcn-timeline.git

# Install dependencies
npm install

# Run Storybook locally
npm run storybook

用法

import { Timeline, TimelineItem } from '@/components/timeline';
import { Check } from 'lucide-react';

export default function Example() {
  return (
    <Timeline>
      <TimelineItem
        date={new Date('2024-01-01')}
        title="Feature Released"
        description="New timeline component is now available"
        icon={<Check />}
        status="completed"
      />
      <TimelineItem
        date={new Date('2024-01-02')}
        title="In Progress"
        description="Working on documentation"
        status="in-progress"
      />
      <TimelineItem
        date={new Date('2024-01-03')}
        title="Upcoming"
        description="Planning future updates"
        status="pending"
      />
    </Timeline>
  );
}

Props

Timeline

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	时间线的尺寸
iconsize	'sm' | 'md' | 'lg'	'md'	图标的尺寸

TimelineItem

Prop	Type	Default	Description
date	Date | string | number	-	事件的日期
title	string	-	事件的标题
description	string	-	事件的描述
icon	ReactNode	-	自定义图标
iconColor	'primary' | 'secondary' | 'muted' | 'accent'	'primary'	图标的颜色主题
status	'completed' | 'in-progress' | 'pending'	'completed'	当前状态
loading	boolean	false	显示加载状态
error	string	-	显示错误状态

TimelineTime

Prop	Type	Default	Description
date	Date | string | number	-	要显示的日期
format	string | Intl.DateTimeFormatOptions	-	日期格式化选项
className	string	-	额外的 CSS 类

Server-Side Rendering

该组件完全兼容 SSR，并能正确处理 hydration。日期格式化在客户端处理，以防止 hydration 不匹配。

Development

要在本地运行 Storybook：

npm run storybook

这将在 http://localhost:6006 上启动 Storybook

测试

运行测试套件：

# Run tests
npm run test

# Run Storybook tests
npm run test-storybook

# Run Storybook tests with coverage
npm run test-storybook:coverage

贡献

• 打开一个 issue 如果你认为你遇到了一个 bug。
• 创建一个 Pull request 如果你想添加一个新功能/进行质量改进/修复 bug。

许可证

MIT