Installation
Ambar UI is a copy-paste component library for Svelte 5 + Tailwind CSS v4. No npm package to install — you own the source code.
Requirements
Svelte 5.0+
SvelteKit 2.0+
Tailwind CSS 4.0+
TypeScript 5.0+
Quick Start
Use the CLI to scaffold and add components automatically.
1
Initialize in your project
Copies app.css, theme tokens, and the stores to your project.
npx ambar-ui@latest init2
Add components
Copies the component files into src/lib/components/.
npx ambar-ui@latest add button input select3
Import and use
<script lang="ts">
import Button from '$lib/components/Button.svelte';
import Input from '$lib/components/Input.svelte';
import Select from '$lib/components/Select.svelte';
</script>
<Input label="Email" bind:value={email} />
<Button onclick={submit}>Send</Button>Manual Installation
Prefer to copy files yourself? Every component is a single .svelte file with no runtime dependencies.
# Manually copy from the repo
src/lib/components/Button.svelte
src/lib/components/Input.svelte
# ... etcSome components depend on each other. Spinner is used by Button. The CLI handles these dependencies automatically.
Tailwind Setup
Ambar UI uses Tailwind CSS v4's @theme inline directive. CSS custom properties are the source of truth.
/* app.css — already set up if you used the init command */
@import 'tailwindcss';
@theme inline {
--color-accent: oklch(0.6 0.2 265);
/* override any CSS variable here */
}Component Dependencies
Component Depends on
Button SpinnerDialog ButtonDrawer ButtonSheet ButtonSearch SpinnerToast toastStore (stores/)Accordion —Avatar —Breadcrumb —Checkbox —Dropdown —Empty State —Input —Link —List —OTP Input —Popover —Progress —Radio —Select —Sidebar —Skeleton —Slider —Spinner —Switch —Tabs —Textarea —Tooltip —Typography —Bar Chart —Candlestick —Donut Chart —Heatmap —Line Chart —Realtime —Sparkline —