Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 23 days ago
JSON representation

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

Awesome Lists containing this project

README

        



# shadcn-timeline

Customizable and re-usable timeline component for you to use in your projects.

Built on top of shadcn.

Preview Usage Installation Tech Stack

## Preview

![shadcn_timeline_laptop](https://github.com/timDeHof/shadcn-timeline/assets/2568193/a710af62-36b6-4ea8-b8ba-130f913561dd)

## Usage
You can use the source code and copy paste components into your NextJS projects.
These components in particular:

```bash
/src/app/components/timeline/timeline-layout.tsx & timeline.tsx
```

## Installation
If you'd like to spin up a local environment similar to the **demo**, follow these instructions:

1. Clone the repository to a directory on your pc via command prompt:
```bash
git clone https://github.com/timDeHof/shadcn-timeline.git
```
2. Open the folder:
```bash
cd shadcn-timeline
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Go to [localhost](http://localhost:3000) and start playing around!

## Tech stack
[NextJS](https://nextjs.org/) - React Framework for the web

[TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework

[shadcn-ui](https://ui.shadcn.com/) - UI component built using Radix UI and Tailwind CSS