Guidelines for using and extending ShadCN Svelte components in Litekart Admin.
Litekart Admin uses shadcn-svelte for its UI components. These components are built on top of bits-ui and tailwind-merge.
Components are located in src/lib/components/ui/.
Always import components from their specific directory:
import { Button } from '$lib/components/ui/button';
import * as Dialog from '$lib/components/ui/dialog';
Use the classes or class prop (depending on the component version) and tailwind-merge (cn utility) for styling overrides.
<Button class={cn('w-full bg-primary', className)}>Click Me</Button>
To add a new shadcn component, use the CLI:
npx shadcn-svelte@latest add [component-name]
Note: Ensure the component is added to src/lib/components/ui/.
Dialog.Content, Dialog.Header) instead of creating large, monolithic wrapper components.bits-ui.src/lib/components/ui/ when adding or modifying components.src/app.css for consistent theming across components.