UILibrary not rendering.

[scottandrew]

Describe the bug

I have followed the steps for install but nothing is rendering properly. See the attached image of the Navbar.

Reproduction

I have attached sample project. This is nothing but a navbar..

NewUI.zip

Version and System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1
    Memory: 66.03 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.0.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 10.5.1 - /opt/homebrew/bin/npm
    pnpm: 9.4.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 128.0.6613.84
    Safari: 17.6

[shinokada]

Two things in your zip files and a part of them is my fault. I just updated the docs.

1. tailwind.config.ts

import type { Config } from 'tailwindcss';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/svelte-5-ui-lib/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'],
  darkMode: 'selector',
    theme: {
        extend: {
      colors: {
        primary: { 50: '#FFF5F2', 100: '#FFF1EE', 200: '#FFE4DE', 300: '#FFD5CC', 400: '#FFBCAD', 500: '#FE795D', 600: '#EF562F', 700: '#EB4F27', 800: '#CC4522', 900: '#A5371B' },
        secondary: { "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc", "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1", "800": "#075985", "900": "#0c4a6e" },
      }
    }
    },
} as Config;

2. layout.svelte

<script lang="ts">
    import '../app.css';
    import { Navbar, NavUl, NavLi, uiHelpers } from 'svelte-5-ui-lib';

    let { data: propsData, children } = $props();

    let nav = uiHelpers();
    let navStatus = $state(false);
    let toggleNav = nav.toggle;
    let closeNav = nav.close;
    $effect(() => {
        navStatus = nav.isOpen;
    });

</script>

<Navbar {toggleNav} {closeNav} {navStatus} breakPoint="md">
    <NavUl>
        <NavLi href="/">Home</NavLi>
        <NavLi href="/components/navbar">Navbar</NavLi>
        <NavLi href="/components/footer">Footer</NavLi>
    </NavUl>
</Navbar>

{@render children()}

3. Run update and install the latest

pnpm i update && pnpm i -D flowbite-svelte-icons@next

[scottandrew]

This is now working perfectly..