N
neokit

Accordion

Accordion items use DaisyUI's collapse component. Group multiple items by sharing the same name — only one can be open at a time.

Radio inputs (default)

Each item wraps a hidden radio input. Checking one unchecks the others automatically.

No icon
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.

Arrow icon

collapse-arrow
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.

Plus / minus icon

collapse-plus
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.

Details method

Uses native <details>/<summary> — content is browser-searchable (Ctrl+F / Cmd+F finds text inside collapsed items).

details + arrow icon
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.

Join (seamless border radius)

Wrap items in join join-vertical and add classes="join-item" to each item. The join handles border-radius automatically.

Joined accordion with arrow icon
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.
Joined accordion with plus icon
How do I create an account?
Click the "Sign Up" button in the top right corner and follow the registration process.
I forgot my password. What should I do?
Click on "Forgot Password" on the login page and follow the instructions sent to your email.
How do I update my profile information?
Go to "My Account" settings and select "Edit Profile" to make changes.

Rich content

Slot content can be any HTML — lists, code, images, etc.

Items with rich content
What technologies does neokit use?
  • Astro — component framework
  • Tailwind CSS v4 — utility-first styling
  • DaisyUI — component library on top of Tailwind
  • tailwind-merge — class conflict resolution
How do I install it?

Install with your preferred package manager:

bun add neokit
# or
npm install neokit

Then add the integration to astro.config.mjs.

Is it open source?

Yes — neokit is fully open source and MIT licensed. Contributions, issues, and PRs are welcome.

Multiple independent groups

Use different name values for each group — they operate independently.

Two groups side by side

Group A

Item A-1
Content for A-1.
Item A-2
Content for A-2.
Item A-3
Content for A-3.

Group B

Item B-1
Content for B-1.
Item B-2
Content for B-2.
Item B-3
Content for B-3.