Quick start
Prepare your project, install a component, and see it on your own page.
WebberUI installs React source code directly into your project, ready for you to customize. Start with the free Split Text component: no account or Pro access needed.
1. Prepare your project
You need Node.js, npm, and a project using React and Tailwind CSS v4. This guide uses Next.js App Router. For other React frameworks, set up Tailwind CSS v4 first.
Open a terminal in the project folder containing package.json. If you do not have components.json yet, run:
npx webberui@latest initAlready have components.json? Skip to step 2. Check that your @/* path alias is configured and your global Tailwind CSS is loaded.
2. Install your first free component
Run this in the same project folder. The CLI adds the source and required packages; review its proposed file changes before applying them.
npx webberui@latest add split-text.enThe default location is components/ui/split-text.tsx, or src/components/ui/split-text.tsx if you use a src folder. Your components.json aliases determine the actual location.
3. Use it on a page
Put this in app/page.tsx (or src/app/page.tsx). For an existing project, add the component to your chosen page while keeping your existing content.
import { SplitText } from "@/components/ui/split-text";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-8">
<SplitText text="Hello, WebberUI." className="text-4xl font-bold" />
</main>
);
}npm run devOpen the local URL printed in your terminal. If you see Hello, WebberUI., you are done! The letters normally animate into view. With reduced motion enabled in your system settings, static text is expected.
Troubleshooting
| Symptom | What to do |
|---|---|
Cannot resolve @/components/ui/split-text | Check that installation succeeded and compare your components.json aliases with the actual file location. Adapt the import to your configuration. |
Missing @/lib/utils or motion/react | Run the component install command again from your project root and check package installation. For manual setup, see the Split Text docs. |
| Styles are missing | Confirm that your root layout imports your Tailwind v4 global CSS, then restart the dev server. |
| Pro install returns 401 / 403 | Sign in with an account that has access and copy a fresh command from the component page. Authorized commands expire: do not share them or commit them to Git. |
| Text appears without animation | Check your system's reduced motion setting. Static text does not mean the installation failed. |
Next steps
Advanced: shorter namespace commands
Merge this registries field into your existing components.json, keeping the other fields:
{
"registries": {
"@webberui": "https://webberui.com/r/{name}.json"
}
}You can then install free components with npx webberui@latest add @webberui/split-text. Pro items still require the authorized installation flow.