Svelte UX

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

[MadeWithSvelte @MadeWithSvelte]

Svelte UX by @techniq35 is a collection of 200+ components, actions, stores and utilities to build interactive apps 📦️✨ - https://t.co/zwlEjEVkIR

[Sean Lynch 🦋 @techniq.dev @techniq35]

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).

[Sean Lynch 🦋 @techniq.dev @techniq35]

📣 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).

https://t.co/uxojQW2XKN

[Sean Lynch 🦋 @techniq.dev @techniq35]

⚠️ 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 🫶

[Sean Lynch 🦋 @techniq.dev @techniq35]

@SvelteUX

[Sean Lynch 🦋 @techniq.dev @techniq35]

Svelte UX and @LayerChart are the 3rd and 4th trending #svelte repos on #github this week 🤩

[Sean Lynch 🦋 @techniq.dev @techniq35]

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: https://t.co/mERNqcHxNx

✔︎ 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✨

https://t.co/Otq5DqNY5G

[Sean Lynch 🦋 @techniq.dev @techniq35]

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.

→https://t.co/bdidEkb18Y
→https://t.co/OgG0enF6Kt

[Sean Lynch 🦋 @techniq.dev @techniq35]

I've setup a discord server for @LayerChart and Svelte UX to create a community to help with development and answer questions. https://t.co/wfPEjuhFat

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.

[Sean Lynch 🦋 @techniq.dev @techniq35]

✨ 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.

→ https://t.co/WKc9z5ulQr
→ https://t.co/oLEC1xuaSD

[Sean Lynch 🦋 @techniq.dev @techniq35]

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.

- https://t.co/BHvieq5QKA
- https://t.co/4r3LBZNpSV

[Sean Lynch 🦋 @techniq.dev @techniq35]

Introducing 💻 svelte-ux (https://t.co/cZr7mx3vcz) and 📊 LayerChart (https://t.co/Vmxx6W0ngN)

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