Nuda Kit uses shadcn/vue for its UI components. Unlike traditional component libraries, shadcn/vue components are copied directly into your codebase—giving you full ownership and control over every component.
Full Ownership
No Dependencies
Accessible
Customizable
All components are located in frontend/app/components/ui/:
| Component | Description |
|---|---|
alert-dialog | Modal dialogs for important actions |
avatar | User profile images with fallback |
badge | Status indicators and labels |
breadcrumb | Navigation breadcrumbs |
button | Buttons with multiple variants |
calendar | Date picker calendar |
card | Content containers |
chart | Data visualization components |
checkbox | Checkbox inputs |
collapsible | Expandable content sections |
command | Command palette / search |
dialog | Modal dialogs |
dropdown-menu | Dropdown menus |
form | Form field components |
input | Text inputs |
label | Form labels |
navigation-menu | Navigation menus |
pin-input | PIN/OTP input fields |
popover | Popover overlays |
progress | Progress indicators |
select | Select dropdowns |
separator | Visual dividers |
sheet | Slide-out panels |
sidebar | Application sidebar |
skeleton | Loading placeholders |
sonner | Toast notifications |
spinner | Loading spinners |
switch | Toggle switches |
table | Data tables |
tabs | Tabbed interfaces |
tooltip | Hover tooltips |
Import components from their respective folders:
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
</script>
<template>
<Card>
<CardHeader>
<CardTitle>My Card</CardTitle>
</CardHeader>
<CardContent>
<Input placeholder="Enter your name" />
<Button>Submit</Button>
</CardContent>
</Card>
</template>
The Button component supports multiple variants:
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
<IconComponent />
</Button>
To add more shadcn/vue components:
Go to shadcn-vue.com and find the component you need.
Use the CLI or manually copy the component code into your components/ui/ folder.
Import the component in your Vue files and start using it.
npx shadcn-vue@latest add [component]