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 outA modal dialog that interrupts the user with important content and expects a response.
<script lang="ts">
  import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<AlertDialog.Root>
  <AlertDialog.Trigger class={buttonVariants({ variant: "outline" })}>
    Show Dialog
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
      <AlertDialog.Description>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Continue</AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>  Installation
pnpm dlx shadcn-svelte@latest add alert-dialognpx shadcn-svelte@latest add alert-dialogbun x shadcn-svelte@latest add alert-dialognpx shadcn-svelte@latest add alert-dialogInstall 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 * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
</script>
 
<AlertDialog.Root>
  <AlertDialog.Trigger>Open</AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
      <AlertDialog.Description>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Continue</AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>