Devon Govett

Devon Govett

@devongovett.me

I write javascript

4.2K followers 79 following511 posts

@devongovett.me

Just want to emphasize: this is entirely built with CSS scroll snapping and view timelines – no JS gesture handling or animations. This means we get high frame rate fluid momentum and elastic physics matching the platform for free. It feels native because it really is – modern CSS is pretty amazing.

Devon Govett@devongovett.me

📢 Introducing the React Aria Sheet component! ‣ Native swipe gestures powered by CSS scroll snapping ‣ Gesture-synced animations ‣ Snap points ‣ Stacking ‣ Elastic over-scroll ‣ Keyboard aware Wrote a blog post about how it works! react-aria.adobe.com/blog/sheet

@devongovett.me

📢 Introducing the React Aria Sheet component! ‣ Native swipe gestures powered by CSS scroll snapping ‣ Gesture-synced animations ‣ Snap points ‣ Stacking ‣ Elastic over-scroll ‣ Keyboard aware Wrote a blog post about how it works! react-aria.adobe.com/blog/sheet

@devongovett.me

Also in this release: Improved overlay positioning with software keyboard, Turbopack optimize locales plugin, and plenty of bug fixes. Thanks to everyone who contributed! 😍 react-aria.adobe.com/releases/v1-...

react-aria.adobe.comv1.22.0 | React AriaThis release adds a new Sheet component, Turbopack support for locale optimization, and improved handling of interactive widgets in overlay placement, along with bug fixes.

@devongovett.me

New React Aria release! 🧭 New NavigationTree component, perfect for sidebars. Supports expandable items, sections, keyboard navigation, action buttons, etc. ⌛️ Menu async load more 📝 TokenField selection updates 📱 iOS overlay positioning fixes react-aria.adobe.com/releases/v1-...

@devongovett.me

Text shimmer animations are usually very CPU intensive (~20% for one line of text). Animating background-position is not GPU accelerated, so the browser re-paints every frame. I found an alternative using a CSS mask which only animates a transform. Down to < 2% CPU usage. codepen.io/editor/devon...

@devongovett.me

Unfortunately Firefox does not support mask-clip: text. There is an alternative using the non-standard -moz-element() function but this appears to disable GPU acceleration.

@devongovett.me

Fun CSS demo I built today: automatically compute a partially transparent white or black color that meets a target WCAG contrast ratio against an arbitrary background color. No JavaScript needed. 😃 codepen.io/editor/devon...

@devongovett.me

New React Aria components! 🚀 🔗 PreviewTrigger – build accessible hover popovers 🐭 Context menu trigger for mouse, keyboard, and touch 🪙 TokenField (alpha) – a text input with inline tokens 📋 Editable table cells 🎹 Keyboard shortcuts 🪝 New hook docs react-aria.adobe.com/releases/v1-...

@devongovett.me

Exciting news: React Aria is now a first-class component base in shadcn/ui! Initialize a new project with `--base aria`, or use shadcn/create to build and customize your own component library. ui.shadcn.com/docs/changel...

@devongovett.me

React Aria Components v1.19.0 is out! ✨ Autocomplete supports inline completions (e.g. mentions), and a new Popover API enables positioning relative to the cursor. Also, text inputs can now be nested in GridList and Tree without breaking arrow key navigation! react-aria.adobe.com/releases/v1-...

@devongovett.me

React Aria release! 📆 Calendar multi-select, week/day views, month/year pickers, weeksInMonth ⚓️ RangeCalendar unavailable anchor date ✅ Checkbox/Radio/Switch description and error message 👢 TableFooter ⛽️ SliderFill 💯 Non-object collection items 🧪 New test utils react-aria.adobe.com/releases/v1-...

@devongovett.me

Looks like Vite 8 is using Lightning CSS as the default CSS minifier! Most next-generation build tools are now using it, including Turbopack, Rspack, Tailwind, Parcel, Bun (a port), and now Vite. ⚡️

View full thread

@devongovett.me

Now that Lightning CSS is a core ecosystem dependency, I need to improve this. I'll be reaching out to these tools soon to try to bring on representatives as maintainers. If you're interested, please reach out as well. Hopefully we can get a good core team established and speed up the process a bit.

@devongovett.me

Finally had time to write up some thoughts on what I need help with and the project philosophy: github.com/parcel-bundl...

github.comImproving lightningcss maintenance - please help! · parcel-bundler lightningcss · Discussion #1241Lightning CSS usage has skyrocketed in the last year. It is now used in almost every major modern build tool, including Next.js, Vite, Rspack, Tailwind, Parcel, Bun (a port), etc. npm downloads hav...

@devongovett.me

Huge React Aria release! 🏝️ Expandable table rows 📉 90% fewer dependencies 🔥 Sub-path imports – improved tree shaking, faster builds, and easier discoverability 🪟 Virtualizer window scrolling ➡️ GridList horizontal orientation 💾 NumberField and RangeCalendar commit behavior

@devongovett.me

Expandable table rows enable a macOS Finder-like combination of a tree and a table, integrating with keyboard navigation, selection, and drag and drop.

@devongovett.me

We consolidated our packages to reduce dependencies by over 90%, making future upgrades much easier, and improving tree shaking, build times, component discoverability, and micro-frontend support. Learn more about the migration process in the release notes! react-aria.adobe.com/releases/v1-...

react-aria.adobe.comv1.17.0 | React AriaThis release brings support for several long-awaited features, including support for expandable rows in Table, window scrolling in Virtualizer, and horizontally virtualized GridLists and ListBoxes. We...

@devongovett.me

A free side-benefit of subpath imports is that you can easily discover what child components are supported using TypeScript autocomplete.

Devon Govett@devongovett.me

The next version of React Aria has 90% fewer dependencies (from 127 down to just 13). It also supports subpath imports, e.g. "react-aria-components/Button". This means easier upgrades, faster builds, more effective tree shaking, and improved micro-frontend support. 🚀

@devongovett.me

The next version of React Aria has 90% fewer dependencies (from 127 down to just 13). It also supports subpath imports, e.g. "react-aria-components/Button". This means easier upgrades, faster builds, more effective tree shaking, and improved micro-frontend support. 🚀

@devongovett.me

This has been an absolute nightmare to test against every bundler both old and new, with different typescript settings, jest configs, using scoped packages and not, etc. Months of work to make it a backwards compatible opt-in update. I hope it's worth it! 😅

@devongovett.me

Looks like Vite 8 is using Lightning CSS as the default CSS minifier! Most next-generation build tools are now using it, including Turbopack, Rspack, Tailwind, Parcel, Bun (a port), and now Vite. ⚡️

@devongovett.me

This is incredible, but tbh I could use some help with maintenance. I appreciate sponsorships, but unfortunately this does not magically create more time for me to work on it. CSS is evolving quickly and it's hard to keep up with everything as a solo dev. I'm sorry if my slowness has affected you.

@devongovett.me

New React Aria release! ✅ Multi-select ComboBox with customizable selection rendering (e.g. TagGroup) 🏝️ Tree sections – create labeled groups of items 💯 Better NumberField paste handling 📆 Improved Calendar month and year dropdown behavior 🐞 Lots of bug fixes! react-aria.adobe.com/releases/v1-...

@devongovett.me

Multi-select ComboBox was one of our most requested features. It works just like Select: set selectionMode=multiple, and use the ComboBoxValue component to render the selected values. You can show a TagGroup, a textual list, or any custom component. react-aria.adobe.com/ComboBox#tag...

@devongovett.me

I'm often asked why you would use a JS library like React Aria for modals instead of the HTML <dialog> element, so I wrote up a detailed response. One of the main features of <dialog> (top layer) is also one of its weaknesses. github.com/adobe/react-...

github.comModal a11y · adobe react-spectrum · Discussion #9696Hi, I have 2 questions related to the Modal component. In the documentation example, I tells us to use <Dialog> inside the modal. Why is it internally a <section role="dialog"> instead of a <dialog...

@devongovett.me

unplugin-parcel-macros brings Parcel's build-time macro support to other bundlers, including Vite, Webpack, Rollup, and Esbuild. v0.2.0 adds support for WASM, so it works in browser environments like Stackblitz too! github.com/devongovett/...

@devongovett.me

Macros allow you to generate JS values, functions, and even assets like CSS at build time. The result is inlined into the compiled JS bundle. parceljs.org/features/mac... We use macros for React Spectrum's CSS-in-JS library to generate atomic CSS at build time.

@devongovett.me

New React Aria release! 🎁 New `render` prop – customize DOM element, integrate router links & animation libraries 📆 Improved DateField UX – constrain invalid dates on blur instead of while typing 🤖 Agent skills 🔎 Improved doc search 🐞 80+ bug fixes react-aria.adobe.com/releases/v1-...

react-aria.adobe.comv1.15.0 | React AriaNew year, new release, and the shine hasn’t worn off from our new documentation website! This month’s release includes expanded customization options via a new render prop, greater input flexibility i...

@devongovett.me

The `render` prop receives DOM props and component state, allowing you to render router links with pre-fetching support, drive animations, reuse your existing presentational components, etc. react-aria.adobe.com/customizatio...

@devongovett.me

Install the new React Aria agent skills to help your AI coding tools access the docs: $ npx skills add react-aria.adobe.com

@devongovett.me

In the next version of React Aria Components, you can use the `render` prop to customize the rendered DOM element. This also receives the component state, which makes it easy to drive animations.

@devongovett.me

You can also: • Render framework link components with support for pre-fetching. • Reuse presentational components with styles and behaviors. We implemented a few guardrails to help avoid breaking behavior/a11y. See all the details and leave your feedback on the PR: github.com/adobe/react-...

github.comfeat: Add `render` prop to allow customizing DOM element by devongovett · Pull Request #9499 · adobe/react-spectrumCloses #5476, closes #5321, closes #9470, closes #9450 This adds an often-requested feature: the ability to customize the element rendered by React Aria Components and merge behavior/styles with cu...

Devon Govett reposted

Firefox for Web Developers

@webdevs.firefox.com

Firefox 147 just landed & it's pretty huge in terms of web features: 🎉 CSS anchor positioning 🎉 The navigation API 🎉 View transition types 🎉 Brotli support in Compression/DecompressionStream 🎉 CSS module imports And more! https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147

developer.mozilla.orgFirefox 147 release notes for developers (Beta) - Mozilla | MDNThis article provides information about the changes in Firefox 147 that affect developers. Firefox 147 is the current Beta version of Firefox and ships on January 13, 2026.

@devongovett.me

Looks like the React Conf talks are up! Here's mine where I attempted to explain how React Server Components actually work in ~10 minutes. 😅 www.youtube.com/watch?v=E6A2...

youtube.comHow Parcel Bundles React Server ComponentsYouTube video by React Conf

@devongovett.me

Facebook's Static Hermes is kind of incredible. It can compile JavaScript into C, which is then optimized into native machine code. I just compiled the Less.js source code into a C library. Then I called it from Rust as a native Parcel plugin (no Node). Wild. 👨‍🔬 devongovett.me/blog/static-...

devongovett.meHow to compile JavaScript to C with Static HermesLately, I've been working on porting more of Parcel to Rust, and investigating ways to embed JS-based plugins. This post describes how I used Static Hermes to compile Less.js to a native C library tha...

@devongovett.me

Introducing the new React Aria docs! 🎉 All-new content and search experience. Interactive CSS and Tailwind examples to get you started quickly – just install with shadcn. New guides and full example apps. MCP server and AI integrations. Check it out! react-aria.adobe.com

@devongovett.me

We’re also releasing Spectrum 2, our new design system, which is built on top of React Aria Components! It includes a brand new styling library, more components, and a fresh new look. react-spectrum.adobe.com

@devongovett.me

Vanilla CSS and Tailwind 🎨

@devongovett.me

Examples

@devongovett.me

Components 🤤

@devongovett.me

Interesting: GitHub is removing all toasts from their UI due to usability and accessibility issues. I agree they tend to be overused, probably because they’re so easy to implement. There are often better patterns like inline confirmation/errors. primer.style/accessibilit...

primer.styleToastsGitHub no longer uses toasts because of their accessibility and usability issues.

@devongovett.me

What if component libraries supported in-context errors by default via async React action props? Simple DX like toasts, but better UX. 🤔

@devongovett.me

In the next release of React Aria, tab panels support entry and exit animations (e.g. cross fade), as well as smooth height transitions. 🎉

@devongovett.me

All just CSS transitions – no additional animation libraries needed! We give you data-entering and data-exiting states for each TabPanel, and a CSS variable for the height that you can transition.

@devongovett.me

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇 stackblitz.com/edit/rac-swi...

@devongovett.me

The current month is centered in the viewport, with an extra month + large placeholder on either side. As you swipe, the months update and the placeholder shrinks. When scrolling ends, the scroll position is re-centered. This avoids jumpiness when updating the scroll position while the user scrolls.

@devongovett.me

Having a blast re-designing all the React Aria examples this week. Flat design is so over – bring back depth! 😃

@devongovett.me

Dark mode 🌒

@devongovett.me

All of the colors are calculated based on a single CSS variable using relative oklch, so you can change the theme with just one line. --tint: green; Modern CSS is amazing! 😲

Devon Govett reposted

Andrew Lisowski 💻

@hipstersmoothie.com

Almost done moving my day job’s design system fully over from Radix to react-aria 🔥🔥🔥 Huge improvement imo. And all without a single API change