lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.
v0.0.25
Details
Collapsible accordion component with grouping support.
The <luna-details> component provides collapsible sections with smooth animations, multiple visual styles, and accordion grouping support.
Paths
/lunadom/components/details/details.jsREQUIRED
Basic Usage
What is lunaDOM?
lunaDOM is a collection of lightweight, shadowDOM-based web components built with vanilla JavaScript. No dependencies, no build tools required.
Variant Styles
Card (default) - Solid background with border
Card Style
This is the default card variant with a solid background and border. Perfect for standalone sections.
Ghost - Transparent with bottom border
Ghost Style
Minimal ghost variant with no background, only a bottom border separator. Great for stacked lists.
Glass - Frosted glass effect
Glass Style
Beautiful frosted-glass effect with backdrop blur. Works great on colorful or image backgrounds.
With Emoji Icons
📦Package Details
All components are individually importable. Import only what you need to keep bundle sizes minimal.
⚡Performance Optimized
Built with vanilla JavaScript and optimized for performance. Each component is lightweight and fast.
🎨Fully Customizable
Every component can be styled using CSS custom properties. Match your brand with ease.
With SVG Icons
Verified Account
Your account has been verified and all features are now unlocked.
Important Notice
Please update your billing information before the end of the month to avoid service interruption.
Documentation
Complete API reference and usage examples are available in the docs section.
Group Accordion
All details components with the same group attribute form an accordion - opening one closes the others.
❓How do I install lunaDOM?
Install via npm: npm install github:dmac780/lunaDOM. Then import the components you need directly in your HTML.
💡Do I need a build tool?
No! All components are written in vanilla JavaScript and work directly in the browser. No bundler required.
🔧Can I customize the styles?
Yes! Every component exposes CSS custom properties for full customization. Override them to match your brand.
🌐What browsers are supported?
All modern browsers that support Web Components: Chrome, Firefox, Safari, and Edge (Chromium).
Disabled State
🔒Premium Features (Locked)
Upgrade to Pro to unlock advanced analytics, custom themes, and priority support.
Custom Styling
🎨Custom Blue Theme
This details component uses custom CSS properties to create a unique blue theme. All colors can be customized.
Customization
Slots summary - Summary/header text icon - Optional icon before summary default - Content shown when expanded
Attributes open - Whether initially open disabled - Prevents toggling group - Accordion key (opening one closes others) variant - Visual style (card, ghost, glass, default: "card")