TheUI Sveltekit Components

A tool for the Sveltekit eco-system

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

Features

• Accessible components
• Easy control of dark and light modes
• Effortless theming and branding with a single line of CSS
• Highly customizable
• RTL supports (Upcoming)
• Fully typed for enhanced development

Components

• General Components

  • Accordion
  • Alert
  • Badge
  • Breadcrumb
  • Button
  • Button group
  • Chips
  • Collapse
  • Container
  • Dropdown
  • Modal
  • Navbar
  • Notification
  • Offcanvas
  • Pagination
  • Popup (Exit and Entry popup)
  • Progress bar
  • SVG
  • Table
  • Tabs
  • Tooltip
  • Utility
    • Close
    • Dark/Light mode

• Form Components
  • Form
  • Fieldset
  • Helper text
  • Check-box
  • Text editor
  • File input
  • Input
  • Label
  • Radio button
  • Select
  • Textarea
  • Toggle

Installation Guide

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

1. Use the boilerplate from GitHub.
2. Manual installation from scratch.

1. Use the Boilerplate from GitHub

To install the boilerplate template, open your terminal and use the following command, replacing with your desired project name.

# Clone the project
git clone https://github.com/theui-dev/template-kit.git app-name

# Install node modules
npm i

# Run the application
npm run dev

2. Manually Install from Scratch

To manually install the component library, follow these steps:

2.1    Install Svelte/Sveltekit

# Install Sveltekit
npm create svelte@latest my-app
cd my-app

# Add TailwindCSS
npx svelte-add@latest tailwindcss

# Install node modules
npm i

# Install theui-svelte
npm i theui-sveltekit

2.2    Configuration

Open the TailwindCSS configuration file called tailwind.config.cjs and replace all of its existing content with the code provided below.

// 1. Update config.content
// 2. Add config.presets
const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/theui-sveltekit/**/*.{html,js,svelte,ts}", // New line
  ],
  presets: [require("theui-sveltekit/preset")], // New line
  darkMode: 'class',
  theme: {
    extend: {},
  },

  plugins: [],
};

module.exports = config;

Open __layout.svelte and make sure to import the core style file named style.postcss. This step is necessary for the custom color classes to function correctly.

<script>
  import "theui-sveltekit/style" // Add this line inside script tag
  import "../app.css"
</script>

And thats all. You are ready to start your awesome project now.

Colors and Branding

Sveltekit is built on the powerful foundation of TailwindCSS, a tool capable of generating a wide array of CSS styles and an abundance of colors for your design. However, the real question is, do you truly need an unlimited palette of colors for your design?

Having the ability to generate any color is not the issue. The challenge lies in maintaining design consistency. When you have an overwhelming number of options, it becomes all too easy to lose that consistency, leading to a haphazard and disjointed design.

To address this challenge, the "TheUI Sveltekit" component library introduces ten custom color options that seamlessly blend with the colors offered by TailwindCSS. You can effortlessly customize your theme using just one line of code by altering the values of these custom colors.

TheUI Colors & Default Values

"TheUI Sveltekit" component library offers the following CSS variables and their default values. Each CSS variable is prefixed with "ui" to prevent conflicts with other variables.

@layer base{
  :root {
    /* Brand colors */
    --ui-brand                    : 80 70 230;    /* #5046E6 */
    --ui-brand-active             : 67 56 202;    /* #4338CA */
    --ui-brand-secondary          : 253 230 138;  /* #FDE68A */
    --ui-brand-secondary-active   : 252 211 77;   /* #FCD34D */

    /* Text colors */
    --ui-text-on-brand            : 255 255 255;  /* #FFFFFF */
    --ui-text-on-brand-secondary  : 8 8 24;       /* #080818 */
    --ui-text-default             : 8 8 24;       /* #080818 */

    /* Background colors */
    --ui-bg-primary               : 255 255 255;  /* #FFFFFF */
    --ui-bg-secondary             : 243 244 246;  /* #F3F4F6 */
    --ui-bg-tertiary              : 229 231 235;  /* #E5E7EB */
  }

  /* To change any color for dark mode, change the color below */
  :root.dark {
    /* Text color on dark mode */
    --ui-text-default             : 229 231 235;  /* #E5E7EB */

    /* Background colors on dark mode */
    --ui-bg-primary               : 8 8 24;       /* #080818 */
    --ui-bg-secondary             : 22 22 38;     /* #161626 */
    --ui-bg-tertiary              : 32 32 48;     /* #202030 */
  }
}

Brand colors are universally accessible, ready to be used in various parts of your design. However, it's important to note that text colors are distinct from background colors, and vice versa. This separation ensures that you have the appropriate colors for both text and background elements, allowing for effective and visually pleasing design combinations.

Use of Custom Colors

You have the flexibility to employ custom classes for integrating the custom colors into your design. The Sveltekit Components library incorporates the following classes to make this process seamless:

Color Customization

The process of customizing colors in the Sveltekit Components library is straightforward and requires just a single line of code. To change the value of a specific CSS variable, follow these steps:

• Identify the CSS variable you wish to customize. For instance, let's say you want to set your brand color to "rgb(255, 0, 0)" and change the default text color to "rgb(0, 0, 0)."
• Open the "./src/app.css" or "./src/app.postcss" file in your project, which contains your TailwindCSS styles.
• Add the following lines to the file:

--ui-brand : 255 0 0;
--ui-text-default : 0 0 0;

Congratulations! With this simple change, all the components using the brand color and the default text color will automatically adapt to the new color values. No further adjustments are necessary.

Writing the color values in the format provided, such as "255 0 0," rather than the conventional RGB code like "rgb(255, 255, 266," is essential because it aligns with TailwindCSS's methodology for applying opacity to colors.

TailwindCSS allows you to easily adjust the opacity of colors using utility classes like "bg-opacity-50" to set a 50% opacity background. These utility classes are designed to work with color values expressed in the format you mentioned, "255 0 0," and not with conventional RGB codes like "rgb(255, 255, 266)."

By adhering to this format, you ensure that you can seamlessly leverage TailwindCSS's opacity utilities to control the transparency of your colors, providing a consistent and flexible approach to design customization.

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 and license

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

Copyright 2022 TheUI

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