Getting Started

fuyukaki-ui is a modern, accessible React UI component library built with TypeScript and Tailwind CSS, inspired by the warm, organic tones of nature.

Installation

Install with your preferred package manager.

pnpm add fuyukaki-ui
# or
npm install fuyukaki-ui
# or
yarn add fuyukaki-ui

Install Tailwind CSS v4.

pnpm add tailwindcss @tailwindcss/vite

Add the Tailwind plugin to your Vite config.

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()],
}

Import the theme CSS in your main stylesheet.

/* src/styles.css */
@import "tailwindcss";
@import "fuyukaki-ui/theme.css";

Import and use components.

import { Button } from 'fuyukaki-ui'

function App() {
  return (
    <Button variant="primary" size="md">
      Click me
    </Button>
  )
}

The theme.css provides:

UI library

Type safety

Styling

Build tool