What is TwelveUI?

A Svelte component library with accessibility built-in! Let us know what you'd like to see next, and get updates on Twitter @twelveui

Our goal is to have a single import for each component, then give you the power to determine the HTML element and CSS you want to use. Of course, Twelve UI takes care of the component's layout behind the scenes.

Slots aren't always needed - for example, our Button component is simple enough that it doesn't need slots.

Here's a contrived example of a using a Card component; with Tailwind for styling:

<script>
    import { Card } from 'twelveui'
</script>

<Card>
    <h3 slot="title" class="text-2xl text-gray-900">Hello World</h3>
    <img slot="media" src="#" alt="A woman waving her hand at you">
<Card>

The order of the html elements doesn't really matter, since we determine their placement within the component. So, if we swap the positions of <h3> and <img>, it would result in the same component look as the above example.

<script>
    import { Card } from 'twelveui'
</script>

<Card>
    <img slot="media" src="#" alt="A woman waving her hand at you">
    <h3 slot="title" class="text-2xl text-gray-900">Hello World</h3>
<Card>