CLI Reference

The localhost.io ecosystem is powered by the shadcn CLI registry system.

This CLI allows you to:

• Initialize your project with best-practice defaults
• Add production-ready components directly into your codebase
• Automatically install required dependencies
• Preview and explore components before installation

All actions are performed directly from your terminal, keeping your workflow fast and predictable.

init

The init command prepares your project to work with the localhost.io registry.

You should run this command once per project, before adding any components.

What init does

Running init will automatically:

• Create a components.json configuration file
• Install required base dependencies
• Add the cn utility function
• Configure Tailwind CSS for component usage
• Set up CSS variables for theming
• Prepare registry support for localhost.io components

This ensures all components work consistently across your application.

Run the init command

Choose your package manager:

npx shadcn@latest init

pnpm dlx shadcn@latest init

npx shadcn@latest init

bunx --bun shadcn@latest init

add

The add command installs localhost.io components directly into your project.

Each component is:

• Copied into your source code
• Fully editable
• Automatically wired with required dependencies

This command also installs related libraries (such as Motion, GSAP, or utility packages) when required.

Add a component

npx shadcn@latest add https://localhost.io/r/button.json

pnpm dlx shadcn@latest add https://localhost.io/r/button.json

npx shadcn@latest add https://localhost.io/r/button.json

bunx --bun shadcn@latest add https://localhost.io/r/button.json

How the localhost.io CLI works

Unlike traditional UI libraries, the CLI does not install components as hidden dependencies.

Instead, it:

• Copies component source code into your project
• Keeps everything fully editable
• Avoids runtime lock-in
• Makes debugging and customization simple

You always own the code.

During initialization

The CLI may prompt you to choose:

• Your framework (Next.js, monorepo, etc.)
• Base color palette
• Whether to use CSS variables
• Whether to use a src/ directory

💡 Tip: The default options are recommended for most projects.

Init options

What happens when you add a component

• Component files are copied into your project
• Dependencies are installed automatically
• Tailwind styles are applied
• The component is ready to use immediately

No extra configuration is required.

Add options

view

The view command lets you preview components before installing them.

This is useful when you want to:

• Inspect component structure
• Review dependencies
• Understand what will be added to your project

View a component

npx shadcn@latest view button