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: about 1 year 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
- Created: 2024-04-01T19:19:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T02:16:53.000Z (over 2 years ago)
- Last Synced: 2024-07-10T07:27:52.976Z (about 2 years ago)
- Topics: nextjs, nextjs14, react, react-component, shadcn, shadcn-ui, ui-library
- Language: TypeScript
- Homepage: https://shadcn-timeline.vercel.app
- Size: 97.7 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcn-ui - Link - 06-22 | (Libs and Components)
- awesome-shadcn-ui-browser - Link - 06-22 | (Libs and Components)
- awesome-shadcnui - Github - timeline/) | ★209 | (Components & Libraries)
- awesome-shadcn-ui - shadcn-timeline - 时间线组件，支持自定义节点样式、内容布局，适配履历、流程展示场景。 (一、核心组件与扩展库 / 6. 布局与交互组件)
README
# shadcn-timeline
Customizable and re-usable timeline component for you to use in your projects.
Built on top of shadcn.
## Preview
## 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