Collection of Svelte components, actions, stores, and utilities to build highly interactive applications

Joined November 2023
Svelte UX by @techniq35 is a collection of 200+ components, actions, stores and utilities to build interactive apps 📦️✨ - madewithsvelte.com/svelte-ux
4
13
896
Both LayerChart and Svelte UX docs are now running with Svelte 5, which are testaments to how well the @sveltejs maintainers focused on backwards compatibility 🫶 The plan for both libraries is to maintain Svelte 3-5 compatibility through their 1.x releases, but begin the migration to Svelte 5 and leverage runes, snippets, etc in 2.x. I plan to start the migration *soon* once I wrap a few other priorities, and will deploy incremental `next` releases as progress is made. Thanks again for all the hard work maintainers and contributors! @Rich_Harris @dummdidumm_ @trueadm @BenjaminMcCann @evilpingwin @PaoloRicciuti (sorry I couldn't find everyone on here).
1
5
58
3,245
📣 Simplified Notification with enhancements @SvelteUX has improved the Notification component by supporting simple props for title, description, icon, and actions, support for theme colors (success, danger, etc), and added variant support (default, fill). svelte-ux.techniq.dev/docs/c…
2
7
402
⚠️ Much improved Typescript and A11y support in @SvelteUX and @LayerChart A considerable effort was made to improve both projects Typescript and A11y support, with progress to continue (especially during the Svelte 5 migration). Never again will either project pollute your console! Running `svelte-check` as part of CI and having documented locations via `@ts-expect-error` and `svelte-ignore` helps enable incremental improvement. I would appreciate any PRs to reduce these further 🫶
2
2
1
7
631
Svelte UX and @LayerChart are the 3rd and 4th trending #svelte repos on #github this week 🤩
1
4
37
2,729
Even better, by leveraging `<SpringValue {value} let:value>` from Svelte UX, you can easily add spring value transitions to the segments without any pain. See the video for a before/after demonstration 👇 Benefits of <SpringValue> instead of using a `spring()` store value... ✔︎ Spring store values (ex. `const value = spring(50)`) do not play well with `bind:value` inputs. With SpringValue, you still use a simple variable (ex. `let value = 50`). See this REPL: svelte.dev/repl/9c466ae70730… ✔︎ Simple drop in. No need to create a new variable - just wrap a component tree where you want the value to tween and ghost `value` within the component, and voilà, spring ✨magic✨ svelte-ux.techniq.dev/docs/c…
Added a new @LayerChart Arc example - Segmented Arc, after someone asked in the discord. The best part, only took a couple minutes, and only leveraged existing components.
2
7
1,243
Blown away by the responses Svelte UX and @LayerChart received on @Reddit. Already the 1st and 4th highest posts ▲ in /r/sveltejs for October and were only posted 2 and 3 days ago. LayerChart is only about 10 upvotes from 2nd. Reading all the positive comments and appreciating the effort that went into each was my favorite part. →reddit.com/r/sveltejs/commen… →reddit.com/r/sveltejs/commen…
5
1
38
2,230
I've setup a discord server for @LayerChart and Svelte UX to create a community to help with development and answer questions. discord.gg/pRUwP5Mt I need to setup more channels for better organizatione, but I've already had a handful of people asking for such. I keep pretty busy (young kids and work), but will do my best to answer questions, and let you know the direction I see both libraries going.
Introducing 💻 svelte-ux (svelte-ux.techniq.dev/) and 📊 LayerChart (layerchart.com/) Over the past 2 years I've been creating these Svelte libraries as I built highly interactive and visual applications, and they are close to 1.0 releases. @SvelteSociety 1/4
1
7
670
✨ Gooey - a new Svelte UX component Continuing to explore SVG filter effects to produce interesting and delightful flourishes. Leveraging `<feColorMatrix>` along with some blurring (ex. svg `<feGaussianBlur>`, css `filter: blur()`, svelte `transition:blur`) produces a fun "gooey" effect. This works by using feColorMatrix to define a threshold of the alpha (blur) as opaque, with the rest becoming fully transparent. Useful to create text morphing, rounded contiguous text backgrounds, gooey dots, and more. 👇 Keep reading for videos of each example with code, or just view the docs. → svelte-ux.techniq.dev/docs/c… → developer.mozilla.org/en-US/…
8
13
1
89
7,501
Just added <Shine> component to Svelte UX. It complements the <Tilt> component well (adds some additional depth to the effect). I'm going to kick around the API a little more, as well as the spotlight action, and then push a new release in the next day or so. - svelte-ux.techniq.dev/docs/c… - svelte-ux.techniq.dev/docs/a…
9
10
84
6,354
Introducing 💻 svelte-ux (svelte-ux.techniq.dev/) and 📊 LayerChart (layerchart.com/) Over the past 2 years I've been creating these Svelte libraries as I built highly interactive and visual applications, and they are close to 1.0 releases. @SvelteSociety 1/4
6
25
2
152
14,136