UI Components

Basic Information About Components

Install components using the CLI:

Add Components

pnpm dlx smoothui-cli@latest add animated-input

Add Multiple Components

pnpm dlx smoothui-cli@latest add animated-input siri-orb grid-loader

Interactive Mode

pnpm dlx smoothui-cli@latest add

Using shadcn CLI

You can also install components using the shadcn CLI:

pnpm dlx shadcn@latest add @smoothui/animated-input

Usage

import { AnimatedInput, NumberFlow, WaveText } from "@repo/smoothui/components";

export function MyComponent() {
  return (
    <div>
      <AnimatedInput label="Email" placeholder="Enter your email" />
      <NumberFlow value={1234} />
      <WaveText>Hello World</WaveText>
    </div>
  );
}

Customization

All components are customizable via:

• Tailwind CSS utility classes
• CSS variables for theming
• Component props for behavior and styling

Components are tree-shakeable, TypeScript-first, and accessible by default.