@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 collapsibleInstall bits-ui:
pnpm add bits-ui -DCopy and paste the following code into your project.
<script lang="ts">
import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
import { cn } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
...restProps
}: CollapsiblePrimitive.ContentProps = $props();
</script>
<CollapsiblePrimitive.Content
bind:ref
data-slot="collapsible-content"
class={cn('bg-background px-3 py-3 text-sm text-zinc-300', className)}
{...restProps}
/>
<script lang="ts">
import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
import { cn } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
...restProps
}: CollapsiblePrimitive.TriggerProps = $props();
</script>
<CollapsiblePrimitive.Trigger
bind:ref
data-slot="collapsible-trigger"
class={cn(
'flex w-full items-center justify-between border-b border-zinc-900 px-3 py-2 font-mono text-xs font-semibold tracking-[0.14em] text-zinc-300 uppercase transition-colors hover:bg-zinc-950 hover:text-white focus-visible:ring-2 focus-visible:ring-zinc-300 focus-visible:outline-none',
className
)}
{...restProps}
/>
<script lang="ts">
import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
import { cn } from '$UTILS$.js';
let {
ref = $bindable(null),
open = $bindable(false),
class: className,
...restProps
}: CollapsiblePrimitive.RootProps = $props();
</script>
<CollapsiblePrimitive.Root
bind:ref
bind:open
data-slot="collapsible"
class={cn('border border-zinc-800 bg-background text-zinc-100', className)}
{...restProps}
/>
import Root from './collapsible.svelte';
import Trigger from './collapsible-trigger.svelte';
import Content from './collapsible-content.svelte';
export {
Root,
Content,
Trigger,
//
Root as Collapsible,
Content as CollapsibleContent,
Trigger as CollapsibleTrigger
};
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>