@huntabyte starred 3 repositories
@huntabyte/bits-ui
@melt-ui/melt-ui
@sveltejs/svelte
<script lang="ts">
import CaretUpDownIcon from "phosphor-svelte/lib/CaretUpDownIcon";
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" })}
>
<CaretUpDownIcon />
<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 jsrepo@latest add collapsiblenpx jsrepo@latest add collapsibleyarn dlx jsrepo@latest add collapsiblebunx jsrepo@latest add collapsibleInstall bits-ui:
pnpm add bits-ui -Dnpm install bits-ui -Dyarn add bits-ui -Dbun 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 '$lib/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-muted-foreground', className)}
{...restProps}
/>
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>