Sara UI

🤖 Enhanced daisyUI components for SvelteKit

Drawer

Scaffold

success

info

warning

error

Get Sarisfied!

Sara UI's mission is to provide new advanced components that only would be possible thanks to javascript capabilities. It's not intended to replace daisyUI but to complement it.

daiysUI

<script>
  let isLoading = false

  async function handleClick() {
    isLoading = true
    await asyncFunction()
    isLoading = false
  }
</script>

<button on:click={handleClick}
  disabled={isLoading}
  class="
    btn btn-primary 
    {someFixedWidth}
  "
>
  {#if isLoading}
    <span class="
      loading loading-ring
    "/>
  {:else}
    Async action
  {/if}
</button>

Sara UI

<script>
  import { Button } from "saraui"
</script>

<Button onClick={asyncFunction}
  color="primary"
>
  Async action
</Button>

Result

Installation ☝️🤓

1. Install & set up tailwindcss
2. Install daisyUI
3. Install Sara
4. Update the tailwind's config file

npx @svelte-add/tailwindcss@latest

npm i -D daisyui

npm i saraui

4. tailwind.config.cjs

const config = {
  content: [
    //👇 add Sara UI
    "./node_modules/saraui/**/*.{html,js,svelte,ts}",
    ...
  ],
  plugins: [
    //👇 add daisyUI
    require("daisyui"),
    ...
  ],
  ...
}

First step

Set up the SaraProvider at the root of your application:

src/routes/+layout.svelte

<script>
  import { SaraProvider } from "saraui"
</script>

<SaraProvider>
  <slot></slot>
</SaraProvider>

You can configure Sara by providing a valid config value to its provider.

Check SaraProvider