Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/timDeHof/shadcn-timeline
- Owner: timDeHof
- Created: 2024-04-01T19:19:02.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-08T02:16:53.000Z (8 months ago)
- Last Synced: 2024-07-10T07:27:52.976Z (5 months 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 - shadcn-timeline - Customizable and re-usable timeline component for you to use in your projects. Built on top of shadcn. (Libs and Components)
- awesome-shadcn-ui - Shadcn Timeline - Customizable and re-usable timeline component for you to use in your projects. Built on top of shadcn. (Components)
- awesome-shadcn-ui - Shadcn Timeline - Customizable and re-usable timeline component for you to use in your projects. Built on top of shadcn. (Components)
README
# shadcn-timelineCustomizable and re-usable timeline component for you to use in your projects.
Built on top of shadcn.
## 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