theui-svelte

Svelte 5 Component Library by TheUI

A tool for the Svelte eco-system

The theui-svelte is TheUI's component library for Svelte 5, built on top of TailwindCSS. It combines the strength of Svelte and the features of TailwindCSS to create a powerful tool that accelerates your development process.

1. Features

• Built with ARIA roles and WCAG compliance for better usability.
• Highly customizable
• Support LTR/RTL.
• Easy theming, branding, and dark/light mode control.
• Optimized for leveraging svelte's reactivity
• Includes smooth transitions and animations for better user experience.
• Fully typed for enhanced development
• Offers examples, and usage guides tailored for Svelte.

2. Components

Last but not least, here is the list of components available in the component library!

Components
Accordion	Alert
Badge	Breadcrumb
Button	Button group
Quick action button	Card
Chips	Collapse
Drawer	Dropdown
List group	Modal
Navbar	Notification
Pagination	Popover
Popup (Exit and Entry popup)	Progress bar
Slider	Table
Tabs	Tooltip

Form controls
Form	Check-box
Fieldset	Radio button
Label	File input
Text input	Toggle
Select	Helper text

Utilities
Container	Dark mode
Close	SVG

3. Installation Guide

To add the Svelte Components library to your project, you can do it in two ways:

• Use the boilerplate from GitHub.
• Manual installation from scratch.

3.1 Install using boilerplate from GitHub

To install the starter template, clone this Github repo using the following commands, replacing my-app with your desired project name.

# Clone the project
git clone https://github.com/mbparvezme/theui-svelte-starter.git my-app

# Install node modules
npm i

# Run the application
npm run dev

3.2. Manually Install from Scratch

Easily add theui-svelte to your project via a GitHub boilerplate or manual installation. For manual setup:

• Install SvelteKit with TailwindCSS.
• Configure Tailwind CSS by updating the ./src/app.css file..

a. Install Sveltekit with TailwindCSS

# Install Svelte
npx sv create my-app
cd my-app

# Install node modules
npm i

# Install theui-svelte
npm i theui-svelte

b. Configuration

To integrate theui-svelte with your project, add the following lines to your ./src/app.css file.

     @import 'tailwindcss';
+    @import 'theui-svelte/style';
+    @source "../node_modules/theui-svelte";

And that's all. You are ready to start your awesome project now.

The z-index

This library leverages z-index for stacking elements. Avoid modifying z-index values to prevent layout disruptions.

Z-index helps in managing the stacking order of elements and overlays, controlling their arrangement along the z-axis. It is not recommended to customize these values in the design, as doing so may disrupt the layout along the z-axis.

COMPONENT	CLASS	VALUE (Z-INDEX)
Navbar	.z-100	100
Dropdown	.z-200	200
Drawer	.z-300	300
Modal	.z-400	400
Popup	.z-500	500
Tooltip	.z-600	600
Notifications	.z-700	700

Contributions

Prior to commencing work on new features or bug fixes, kindly inform us. If you wish to propose a new feature, please create a feature request in Github Issues. This promotes open discussions and avoids redundant efforts. It encompasses tasks like adding new components, introducing utility features, and making major changes to existing work.

Copyright

The code and documentation are copyright 2023 by M B Parvez, Gosoft and The UI.

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Special Thanks To Gosoft.io and BIPBY Digital for being our digital partner