Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mpiorowski/svelte-init
A low-overhead Svelte UI library with the basic, most useful components, to help with the initial development.
https://github.com/mpiorowski/svelte-init
components svelte svelte-ui sveltejs sveltekit ui
Last synced: 4 days ago
JSON representation
A low-overhead Svelte UI library with the basic, most useful components, to help with the initial development.
- Host: GitHub
- URL: https://github.com/mpiorowski/svelte-init
- Owner: mpiorowski
- License: mit
- Created: 2022-08-17T20:59:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-29T21:17:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T11:30:59.101Z (2 months ago)
- Topics: components, svelte, svelte-ui, sveltejs, sveltekit, ui
- Language: Svelte
- Homepage: https://svelte-init.vercel.app
- Size: 462 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A low-overhead Svelte UI library with the basic, most useful components and functions, to help with the initial development.
[](https://github.com/mpiorowski/svelte-init/blob/main/LICENSE)
[](https://www.npmjs.com/package/@mpiorowski/svelte-init)
[](https://www.npmjs.com/package/@mpiorowski/svelte-init)
## Contribution
Any new suggestions, pr, issues are welcome :) Feel free to ask and discuss ;)
## Demo
[svelte-init.vercel.app](https://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](https://typescriptlang.org/)
- No dark / light theme included, but can be easly achived using tailwind theme.
## Components
- [Button](https://github.com/mpiorowski/svelte-init/blob/main/docs/BUTTOM.md)
- [Input](https://github.com/mpiorowski/svelte-init/blob/main/docs/INPUT.md)
- [InputNumber](https://github.com/mpiorowski/svelte-init/blob/main/docs/INPUT-NUMBER.md)
- [InputSimple](https://github.com/mpiorowski/svelte-init/blob/main/docs/INPUT-SIMPLE.md)
- [Textarea](https://github.com/mpiorowski/svelte-init/blob/main/docs/TEXTAREA.md)
- [Select](https://github.com/mpiorowski/svelte-init/blob/main/docs/SELECT.md)
- [Checkbox](https://github.com/mpiorowski/svelte-init/blob/main/docs/CHECKBOX.md)
- [CheckboxGroup](https://github.com/mpiorowski/svelte-init/blob/main/docs/CHECKBOX-GROUP.md)
- [Toast](https://github.com/mpiorowski/svelte-init/blob/main/docs/TOAST.md)
- [Drawer](https://github.com/mpiorowski/svelte-init/blob/main/docs/DRAWER.md)
- [Modal](https://github.com/mpiorowski/svelte-init/blob/main/docs/MODAL.md)
- [Dropdown](https://github.com/mpiorowski/svelte-init/blob/main/docs/DROPDOWN.md)
- [Tooltip](https://github.com/mpiorowski/svelte-init/blob/main/docs/TOOLTIP.md)
- [Spinner](https://github.com/mpiorowski/svelte-init/blob/main/docs/SPINNER.md)
## Functions
- [useMediaQuery](https://github.com/mpiorowski/svelte-init/blob/main/docs/FUNCTIONS.md#useMediaQuery)
- [useAccordion](https://github.com/mpiorowski/svelte-init/blob/main/docs/FUNCTIONS.md#useAccordion)
- [usePagination](https://github.com/mpiorowski/svelte-init/blob/main/docs/FUNCTIONS.md#usePagination)
- [useClickOutside](https://github.com/mpiorowski/svelte-init/blob/main/docs/FUNCTIONS.md#useClickOutside)
## Prerequisite
Using [Tailwind preflight](https://tailwindcss.com/docs/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;
}
```