TimeKit ⏱️

The easiest, most customizable date-time picker for modern apps.

TimeKit is a highly customizable, accessible, neutral, and performance-conscious date-time picker built headless-first. It is designed to be the last date-time picker you'll ever need.

Features

• 🪶 Ultra-lightweight: No bulky third-party date libraries required (e.g., date-fns or dayjs). Uses native Date and Intl APIs.
• 🎨 Agnostic & Hackable: Engineered with pure CSS variables to eliminate CSS-in-JS runtime overhead.
• ♿ Accessible natively: Full ARIA compliance, screen reader compatibility, keyboard navigation, and focus trapping.
• 🔌 Framework ready: Native SSR support, works flawlessly inside Next.js App Router and server components.

Packages

• @abhineet-labs/timekit-core - The robust, headless state machine and calendar math engine.
• @abhineet-labs/timekit - Our flagship React component. Drop-in, customizable <DateTimePicker />.

Installation

npm install @abhineet-labs/timekit
# or
pnpm add @abhineet-labs/timekit
# or
yarn add @abhineet-labs/timekit

Quick Start (React)

import { DateTimePicker } from '@abhineet-labs/timekit';
import '@abhineet-labs/timekit/styles.css'; // Optional: import default styling

export default function BookingForm() {
  return (
    <DateTimePicker 
      mode="datetime"
      theme="system"
      onChange={(value) => console.log('Selected:', value)}
    />
  );
}

Documentation & Demo

Visit timekit.dev (placeholder) to try our interactive demo playground, play with the component in all modes, view detailed API documentation, and check out our bundle sizes.

Motivation

Current popular date-time pickers suffer from:

1. Massive, inseparable bundle sizes.
2. Clunky mobile interactions.
3. Rigid style structures that break design systems.

We built TimeKit to fix this by separating the complex math of leaps and bounds from the actual DOM nodes, making rendering light and declarative.

License

MIT