Integral (Work in progress!)

Unstyled, composable and accessible Svelte components

1. Unstyled (by default) 🖌

   Integral aims to provide all components as-is, without styling. This way, you can use Integral to fit whatever design system you need. Everything can be easily customized with plain old CSS.

   [more soon]

2. Composable 🔣

   Integral aims to keep the syntax simple and composable. No weird methods, messing with indices or workarounds. Use these Svelte components like you would normally.

3. 100% (keyboard-)accessible 🥳

   The main goal for this project is to create accessible-by-default components, because accessibility is essential (maybe even integral) for any website or application and thus should be easy.

Installation

npm install -D svelte-integral
# or
yarn add -D svelte-integral

Usage

Tabs

<script>/* Supports SSR by default! No `svelte-integral/src/lib/Tabs.svelte` nonsense. */import{Tab,Tabs}from'svelte-integral'</script><Tabs><Tabtitle="One">I'm the first tab, so I'm being shown by default.</Tab><Tabtitle="Two">Hey! I'm number two, now back to you!</Tab><Tabtitle="Three">Number three, look at me!</Tab><Tabtitle="Four">Four. What's more?</Tab></Tabs>

Modal

<script>import{Modal}from'svelte-integral'letopen=false</script><!-- You can bind the `open` state to whatever you like, and it updates accordingly. --><Modalbind:open><h1>Hello world!</h1></Modal>