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@huntabyte starred 3 repositories
@huntabyte/bits-ui
@melt-ui/melt-ui
@sveltejs/svelte
<script lang="ts">
import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
<Collapsible.Root class="w-[350px] space-y-2">
<div class="flex items-center justify-between space-x-4 px-4">
<h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
<Collapsible.Trigger
class={buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}
>
<ChevronsUpDownIcon />
<span class="sr-only">Toggle</span>
</Collapsible.Trigger>
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@huntabyte/bits-ui
</div>
<Collapsible.Content class="space-y-2">
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@melt-ui/melt-ui
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@sveltejs/svelte
</div>
</Collapsible.Content>
</Collapsible.Root>
Installation
pnpm dlx shadcn-svelte@latest add collapsible
npx shadcn-svelte@latest add collapsible
bun x shadcn-svelte@latest add collapsible
npx shadcn-svelte@latest add collapsible
Install bits-ui
:
pnpm i bits-ui -D
npm i bits-ui -D
bun install bits-ui -D
yarn install bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
</script>
<Collapsible.Root>
<Collapsible.Trigger>Can I use this in my project?</Collapsible.Trigger>
<Collapsible.Content>
Yes. Free to use for personal and commercial projects. No attribution
required.
</Collapsible.Content>
</Collapsible.Root>