integral-svelte
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.7 • Public • Published

    Integral banner

    Integral

    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>
      <Tab title="One">I'm the first tab, so I'm being shown by default.</Tab>
      <Tab title="Two">Hey! I'm number two, now back to you!</Tab>
      <Tab title="Three">Number three, look at me!</Tab>
      <Tab title="Four">Four. What's more?</Tab>
    </Tabs>

    Modal

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

    Install

    npm i integral-svelte

    DownloadsWeekly Downloads

    14

    Version

    0.0.7

    License

    ISC

    Unpacked Size

    12 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar