@chihaya-ui/react

A modern React component library built with Tailwind CSS v4.

Features

• 🎨 Styled with Tailwind CSS (prefix: chu-)
• ⚡️ Built with Vite and TypeScript
• 🔒 No style conflicts with your project
• 📦 Tree-shakable ESM bundle
• 🎯 Fully typed with TypeScript

Installation

npm install @chihaya-ui/react
# or
yarn add @chihaya-ui/react
# or
pnpm add @chihaya-ui/react
# or
bun add @chihaya-ui/react

Usage

Import the CSS file once in your app entry point:

import '@chihaya-ui/react/styles.css';

Then use the components:

import { BaseButton, PrimaryButton } from '@chihaya-ui/react';

function App() {
  return (
    <div>
      <BaseButton>Click me</BaseButton>
      <PrimaryButton>Primary Action</PrimaryButton>
    </div>
  );
}

Components

BaseButton

A basic button component with neutral styling.

<BaseButton onClick={() => console.log('clicked')}>
  Base Button
</BaseButton>

PrimaryButton

A primary action button with blue styling.

<PrimaryButton onClick={() => console.log('clicked')}>
  Primary Button
</PrimaryButton>

Styling

All Tailwind classes are prefixed with chu- to avoid conflicts with your project's styles. You can customize components by passing your own className:

<BaseButton className="chu-w-full">
  Full Width Button
</BaseButton>

Development

# Install dependencies
bun install

# Build the package
bun run build

# Run Storybook
bun run storybook

License

MIT