Svelte UX retweeted
Svelte UX by @techniq35 is a collection of 200+ components, actions, stores and utilities to build interactive apps 📦️✨ - madewithsvelte.com/svelte-ux
Svelte UX retweeted
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).
Svelte UX retweeted
📣 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…
Svelte UX retweeted
⚠️ 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 🫶
Svelte UX retweeted
Replying to @SvelteUX
Svelte UX retweeted
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.
Svelte UX retweeted
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…
Svelte UX retweeted
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
Svelte UX retweeted
✨ 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/…
Svelte UX retweeted
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…
Svelte UX retweeted
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














