Installation
npx lovdacn@latest add button(You can also use the shortened lvcn alias, e.g., npx lvcn@latest add button)
This copies the component source into your project (typically components/ui/button.tsx) and installs any required dependencies.
Registry dependencies: text, utils
Usage
import { Button } from "@/components/ui/button"
import { Text } from "@/components/ui/text"
export function Example() {
return (
<Button>
<Text>Button</Text>
</Button>
)
}Variants
Default
<Button>
<Text>Default</Text>
</Button>Outline
<Button variant="outline">
<Text>Outline</Text>
</Button>Secondary
<Button variant="secondary">
<Text>Secondary</Text>
</Button>Ghost
<Button variant="ghost">
<Text>Ghost</Text>
</Button>Destructive
<Button variant="destructive">
<Text>Destructive</Text>
</Button>Sizes
<Button size="sm"><Text>Small</Text></Button>
<Button size="default"><Text>Default</Text></Button>
<Button size="lg"><Text>Large</Text></Button>Styles
lvcn components are available across all style packs:
| Style | Notes |
|---|---|
default | Classic rounded system |
new-york | Compact, refined |
nova | Sharp corners (default in many setups) |
luma / lyra / maia / mira | Radius & font variants |
rhea / sera / vega | Pill, zero-radius, balanced |
Style is set at project init via lvcn.json (style + styleEngine).
Platform
These components target Expo / React Native with NativeWind or Uniwind. They use Platform.select where web and native need different behavior.