Sign in

Devon Govett

@devongovett.me
4.3K followers 78 following 504 posts

I write javascript

PostsRepliesMedia
Devon Govett @devongovett.me · 01/09/2026
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-...
Screenshot of NavigationTree showing a list with Home, Files expanded with Photos and Videos nested, and Shared which is not expanded. Each item has an action menu.
0223
Devon Govett @devongovett.me · 27/08/2026
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...
2484
Devon Govett @devongovett.me · 19/08/2026
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...
1406
Devon Govett @devongovett.me · 31/07/2026
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-...
2515
Devon Govett @devongovett.me · 17/07/2026
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...
screenshot of shadcn/create showing supported component libraries: Base UI, React Aria, and Radix UI.
4724
Devon Govett @devongovett.me · 18/06/2026
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-...
1322
Devon Govett @devongovett.me · 28/05/2026
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-...
0453
Devon Govett @devongovett.me · 15/04/2026
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
1657
Devon Govett @devongovett.me · 28/03/2026
A free side-benefit of subpath imports is that you can easily discover what child components are supported using TypeScript autocomplete.
Code example:

import * as RAC from 'react-aria-components/ComboBox';

<RAC.ComboBox>
  <RAC.Label>Label</RAC.Label>
  <RAC.Input />
  <RAC.Button />
  <RAC.FieldError />
  <RAC.Popover>
    <RAC.ListBox>
      <RAC.ListBoxItem>Item</RAC.ListBoxItem>
      <RAC.ListBoxItem>Item</RAC.ListBoxItem>
    </RAC.ListBox>
  </RAC.Popover>
</RAC.ComboBox>
3321
Devon Govett @devongovett.me · 25/03/2026
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. 🚀
41053
Devon Govett @devongovett.me · 12/03/2026
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. ⚡️
Lightning CSS is now used for CSS minification by default. You can use the build.cssMinify: 'esbuild' option to switch back to esbuild. Note that you need to install esbuild as a devDependency.
21555
Devon Govett @devongovett.me · 04/03/2026
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-...
3424
Devon Govett @devongovett.me · 27/02/2026
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.com
Modal a11y · adobe react-spectrum · Discussion #9696
Hi, 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...
4629
Devon Govett @devongovett.me · 26/02/2026
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/...
import regexgen from 'regexgen' with {type: 'macro'};

// Compile a regex at build time.
// The output is inlined into the bundle.
const regex = regexgen(['foobar', 'foobaz', 'foozap', 'fooza']);
3232
Devon Govett @devongovett.me · 04/02/2026
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.com
v1.15.0 | React Aria
New 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...
1375
Devon Govett @devongovett.me · 23/01/2026
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.
import {Button} from 'react-aria-components';
import {motion} from 'motion/react';

<Button
  render={(domProps, {isPressed}) => (
    <motion.button
      {...domProps}
      animate={{scale: isPressed ? 0.9 : 1}} />
  )}>
  Press me
</Button>
3551
Reposted by Devon Govett
Firefox for Web Developers @webdevs.firefox.com · 13/01/2026
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! developer.mozilla.org/en-US/docs/Mo…
developer.mozilla.org
Firefox 147 release notes for developers (Beta) - Mozilla | MDN
This 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.
933065
Devon Govett @devongovett.me · 07/01/2026
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.com
How Parcel Bundles React Server Components
YouTube video by React Conf
0151
Devon Govett @devongovett.me · 29/12/2025
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.me
How to compile JavaScript to C with Static Hermes
Lately, 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...
816823
Devon Govett @devongovett.me · 16/12/2025
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
910011
Devon Govett @devongovett.me · 11/12/2025
Vanilla CSS and Tailwind 🎨
Screenshot of Vanilla CSS components in light mode with a purple accent color including TextField, DatePicker, Select, Tags, Radios, Slider, Table, Menu, and more.Screenshot of Tailwind components in light mode with a blue accent color including TextField, DatePicker, Select, Tags, Radios, Slider, Table, Menu, and more.
3440
Devon Govett @devongovett.me · 10/12/2025
Examples
Example cards including Emoji Picker, Filterable CRUD Table, Gesture Driven Sheet, iOS List View, Kanban Board, Photo Library, Ripple Button, and Swipeable Tabs.
0240
Devon Govett @devongovett.me · 09/12/2025
Components 🤤
Screenshot showing component card illustrations with pretty gradients for several components.
4400
Devon Govett @devongovett.me · 15/11/2025
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.style
Toasts
GitHub no longer uses toasts because of their accessibility and usability issues.
2402
Devon Govett @devongovett.me · 23/10/2025
In the next release of React Aria, tab panels support entry and exit animations (e.g. cross fade), as well as smooth height transitions. 🎉
3711
Devon Govett @devongovett.me · 20/10/2025
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...
2392
Devon Govett @devongovett.me · 14/10/2025
Having a blast re-designing all the React Aria examples this week. Flat design is so over – bring back depth! 😃
Screenshot of various UI elements including textfield, date picker, select, tags, radios, slider, switch, checkbox, buttons, progress bar, table, number field, combobox, and menu.
81468
Reposted by Devon Govett
Andrew Lisowski 💻 @hipstersmoothie.com · 10/10/2025
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
2282
Devon Govett @devongovett.me · 08/10/2025
If you’re curious how React Server Components integrate with a bundler, how “use client” actually works, and how RSCs can even benefit client rendered apps, tune into my talk at React Conf at 2:30 PST today!
2292
Devon Govett @devongovett.me · 06/10/2025
What a nice view to wake up to for React Conf!
View overlooking a lake with palm trees in the foreground.
0240
Devon Govett @devongovett.me · 02/10/2025
Big React Aria release! 🚀 🥳 Multi Select! 🎬 ComboBox onAction prop, e.g. "create" item ➡️ Disclosure animation ✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc. 📱 Improved modal behavior in iOS 26 📆 Calendar selectionAlignment react-spectrum.adobe.com/releases/202...
7795
Devon Govett @devongovett.me · 29/09/2025
Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉 stackblitz.com/edit/rac-swi...
1703
Devon Govett @devongovett.me · 26/09/2025
Looking forward to speaking at React Conf about how Server Components and bundlers work together!
0190
Devon Govett @devongovett.me · 23/09/2025
You can add a "Create" option to a React Aria ComboBox in just a few lines of code. stackblitz.com/edit/szjf6ul...
0161
Devon Govett @devongovett.me · 18/09/2025
I think I finally found a solution to reliably prevent scrolling behind modals on iOS! 😲 Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc. Coming soon to React Aria! 🎉
1481
Devon Govett @devongovett.me · 16/09/2025
Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳 • Native CSS transitions, no animation library needed. • Works with SSR with no flicker before JS runs. • No ResizeObserver. • Enter + exit animations.
2313
Devon Govett @devongovett.me · 15/09/2025
In the next release of React Aria, disclosures are animatable with 2 lines of code. 🎉 height: var(--disclosure-panel-height); transition: height 200ms; Works with browser page search too!
1363
Devon Govett @devongovett.me · 09/09/2025
💬 React Aria RFC: Improving dependency management and tree shaking • Merge all code into mono-packages to reduce dependencies and simplify upgrading and pinning. • Provide sub-path exports e.g. react-aria-components/Button to improve tree shaking and MFE support. WDYT? github.com/adobe/react-...
github.com
chore: Dependency management RFC by devongovett · Pull Request #8797 · adobe/react-spectrum
View Rendered RFC Related discussions: Spectrum component dependency issues #2195 Individual packages for `react-aria-components` #6734 Components Import #7766 @react-aria/utils 3.30.0 introduced ...
2231
Devon Govett @devongovett.me · 08/09/2025
Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂
31267
Devon Govett @devongovett.me · 25/08/2025
New React Aria release! 🚀 ✨ Origin-aware Popover + Tooltip animations 🔖 GridList section support 🔍 Autocomplete filtering with GridList, Table, and TagGroup 🐉 Simpler useDragAndDrop API 🙌 Enhancements to ComboBox, DatePicker, Menu, and more! react-spectrum.adobe.com/releases/202...
2381
Devon Govett @devongovett.me · 14/08/2025
Built an emoji picker with autocomplete, virtualized scrolling, and arrow key navigation using React Aria in ~50 lines. 😎 Combines Select, Popover, Autocomplete, SearchField, Virtualizer, and ListBox. Composition ftw! stackblitz.com/edit/react-a...
2424
Devon Govett @devongovett.me · 12/08/2025
The new React Aria docs will have interactive prop controls that update both the component and the code. Configure, test, and copy into your app!
2371
Devon Govett @devongovett.me · 07/08/2025
In the new React Aria docs we're working on, we collapse long code examples until you need them. But rather than just showing the top 10 lines (mostly imports), we center the relevant lines so you can see them even when collapsed. 😀
Screenshot of ColorSlider code example. Code shows highlighted lines setting the value, onChange, and onChangeEnd props, with faded out code above and below.
1481
Reposted by Devon Govett
Santiago Santana @santiago-j-s.bsky.social · 02/08/2025
Ok, I didn't know that. Thanks for the response! btw, I've spent all day playing with Parcel and RSC, and I think it's amazing Many projects, SPAs and even server node apps, could adopt RSC incrementally thanks to Parcel
041
Devon Govett @devongovett.me · 27/07/2025
btw, all the diagrams in this article are rendered using graphviz in a React Server Component to generate SVG at build time. Super convenient.
Code sample showing graphviz code on the left, and server component to render it on the right.
1442
Devon Govett @devongovett.me · 27/07/2025
Wrote an article about how React Server Components integrate with a bundler. It's a deep dive into how code splitting works, how RSCs eliminate network waterfalls, how environment directives like "use client" work, CSS loading, etc. Check it out! devongovett.me/blog/parcel-...
devongovett.me
How Parcel bundles React Server Components
Parcel v2.14.0 added support for React Server Components. This post is a deep dive into the internals: how RSCs integrate with a bundler, what directives like "use client" actually do, how code splitt...
511420
Devon Govett @devongovett.me · 23/07/2025
New React Aria release! 📜 Infinite scroll in ListBox, GridList, Table, & Tree ⚛️ React 19 actions form reset 🐲 Virtualized Tree drag and drop 🤝 Opened API to DOM events – works better with other libraries 📆 DatePicker autocomplete 🚀 And TONS more! react-spectrum.adobe.com/releases/202...
react-spectrum.adobe.com
July 22, 2025 Release
Happy summer! This release adds support for async loading and infinite scrolling, improves form integration and drag and drop interactions, and adds support for additional DOM events and attributes.
2394
Devon Govett @devongovett.me · 17/07/2025
Very happy that Parcel helped enable this! 🤩
1392
Devon Govett @devongovett.me · 15/07/2025
Absolutely MASSIVE collection of beautifully designed and expertly crafted components built with React Aria. 🤩 Everything from base components to entire marketing sections and dashboards. Comes with a matching Figma UI kit, CLI, themes, icons, and more. Incredible. www.untitledui.com/react
untitledui.com
Untitled UI React — React Component Library
Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria. Just copy, paste, and build.
0291
Devon Govett @devongovett.me · 14/07/2025
Started writing an article about RSCs from a bundler integration perspective. Might end up being multiple parts though. I realized I needed to explain how code splitting works without RSCs first. Already getting kinda long…
1352