N
neokit

Collapse

A standalone collapsible panel — click to reveal hidden content. Three mechanisms are available: checkbox toggle, focus-to-open, and native <details>. Unlike Accordion, each Collapse is independent.

Basic (checkbox)

Default method="checkbox" — click the title bar to toggle.

collapse checkbox
Click me to open
Hidden content revealed on click. Click again to close.

Open by default

Pass open to start the panel in the expanded state.

collapse open
I start open
This content is visible on page load. Click the title to close.

Arrow icon

icon="arrow" adds an animated chevron on the right side.

collapse-arrow
What is DaisyUI?
DaisyUI is the most popular component library for Tailwind CSS. It adds component class names to Tailwind CSS so you can make beautiful websites faster.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup.
What is Astro?
Astro is a web framework for content-driven websites. It ships zero JavaScript by default and supports any UI framework.

Plus icon

icon="plus" toggles between + and − symbols.

collapse-plus
How do I install neokit?
Run bun add neokit then add neokit() to your astro.config.mjs integrations array.
Does neokit require Tailwind?
No — the Astro integration automatically injects Tailwind CSS v4 and DaisyUI into your project. No manual setup needed.
Can I override component styles?
Yes — all components accept a classes prop that merges extra Tailwind classes via tailwind-merge.

Focus method

method="focus" — the panel opens while the element has focus and closes when focus leaves. Useful for tooltip-style patterns.

collapse focus
Click me, then click outside to close
This panel stays open while focused. Click anywhere outside to close it.

Details method

method="details" uses native <details>/<summary> — content is browser-searchable with Ctrl+F.

collapse details
Native details (closed by default)
This uses a native <details> element. The content is discoverable by browser search even when closed.
Native details (open by default)
Pass open to expand on page load. The browser manages the open/close state natively.

Inside a join

Add classes="join-item" and wrap in <div class="join join-vertical"> for a seamless connected group.

join-vertical collapse
First item
Content for the first panel. The borders between items merge seamlessly.
Second item
Content for the second panel.
Third item
Content for the third panel.

Rich content

The default slot accepts any content — lists, images, code blocks, etc.

collapse with rich content
Neokit component list
  • Accordion
  • Avatar
  • Badge
  • Button
  • Card
  • Carousel
  • ChatBubble
  • Collapse
  • Dropdown
  • Modal
  • Swap
  • ThemeController

Colored backgrounds

Override the background via classes to use any DaisyUI color token.

collapse with bg colors
bg-primary
Primary colored collapse panel.
bg-secondary
Secondary colored collapse panel.
bg-accent
Accent colored collapse panel.