shadcn-timeline - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #go #android #rust #java #awesome-list #vue #pytorch #security #mcp #ios #open-source

shadcn-timeline

(★ 315)

Customizable and re-usable timeline component for you to use in your projects. Built on top of shadcn.

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - feature_request.md
- - deploy-github-pages.yml
- FUNDING.yml
- main.ts
- manager-head.html
- preview.ts
- preview.tsx
- - .gitignore
- - .gitignore
- next.svg
- robots.txt
- sitemap-0.xml
- sitemap.xml
- vercel.svg
- - data.tsx
  - favicon.ico
  - layout.tsx
  - page.tsx
  - robot.ts
  - sitemap.ts
- - buy-me-a-coffee.tsx
  - code-block.tsx
  - theme-toggle.tsx
- - metadata.ts
  - site.ts
- - utils.ts
- - globals.css
- - index.ts
- - favicon.svg
  - nunito-sans-bold-italic.woff2
  - nunito-sans-bold.woff2
  - nunito-sans-italic.woff2
  - nunito-sans-regular.woff2
- - globals-module-info.js
  - globals-runtime.js
  - globals.js
  - runtime.js
- - globals.js
  - runtime.js
- favicon.svg
- index.html
- index.json
- next.svg
- nunito-sans-bold-italic.woff2
- nunito-sans-bold.woff2
- nunito-sans-italic.woff2
- nunito-sans-regular.woff2
- project.json
- robots.txt
- sitemap-0.xml
- sitemap.xml
- vercel.svg
.eslintrc.json
.gitignore
.prettierrc
components.json
jest.config.js
jest.setup.js
LICENSE
next-sitemap.config.js
next.config.mjs
package-lock.json
package.json
postcss.config.js
README.md
tailwind.config.ts
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/timDeHof/shadcn-timeline

Downloads the entire project code from GitHub to your computer.

cd shadcn-timeline

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm run storybook

Type this command into your terminal and run it.

npm run test

Type this command into your terminal and run it.

npm run test-storybook

Type this command into your terminal and run it.

npm run test-storybook:coverage

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Shadcn Timeline Component
<a href="https://www.buymeacoffee.com/timDeHof" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

A beautiful, accessible, and customizable timeline component built  on top of <a href="https://shadcn.com" target="_blank">shadcn/ui</a> 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 (
    <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'    | 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