Kosorikōsori alpha
ExamplesTemplatesShowcase
Installation

Vite

Installation guide for Vite.

Create project

Run the create vite command to create a new React project.

npm create vite

Install Tailwind CSS

Install tailwindcss and its peer dependencies.

npm install -D tailwindcss postcss autoprefixer

Then generate the tailwind.config.js and postcss.config.js files.

npx tailwindcss init -p

Add this import header in your main css file, src/index.css in this case:

@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* ... */

Configure the tailwind template paths in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"], 
  theme: {
    extend: {},
  },
  plugins: [],
};

Update tsconfig.json

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

Update tsconfig.app.json

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

{
  "compilerOptions": {
      // ...
      "baseUrl": ".",
      "paths": {
        "~/*": ["./src/*"]
      },
    }
    // ...
  }
}

Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error:

npm install -D @types/node
import path from "path"; 
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./src"),
    },
  },
});

Run the CLI

Run the @kosori/cli init command to configure the project.

npx @kosori/cli init

That's it!

You can now start adding components or hooks to your project.

npx @kosori/cli add components button

The command will install the Button component to your project. And you can import it in your code.

import { Button } from '~/components/ui/button'; 
 
export const Home = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
 
export default Home;
Edit on GitHub

Previous

Remix

Next

Changelog

On this page

Contribute
Report a bugNew ideasStart a discussion