Karigiri Kit
ComponentsTokensPlaygroundStorybook

Timeline

A vertical activity feed. Each TimelineItem has a dot, connecting line, title, optional timestamp, and body content. Use the variant prop (primary, success, danger, warning) to colour the dot and pass an icon for visual context.

Basic

Each TimelineItem takes a title and optional time. A connecting line links items automatically.

  1. Account created

    Welcome to Karigiri Kit. Your account is ready.

  2. First component published

    Button, Badge, and Card shipped to npm.

  3. v1.0.0 released

    Stable release with 36 components and full dark mode support.

  4. 46 components shipped

Variants with icons

Use variant to colour the dot and pass an icon for visual context.

  1. Deployment started

    Building production bundle…

  2. Tests passed

    178 tests passing across 44 suites.

  3. Lint failed

    ESLint: 2 errors in AspectRatioDocs.tsx.

  4. Deploy queued

    Waiting for previous job to complete.

Horizontal

Set orientation="horizontal" to lay items out left-to-right. The dot sits above the content and the line runs between dots.

  1. Order placed

  2. Processing

    Payment confirmed.

  3. Shipped

  4. Delivered

Dark mode

  1. Deployment started

  2. Tests passed

  3. Lint failed

    2 errors — fixed and re-queued.

  4. Deploy succeeded