A low-overhead Svelte UI library with the basic, most useful components and functions, to help with the initial development.

Contribution

Any new suggestions, pr, issues are welcome :) Feel free to ask and discuss ;)

Demo

svelte-init.vercel.app

Features

• Working out of the box most useful components, without any additional configuration.
• Very easy color / shadow / border config using either pure css or @apply from tailwind.
• Written fully in TypeScript
• No dark / light theme included, but can be easly achived using tailwind theme.

Components

• Button
• Input
• InputNumber
• InputSimple
• Textarea
• Select
• Checkbox
• CheckboxGroup
• Toast
• Drawer
• Modal
• Dropdown
• Tooltip
• Spinner

Functions

• useMediaQuery
• useAccordion
• usePagination
• useClickOutside

Prerequisite

Using Tailwind preflight for default styling. Can be done with pure css also :).

Instalation

npm install @mpiorowski/svelte-init

Inside Your main *.css file (imported in root layout) paste color/shadow configuration:

:focus {
    outline: none;
}

.no-scroll {
    overflow: hidden;
}

.input {
    @apply shadow transition bg-white border border-gray-300 hover:border-gray-400 focus:ring focus:ring-gray-200 placeholder-gray-300;
}
.input.error {
    @apply border border-red-500 placeholder-red-500;
}
.text-error {
    @apply text-red-500;
}
input[type="checkbox"], input[type="radio"] {
    @apply accent-slate-600;
}
.button {
    @apply shadow transition;
}
.button.primary {
    @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-600 focus:ring;
}
.button.error {
    @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-600 focus:ring;
}
.button.ghost {
    @apply bg-gray-200 text-gray-600 hover:bg-gray-300 focus:ring-gray-300 focus:ring;
}
.button.primary.link {
    @apply text-blue-500 hover:underline hover:bg-white;
}
.button.error.link {
    @apply text-red-500 hover:underline hover:bg-white;
}
.button.ghost.link {
    @apply text-gray-600 hover:underline hover:bg-white;
}
.toast {
    @apply shadow-md;
}
.toast.success {
    @apply bg-green-500 text-white;
}
.toast.error {
    @apply bg-red-500 text-white;
}
.toast.info {
    @apply bg-blue-500 text-white;
}
.toast.warning {
    @apply bg-yellow-500 text-white;
}
.drawer, .modal {
    @apply shadow-md bg-gray-100;
}
.dropdown {
    @apply shadow transition bg-white border border-gray-300;
}
.tooltip-text {
    @apply shadow transition bg-gray-600 text-gray-200;
}