Weloop Component Library

A modular component library built with Next.js, similar to shadcn/ui. Install only the components you need directly into your project.

Installation

Install components directly - the CLI handles everything automatically:

npx weloop-kosign@latest add button

This will automatically:

• Install base dependencies (clsx, tailwind-merge, tw-animate-css)
• Create components.json configuration file
• Install CSS styles with animations
• Install the component and its dependencies

Usage

Once you've installed a component, you can import and use it in your code:

import { Button } from "@/components/ui/button";

export function MyComponent() {
  return <Button>Click me</Button>;
}

The CLI automatically handles all dependencies, configuration, and CSS setup. No manual setup required.

Available Commands

Install a component:

npx weloop-kosign@latest add <component-name>

See all available components:

npx weloop-kosign@latest list

Install or update CSS styles (optional - CSS is auto-installed with components):

npx weloop-kosign@latest css

Overwrite an existing component:

npx weloop-kosign@latest add button --overwrite

Component Dependencies

Some components depend on others. For example, the calendar component needs the button component. The CLI handles this automatically, so you don't need to worry about installing dependencies manually.

Local Development

If you're working on this project itself, you can use the npm scripts:

npm run add button
npm run components:list
npm run generate-registry

Project Structure

• Components live in components/ui/
• Registry files are in registry/ - these contain the component metadata
• CLI scripts are in scripts/

Development

Run the development server:

npm run dev

Then open http://localhost:3000 in your browser.

Building

Build the project:

npm run build

Start the production server:

npm start

License

MIT