zidane-ui

Use zidane-ui for the kit's components, motion helpers, hooks, code highlighting and theme engine, without the chat layer. It does not need zidane. It needs the motion peer, because Overlay, FloatingSurface and Lightbox animate with it. Every module tree-shakes on its own, so importing one component costs only that component. See Components and Theming.

import { buttonClass, IconButton, Segmented } from 'zidane-ui'
import { useState } from 'react'

export function Toolbar() {
  const [view, setView] = useState<'list' | 'grid'>('list')
  return (
    <div>
      <Segmented ariaLabel="View" value={view} onChange={setView} options={[{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }]} />
      <IconButton icon="i-ph-gear" label="Settings" />
      <button className={buttonClass({ variant: 'solid', size: 'sm' })}>Save</button>
    </div>
  )
}

The wizard parts build a flow of several steps. Stepper shows the progress as dots or as a rail. StepFrame and StepActions lay out a step and its footer. ChoiceCards is a radio group of cards, and SwatchPicker is a radio group of colors or images that names the pick. ToggleCard is a switch with room to explain itself. PreviewWindow is a window with its own theme. BrowserSignIn shows a browser sign-in in each of its states, and ThemeThumb shows a theme as a small window. theme/accents holds the accent presets that a theme picker offers. The setup wizard of zidane, in zidane-ui/onboarding, uses these parts.