Skip to main content

Installation

Prerequisites​

  • Node.js 20+
  • React 18+
  • pnpm (recommended) or npm/yarn

Install Packages​

# Using pnpm (recommended)
pnpm add @kikumi3n/ui @kikumi3n/tokens

# Using npm
npm install @kikumi3n/ui @kikumi3n/tokens

Setup​

1. Import Global Styles​

In your app's entry point (e.g., main.tsx, App.tsx, or layout.tsx):

// Import design tokens (CSS Variables)
import '@kikumi3n/tokens/css';

// Import component styles
import '@kikumi3n/ui/styles.css';

2. Add ThemeProvider​

Wrap your app with ThemeProvider for theme support:

import { ThemeProvider } from '@kikumi3n/ui';

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <YourApp />
    </ThemeProvider>
  );
}

3. Use Components​

import { Button, Card, Input } from '@kikumi3n/ui';

function MyPage() {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Module Federation Setup​

When using @kikumi3n/ui via Module Federation:

// webpack.config.js or vite.config.ts
shared: {
  react: { singleton: true },
  'react-dom': { singleton: true },
}
tip

@kikumi3n/ui declares React as a peer dependency and uses scoped CSS class names (k3n-*), so it's fully compatible with Module Federation without style conflicts.

TypeScript​

Types are included out of the box — no @types/* packages needed.

import type { ButtonProps, InputProps } from '@kikumi3n/ui';

What's Next?​