Linner is an opinionated timeline component for React. You can read more about why and how it was built here.
Usage
To start using the library, install it in your project:
npm install linnerAdd <Linner /> to your page, it will be the place a timeline for you, that simple!
After that you can add <LinnerTime /> as children and see props and customize your time line as you like.
import { Linner, LinnerTime } from 'linner';
const times = [
{
title: 'Amin Ahmady',
description: '...',
date: {
from: 'December 1',
to: 'now',
},
iconVariant:"PlusIcon"
},
{
title: 'Shadcn',
description: '...',
date: {
from: 'November 1',
to: 'now',
},
iconVariant:"CheckedIcon"
},
];
function App() {
return (
<div>
<Linner>
{times.map(time => (
<LinnerTime
key={time.title}
variant="default"
{...time}
/>
))}
</Linner>
</div>
);
}Documentation
You can find out more about the API and implementation in the Documentation.