Installation

Add Ketyap UI components to your React project.

Set up shadcn

Initialize shadcn in your React project if you have not already:


$ pnpm dlx shadcn@latest init

Choose a Base UI style. Ketyap UI uses @base-ui/react for interactive primitives.

Run the installation command on a component's documentation page, or add Button directly:


$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/button.json

The registry includes the Foundation and Hook files each component needs, along with its npm dependencies.

import { Button } from "@/components/ui/button";
 
export const Demo = () => <Button variant="primary">Save changes</Button>;

The installed source belongs to your project. Adjust it to your needs.

Clone ketyap/ui, install dependencies, and start the documentation site:

git clone https://github.com/ketyap/ui.git
cd ui
pnpm install
pnpm dev

Run pnpm build to build the registry and documentation together.

On This Page