Get Started
Migration
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Formsnap
- Hover Card
- Input OTP
- Input
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Range Calendar
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toggle Group
- Toggle
- Tooltip
- Typography
Installation
Special sponsor
We're looking for one partner to be featured here.
Support the project and reach thousands of developers.
Reach out<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>Button</Button>Installation
pnpm dlx shadcn-svelte@latest add buttonnpx shadcn-svelte@latest add buttonbun x shadcn-svelte@latest add buttonnpx shadcn-svelte@latest add buttonInstall bits-ui:
pnpm i bits-ui -Dnpm i bits-ui -Dbun install bits-ui -Dyarn install bits-ui -DCopy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline">Button</Button>Link
You can convert the <button> into an <a> element by simply passing an href as a prop.
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button href="/dashboard">Dashboard</Button>Alternatively, you can use the buttonVariants helper to create a link that looks like a button.
<script lang="ts">
import { buttonVariants } from "$lib/components/ui/button";
</script>
<a href="/dashboard" class={buttonVariants({ variant: "outline" })}>
Dashboard
</a>Examples
Primary
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>Button</Button>Secondary
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="secondary">Secondary</Button>Destructive
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="destructive">Destructive</Button>Outline
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline">Outline</Button>Ghost
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="ghost">Ghost</Button>Link
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="link">Link</Button>With Icon
<script lang="ts">
import GitBranchIcon from "@lucide/svelte/icons/git-branch";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline" size="sm">
<GitBranchIcon />
Login with Email
</Button>Icon
<script lang="ts">
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="secondary" size="icon" class="size-8">
<ChevronRightIcon />
</Button>Loading
<script lang="ts">
import Loader2Icon from "@lucide/svelte/icons/loader-2";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button disabled>
<Loader2Icon class="animate-spin" />
Please wait
</Button>