Skip to content

Getting Started

@kaiverse/k is a collection of powerful utilities, custom React hooks, and fully featured “uncommon” React components.

Installation

Terminal window
pnpm add @kaiverse/k

Packages

  • @kaiverse/k/ui: some rarely used React components.
  • @kaiverse/k/hooks: Hooks.
  • @kaiverse/k/utils: Utility functions.

If you are looking for a Design system or a component library with a wide range of components from basic (eg: <Button>, <Input>, <Layout>) to complex (such as <RichTextEditor>, <Chart>), I highly recommend checking out shadcn UI, Mantine, and daisyui.

Usage with Server Components

All @kaiverse/k/ui components already have 'use client'; directive at the top of the file.

Usage with NextJS

To use @kaiverse/k with NextJS, adding the following to your next.config file:

next.config.ts
const nextConfig = {
..., // other next config
transpilePackages: ['@kaiverse/k'],
}

app router - tree shaking

To enable tree shaking with app router, enable experimental optimizePackageImports feature:

next.config.ts
const nextConfig = {
..., // other next config
transpilePackages: ['@kaiverse/k'],
experimental: {
..., // other experimental flags
optimizePackageImports: ['@kaiverse/k'],
},
}

Usage with Astro

Please make sure your Astro project supports React. If not, follow the official integration guide.

Remember to add client directive to make sure components are rendered on the client side.

Terminal in Astro island

Try type something and then command clear to clear the logs.
$

Children passing

Children passed into a React component from an Astro component are parsed as plain strings, not React nodes.

Enable the experimental flag experimentalReactChildren to make it work via astro.config file.

Read more

Please note that there is some runtime cost to this.

astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
..., // other astro config
integrations: [
react({
experimentalReactChildren: true,
}),
],
});