Install

To start using the library, install it in your project:

npm install linner

Add <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>
  );
}

Demo

December 1 - now
Amin Ahmady
...
November 1 - now
Shadcn
...

Introduction