@bizarre/ui

01 / INLAY

Inlay

Structured text input

A composable input primitive for building rich text experiences with tokens, mentions, search filters, and more. Fully headless, fully accessible.

Token renderingReact components as tokens

Mentions@mention support built-in

Native UXFeels like a real input

AccessibleWCAG 2.1 compliant

MentionsSearch filtersAI inputsTags

Storybook

import { Inlay } from '@bizarre/ui'

<Inlay.Root>
  <Inlay.Input placeholder="Type here..." />
  <Inlay.Tokens>
    {tokens.map(t => <Inlay.Token key={t.id} />)}
  </Inlay.Tokens>
</Inlay.Root>

02 / CHRONO

Storybook

import { Chrono } from '@bizarre/ui'

<Chrono.Root onDateRangeChange={setRange}>
  <Chrono.Trigger>
    <Chrono.Input />
  </Chrono.Trigger>
  <Chrono.Portal>
    <Chrono.Shortcut duration={{ hours: 1 }} />
  </Chrono.Portal>
</Chrono.Root>

Chrono

Intelligent time picker

A time range picker that understands natural language. Type "last 2 weeks" or "yesterday to tomorrow" and watch it parse your intent.

Natural languagePowered by chrono-node

Keyboard navArrow keys to modify

Timezone awareHandles TZ correctly

Quick shortcuts15m, 1h, 1d presets

AnalyticsLogsDashboardsMonitoring