svelte icon Svelte 5 UI lib
  • Coverage
  • About
  • Repo

Svelte 5 Ui Lib: v0.12.4

Svelte 5 UI Lib is a UI library built from scratch to leverage Svelte 5's runes system, creating smooth, reactive components.

Installation

Svelte 5 Runes

Installing Svelte 5:

npx sv create myapp // select to install tailwindcss
cd myapp
pnpm dev

Installing Svelte-5-Ui-Lib

Install `svelte-5-ui-lib` and update dependencies:

pnpm i -D svelte-5-ui-lib

TailwindCSS

Update src/app.css:

@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark \*));

@source "../node_modules/flowbite-svelte-icons/dist";

@theme {
--z-index-100: 100;

    --color-primary-50: ##fff5f2;
    --color-primary-100: #fff1ee;
    --color-primary-200: #ffe4de;
    --color-primary-300: #ffd5cc;
    --color-primary-400: #ffbcad;
    --color-primary-500: #fe795d;
    --color-primary-600: #ef562f;
    --color-primary-700: #eb4f27;
    --color-primary-800: #cc4522;
    --color-primary-900: #a5371b;

    --color-secondary-50: #f0f9ff;
    --color-secondary-100: #e0f2fe;
    --color-secondary-200: #bae6fd;
    --color-secondary-300: #7dd3fc;
    --color-secondary-400: #38bdf8;
    --color-secondary-500: #0ea5e9;
    --color-secondary-600: #0284c7;
    --color-secondary-700: #0369a1;
    --color-secondary-800: #075985;
    --color-secondary-900: #0c4a6e;

}

html {
-webkit-text-size-adjust: 100%;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
Noto Sans,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol,
Noto Color Emoji;
line-height: 1.5;
-moz-tab-size: 4;
tab-size: 4;
}

#mainContent > p {
@apply mb-4 leading-relaxed;
}
code {
@apply text-primary-800 dark:text-primary-500;
}

/_ Checkbox/Radio _/
[type='checkbox'],
[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #1c64f2;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
border-radius: 0px;
}

[type='radio'] {
border-radius: 100%;
}

[type='checkbox']: focus,

[type='radio']:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty, /_!_/ /_!_/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #1c64f2;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']: checked,
[type='radio']: checked,

.dark [type='checkbox']:checked,
.dark [type='radio']:checked {
border-color: transparent;
background-color: currentColor;
background-size: 0.55em 0.55em;
background-position: center;
background-repeat: no-repeat;
}

[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
background-repeat: no-repeat;
background-size: 0.55em 0.55em;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
background-size: 1em 1em;
}

.dark [type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
background-size: 1em 1em;
}

[type='checkbox']:indeterminate {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
background-color: currentColor;
border-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 0.55em 0.55em;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

[type='checkbox']: indeterminate:hover,

[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}

/_ Range _/
input[type='range']::-webkit-slider-thumb {
height: 1.25rem;
width: 1.25rem;
background: #1c64f2;
border-radius: 9999px;
border: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
}

input[type='range']:disabled::-webkit-slider-thumb {
background: #9ca3af;
}

.dark input[type='range']:disabled::-webkit-slider-thumb {
background: #6b7280;
}

input[type='range']:focus::-webkit-slider-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1px;
--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}

input[type='range']::-moz-range-thumb {
height: 1.25rem;
width: 1.25rem;
background: #1c64f2;
border-radius: 9999px;
border: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
}

input[type='range']:disabled::-moz-range-thumb {
background: #9ca3af;
}

.dark input[type='range']:disabled::-moz-range-thumb {
background: #6b7280;
}

input[type='range']::-moz-range-progress {
background: #3f83f8;
}

input[type='range']::-ms-fill-lower {
background: #3f83f8;
}

input[type='range'].range-sm::-webkit-slider-thumb {
height: 1rem;
width: 1rem;
}

input[type='range'].range-lg::-webkit-slider-thumb {
height: 1.5rem;
width: 1.5rem;
}

input[type='range'].range-sm::-moz-range-thumb {
height: 1rem;
width: 1rem;
}

input[type='range'].range-lg::-moz-range-thumb {
height: 1.5rem;
width: 1.5rem;
}
/_ input file _/
[type='file'] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}

[type='file']:focus {
outline: 1px auto inherit;
}

input[type='file']::file-selector-button {
color: white;
background: #1f2937;
border: 0;
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
padding-left: 2rem;
padding-right: 1rem;
-webkit-margin-start: -1rem;
margin-inline-start: -1rem;
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
}

input[type='file']::file-selector-button:hover {
background: #374151;
}

:is([dir='rtl']) input[type='file']::file-selector-button {
padding-right: 2rem;
padding-left: 1rem;
}

.dark input[type='file']::file-selector-button {
color: white;
background: #4b5563;
}

.dark input[type='file']::file-selector-button:hover {
background: #6b7280;
}

/_ select _/
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}

[type='text']: focus,
[type='email']: focus,
[type='url']: focus,
[type='password']: focus,
[type='number']: focus,
[type='date']: focus,
[type='datetime-local']: focus,
[type='month']: focus,
[type='search']: focus,
[type='tel']: focus,
[type='time']: focus,
[type='week']: focus,
[multiple]: focus,

textarea:focus,
select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty, /_!_/ /_!_/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #1c64f2;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #1c64f2;
}

select:not([size]) {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 0.75em 0.75em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

:is([dir='rtl']) select:not([size]) {
background-position: left 0.75rem center;
padding-right: 0.75rem;
padding-left: 0;
}

.container {
@apply m-4;
}
codewithshin.com
  • Repo
  • About