Getting Started
@kaiverse/k
is a collection of powerful utilities, custom React hooks, and fully featured “uncommon” React components.
Installation
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:
app router - tree shaking
To enable tree shaking with app router, enable experimental optimizePackageImports
feature:
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.