A components library focused on customization/accessibility
- π¨βπ¨ Minimal CSS to do your customization
- π¦Ύ Accessibility in mind
- π Fully typed
- Drilldown
- Collapse/Accordion
And more to come!
Vanilla JS/TS
npm i -D compotes
# yarn
yarn add -D compotes
# pnpm
pnpm add -D compotes
A proper documentation and Vue 3/Nuxt 3 packages will arrive soon stay tuned!
import 'compotes/css/drilldown.css' // loaded by vitejs
import { Drilldown } from 'compotes'
const drilldown = new Drilldown('.c-drilldown', {
dynamicHeight: true,
})
<nav class="c-drilldown" aria-label="Drilldown Example">
<ul class="c-drilldown-menu">
<li>
<button class="c-drilldown-next">
Go to section 1
</button>
<ul class="c-drilldown-menu" id="test">
<li>
<button class="c-drilldown-back">
Go Back
</button>
</li>
<li>
<button class="c-drilldown-next">
Go to section 1 1
</button>
<ul class="c-drilldown-menu">
<li>
<button class="c-drilldown-back">
Go Back
</button>
</li>
<li>
Item Section 1 1
</li>
<li>
Item Section 1 1
</li>
</ul>
</li>
<li>
Item Section 1
</li>
</ul>
</li>
</ul>
</nav>
import 'compotes/css/collapse.css' // loaded by vitejs
import { Collapse } from 'compotes'
const drilldown = new Collapse('.c-collapse')
<button class="c-collapse-trigger" aria-expanded="false" aria-controls="collapse-id">
Trigger collapse
</button>
<div class="c-collapse" id="collapse-id">
<p style="width: 200px;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
</p>
</div>
A lot of components library are already shipped with styles but as a Front End developer, I always wants to override a lot. Futhermore, there are not always accessible or they are shipped with jQuery.
There are some good library like React Aria but it's made to work on one framework and I work on different tech like Wordpress, Symfony or VueJS.
This library provide only the compotes and it's you to make a tart.
MIT