@mikata/ui

A library of 80+ accessible, themeable components built on top of Mikata. Buttons, inputs, modals, data tables, date pickers, and more - all following the same prop shape so model() wires them up the same way as native elements.

Setup

import { ThemeProvider, Button, TextInput } from '@mikata/ui';
import '@mikata/ui/styles.css';

function App() {
  return (
    <ThemeProvider>
      <TextInput label="Email" type="email" />
      <Button color="primary">Sign up</Button>
    </ThemeProvider>
  );
}

Form bindings

Form components expose the same value/onInput/checked/onChange shape Mikata's model() helper emits, so the spread pattern you use for native inputs works identically on them.

import { signal, model } from 'mikata';
import { TextInput, Checkbox } from '@mikata/ui';

const [name, setName] = signal('');
const [agree, setAgree] = signal(false);

<TextInput label="Name" {...model(name, setName)} />
<Checkbox label="I agree" {...model(agree, setAgree, 'checkbox')} />

Live playgrounds

Each component page includes a live playground - tweak props and see the widget update in place. Start with the Button page.