Otsukimi UI

ﾕﾒｶﾜﾃﾞｻﾞｲﾝｼｽﾃﾑ

Otsukimi UI is a React component library.

Links

• Figma design
• npm
• Storybook
• Repository

Documentation

• Foundations
• Components
• Accessibility

Concept

• ﾕﾒｶﾜ
• ﾌﾜﾌﾜ
• ﾓﾁﾓﾁ
• ｶﾜｲｲ!

Installation

npm

npm install otsukimi-ui

pnpm

pnpm add otsukimi-ui

yarn

yarn add otsukimi-ui

bun

bun add otsukimi-ui

Quickstart

import { Button, Input } from "otsukimi-ui";

function App() {
  return (
    <main>
      <Button variant="moon">Get started!</Button>
      <Input placeholder="Your name" />
    </main>
  );
}

otsukimi-ui requires React 19 as a peer dependency.

Note: the font tokens (--otsukimi-font-body-family / --otsukimi-font-heading-family) reference "LINE Seed JP" and "Zen Maru Gothic", but the library does not load these fonts. Consumers should self-host or bundle them, otherwise the system fallback is used.

Customizing tokens

Design tokens are CSS variables defined in :root. To override them, import otsukimi-ui/tokens.css and set the variables you care about after it:

import "otsukimi-ui/tokens.css";

:root {
  --otsukimi-color-brand-primary-deep: #3f4a9e;
}