svelte-ux
svelte-ux copied to clipboard
techniq
Collection of Svelte components, actions, stores, and utilities to build highly interactive applications.
- https://github.com/ivanhofer/typesafe-i18n - [Ivan Hofer - SvelteKit and i18n: let's finally solve this never ending story](https://www.youtube.com/watch?v=Y6IbPfMU1xM) - https://t18s.sigrist.dev/ - https://inlang.com/ - [Paraglide JS](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) - https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-svelte/example
- [ ] Remember custom theme colors if you navigate away and back (store/read from localStorage, directly from stylesheet, ...) - [ ] Fix parsing of `hsl(200 100% X)` (typing...
- [Creating a shine effect on a card with Tailwind CSS](https://www.julienthibeaut.xyz/blog/create-shine-effect-on-card-with-tailwind-css) - [Skeleton loading using only a few lines of CSS](https://codepen.io/havardob/pen/dyGGGzq) - [Skeleton Screen Gradient Animation](https://codepen.io/viktorstrate/pen/yoBRLy) - [Steam inspired game...
- [Card stack / shift](https://svelte.dev/repl/7f9e318f99e8495591e13db91e9a1f21?version=4.1.2) - [Little Gallery](https://codepen.io/yoann-b/pen/abEjWgq) - [Card deck w slideshow](https://codepen.io/jonomenz/pen/bGpPYRp) - [Stripe Sessions style Flex Carousel](https://codepen.io/simeydotme/pen/gOBMZMe) ## 3d - [Layer stack transition](https://svelte.dev/repl/2773f89b7abd46248bf07665005197de?version=4.1.2) - https://ui.aceternity.com/components/3d-pin
## Context menu - https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=4.2.1 - https://svelte.dev/repl/697820c1fb92462daea82c2b26244ecd?version=3.37.0 - https://height.app/blog/guide-to-build-context-menus ## Multi level - https://svelte.dev/repl/814c27da2e1344f9b4f205a93e02559f?version=3.44.2 - [iOS Menu](https://paco.me/craft/ios-menu) - https://ui.aceternity.com/components/navbar-menu
- https://svelte.dev/repl/1cfbbcd7b5e54bcfb00548abfa27ad16?version=3.55.1 - [Peekaboo header](https://codepen.io/jaffathecake/pen/OJvbpRZ) - [Reveal Nav on Scroll (Peek-a-boo)](https://codepen.io/millertchris/pen/xxdZRmW) - https://ui.aceternity.com/components/floating-navbar
- Grid - [CSS grid pattern](https://svelte.dev/repl/05b9d5cceb0141c19ba33186c56f1fe7?version=4.1.2) (repeating-linear-gradient) - [CSS gradient graph paper](https://svelte.dev/repl/9238937969404356b8863da2e961d283?version=4.1.2) (conic-gradient) - [CSS-only Grid of dashed lines](https://svelte.dev/repl/316ed4ca8a4740c89446e421bd27d00c?version=4.1.2) - https://lunarui.dev/components/patterns/grid-pattern - Checkboard - [CSS checkboard pattern](https://svelte.dev/repl/48d889e1263747cab08a46c07557a901?version=4.1.2) - [webkit-mask checkerboard...
- [before-after-effect](https://codepen.io/Magda_/pen/bGqmMaE) - [Image Comparison with Input Range](https://codepen.io/stevenlei/pen/poPxPRz) - [CSS Only AI Image Comparison](https://codepen.io/jh3y/pen/wvRYvYP) - [Accessible Image Compare - 1 line JS](https://codepen.io/stoumann/pen/VwKgJNv) - [Filter Compare Slider](https://codepen.io/stoumann/pen/qBQqqqg) - https://daisyui.com/components/diff/ - [Easy...
- [ ] Detect `position: sticky` being active - https://developer.chrome.com/blog/sticky-headers/ - https://davidwalsh.name/detect-sticky - https://codepen.io/hey-nick/pen/mLpmMV - [ ] ScrollSpy - [ ] Dynamic header - https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/ - https://codepen.io/michellebarker/pen/QWpzwYN - [ ]...
- [x] Use portal - Will fix stacking context issues (z-index set on parent, etc) - [ ] Allow keeping tooltip open (copy values, etc) - Mouseover directly into tooltip...