<br/> <br/> <div align="middle"> <img src="https://i.imgur.com/7YGA9Jv.png" height=120> </div>

<h3 align="center"> <strong>XL Software UI</strong> - fully JSDoc documented, SSR compatible, type safe Svelte 4 UI-kit </h3> <br/> <p align="right"> <img src="https://i.imgur.com/XfArZkI.png" /> <img src="https://i.imgur.com/ZXDQfPA.png" /> <img src="https://i.imgur.com/h8cehu5.png" /> </p>

XL Software UI - next-gen Svelte UI-kit for creating beautiful interfaces with excellent UX

<h2 id="install"><strong>🔗 Useful Links</strong></h2>

• <a href="#install">Installation</a>
• <a href="#docs">Documentation</a>
• <a href="#community">Community</a>
• <a href="#sponsor">Donations</a>
• <a href="#bugs">Bug report</a>
• <a href="#license">License</a>
• <a href="https://github.com/xl-soft/ui-assets">XL Software UI Assets</a>
• <a href="https://github.com/xl-soft/create-ui">create-ui</a>

<h2 id="install"><strong>💾 Installation</strong></h2>

From scratch:

npm create @xl-soft/ui@latest

Import in existing project:

npm i @xl-soft/ui@latest

Then add to your tsconfig.json

{
    "compilerOptions": {
        "moduleResolution": "Bundler"
    },
}

You are ready to go!

<h2 id="docs"><strong>📄 Documentation</strong></h2>

JSDoc

All components, functions and types are documented with JSDoc for beatiful developer expirience

Full documentation

⚠️ WORK IN PROGRESS ⚠️

<h2 id="community"><strong>👋 Community</strong></h2>

⚠️ WORK IN PROGRESS ⚠️

<h2 id="sponsor"><strong>💸 Donations</strong></h2>

⚠️ WORK IN PROGRESS ⚠️

<h2 id="bugs"><strong>🐞 Bug report</strong></h2> <br/> <div align="middle"> <a href="https://github.com/xl-soft/ui/issues/new/choose" > <img src="https://i.imgur.com/7x5Rq8M.png" height=35> </a> </div> <h2 id="license"><strong>📜 License</strong></h2>

MIT

<br/> <div align="center"> <a href="https://vk.com/xlsoftware" target="_blank" rel="noreferrer"> <img src="https://i.imgur.com/xxZkZfo.png" width=300> </a> </div>