https://github.com/timdehof/shadcn-timeline
Customizable and re-usable timeline component for you to use in your projects. Built on top of shadcn.
https://github.com/timdehof/shadcn-timeline
nextjs nextjs14 react react-component shadcn shadcn-ui ui-library
Last synced: 3 months ago
JSON representation
Customizable and re-usable timeline component for you to use in your projects. Built on top of shadcn.
- Host: GitHub
- URL: https://github.com/timdehof/shadcn-timeline
- Owner: timDeHof
- License: mit
- Created: 2024-04-01T19:19:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-03T23:22:11.000Z (6 months ago)
- Last Synced: 2025-04-07T14:11:13.466Z (3 months ago)
- Topics: nextjs, nextjs14, react, react-component, shadcn, shadcn-ui, ui-library
- Language: JavaScript
- Homepage: https://timdehof.github.io/shadcn-timeline/
- Size: 1.55 MB
- Stars: 177
- Watchers: 3
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Shadcn Timeline Component
A beautiful, accessible, and customizable timeline component built on top of shadcn/ui with React and Tailwind CSS.
The same as shadcn/ui, all components are free to use for personal and commercial.
Just copy and paste to your project and customize to your needs. The code is yours.
## Demo & Documentation
- 🔗 [View Storybook Documentation](https://timdehof.github.io/shadcn-timeline/)
- 🔗 [Live Demo](https://shadcn-timeline.vercel.app/)
## Features
- 🎨 Customizable appearance with different sizes and colors
- ♿️ Fully accessible with ARIA attributes
- 🔄 Loading and error states
- 🎭 Smooth animations with Framer Motion
- 📱 Responsive design
- 🎯 TypeScript support
- 🌐 SSR Compatible
- 📚 Full Storybook documentation and examples
## Installation
```bash
# Clone the repository
git clone https://github.com/timDeHof/shadcn-timeline.git
# Install dependencies
npm install
# Run Storybook locally
npm run storybook
```
## Usage
```tsx
import { Timeline, TimelineItem } from '@/components/timeline';
import { Check } from 'lucide-react';
export default function Example() {
return (
}
status="completed"
/>
);
}
```
## Props
### Timeline
| Prop | Type | Default | Description |
| -------- | -------------------- | ------- | -------------------- |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the timeline |
| iconsize | 'sm' \| 'md' \| 'lg' | 'md' | Size of icons |
### TimelineItem
| Prop | Type | Default | Description |
| ----------- | ----------------------------------------------- | ----------- | ------------------------ |
| date | Date \| string \| number | - | Date of the event |
| title | string | - | Title of the event |
| description | string | - | Description of the event |
| icon | ReactNode | - | Custom icon |
| iconColor | 'primary' \| 'secondary' \| 'muted' \| 'accent' | 'primary' | Color theme of the icon |
| status | 'completed' \| 'in-progress' \| 'pending' | 'completed' | Current status |
| loading | boolean | false | Show loading state |
| error | string | - | Show error state |
### TimelineTime
| Prop | Type | Default | Description |
| --------- | ------------------------------------ | ------- | ----------------------- |
| date | Date \| string \| number | - | Date to display |
| format | string \| Intl.DateTimeFormatOptions | - | Date formatting options |
| className | string | - | Additional CSS classes |
## Server-Side Rendering
The component is fully SSR compatible and handles hydration properly. Date formatting is handled on the client side to prevent hydration mismatches.
## Development
To run Storybook locally:
```bash
npm run storybook
```
This will start Storybook on http://localhost:6006
## Testing
Run the test suite:
```bash
# Run tests
npm run test
# Run Storybook tests
npm run test-storybook
# Run Storybook tests with coverage
npm run test-storybook:coverage
```
## Contributing
- [Open an issue](https://github.com/timDeHof/shadcn-timeline/issues) if you believe you've encountered a bug.
- Make a [Pull request](https://github.com/timDeHof/shadcn-timeline/pulls) if you want to add a new feature/make quality of life improvements/ fix bugs.
## License
MIT