Getting Started

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

Installation

pnpm

pnpm add @kaiverse/k

npm

npm i @kaiverse/k

Yarn

yarn add @kaiverse/k

Packages

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

Note

@kaiverse/k/ui is not a common React component library or a Design System. It’s a collection of rarely used components.

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.

Caution

Some components like <Dialog> have associated compound components. Compound components cannot be used in server components. Instead of Component.X syntax, use ComponentX or add 'use client' directive to the top of your pages/layouts/components.

Usage with Next.js

To use @kaiverse/k with Next.js, 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

No one asked but

This documentation is built 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.

Playground

Terminal in Astro island

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

$

Source code

astro-usage.astro

---
import {Terminal} from '@kaiverse/k/ui'
---

<div class="container mx-auto not-content">
  <Terminal
    windowTitle="Terminal in Astro island"
    greeting="Try type something and then command clear to clear the logs."
    client:load
  />
</div>

Tip

Even though you can use some @kaiverse/k/ui components directly in Astro component, it’s recommended to wrap them in React islands with your custom logic/React states and then import your React components into Astro components.

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,
    }),
  ],
});

Integration

TailwindCSS

Since @kaiverse/k/ui component CSS rules are applied within k-components layer. If you are facing issues with TailwindCSS styles overriding @kaiverse/k/ui styles or vice versa, you might need to update the order of precedence in case of multiple cascade layers.

globals.css

@layer base, k-components, theme, components, utilities;

@import 'tailwindcss';