Creator of @parceljs and @lightningcss. Engineer @adobe working on React Aria and React Spectrum.
San Francisco
- Tweets 58,462
- Following 1,139
- Followers 42,738
- Likes 10,427
Pinned Tweet
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
55
96
804
85,610
Really cool to see @shadcnblocks supporting React Aria across their entire library of thousands of blocks and components! shadcnblocks.com/react-aria
ALT Shadcn Blocks + React Aria: Every Shadcnblocks block, component and page is available for Adobe's React Aria Components, alongside Radix UI and Base UI. Same blocks, accessibility-first primitives underneath.
6
6
123
7,044
Same in React Aria! We support both transitions and keyframes with a single data attribute-based API. react-aria.adobe.com/styling…
One nice subtle benefit of using Base UI over Radix is that the animations are interruptible since Base uses CSS transitions instead of keyframes.
This is me spamming on both dropdowns, notice the glitchiness in the one on the left.
3
3
184
17,049
Devon Govett retweeted
When I was debating switching to React Aria, I wrote up a list of places that were using in production. Probably the most interesting open-source user was the (Canadian) British Columbian government (github.com/bcgov/design-syst…) but also Unity and JetBlue.
1
1
7
1,256
I love finding React Aria in the wild: while I was booking a campsite on vacation last week, I noticed that recreation.gov uses our DatePicker! 🇺🇸
ALT Screenshot of recreation.gov datepicker, with chrome dev tools open and showing an element with react-aria attributes.
3
143
5,148
This morning I built a test harness for @lightningcss to run the Web Platform Tests – the same tests used by browser engines.
It extracts over 24,000 CSS parsing test cases, and verifies that Lightning CSS can correctly parse, transform, and minify each one. Then it takes the compiled CSS and verifies that it still passes the original test in a browser.
Also built this cool dashboard to dive into the test failures. This will be super helpful for discovering edge cases and missing features! Already got some work to do. 😅
ALT Screenshot of WPT results for Lightning CSS. Shows 24,000 test cases, with a nested tree of test cases by CSS property (e.g. color, background-image, and grid-template-columns).
11
7
117
7,242
Devon Govett retweeted
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/release…
ALT 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.
2
12
216
12,436
Devon Govett retweeted
Today is all about @intentui. I just updated the sidebar using the new Navigation Tree component and added an example for asynchronous loading to the menu, both from the latest RAC released.
So if you want to use it, make sure to pull the latest Sidebar source code.
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/release…
ALT 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.
1
3
19
4,316
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/release…
ALT 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.
2
12
216
12,436
Why NavigationTree vs a static HTML list of links: keyboard navigation.
⬆️⬇️ to move between items
➡️⬅️ to expand and collapse
Tab to action buttons, then out of the entire list
Enter to navigate
This is more efficient when navigating large navigation hierarchies. Screen readers also announce the expanded/collapsed states.
A static list is fine for simple websites though. This component is designed for complex app navigation.
1
5
1,201
Anyone ever seen this on @npmjs before? I published a package and it's been "Validating" for 25 minutes. Other packages that depend on this version were published and now their installs fail on this dep. I don't see anything that I can do about it?
6
27
8,295
So this is kinda wild: lightningcss passed react in weekly downloads (counting next and rspack which embed the rust crate). Meaningless stat but still crazy to see. ⚡️
ALT Chart of weekly npm downloads for lightningcss vs react. In July lightningcss passes React, now with over 200M downloads per week vs react's 175M.
6
96
5,439
Very good tip. I updated our text-shimmer and skeleton components after seeing this tweet, and it actually reduced main thread time by 5x
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. Reduces CPU usage to < 2%. codepen.io/editor/devongovet…
3
3
118
25,164
Devon Govett retweeted
Can recommend. I've made the switch at Framer:
• Paint: 127ms → 0ms
• RasterTask: 440ms → 0ms
• Main-thread time: 276ms → 6ms
• Compositor thread: 146ms → 351ms
→ work moves off main thread. this can improve INP too!
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. Reduces CPU usage to < 2%. codepen.io/editor/devongovet…
5
8
292
48,688
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. Reduces CPU usage to < 2%. codepen.io/editor/devongovet…
18
34
804
109,628
StyleX is pretty nice, but it's missing some important things for design systems IMO. One of the best things about Tailwind is that it is a design system. Color tokens, consistent spacing, font sizes, etc. are the default. You can use arbitrary values too but it pushes you away from that.
StyleX is just raw CSS by default – no restrictions. You _can_ create variables like in CSS, but it's not the default, and therefore inconsistency is the default. It's a subtle distinction but it really makes a big difference in how a system is used.
35
10
447
95,066
A couple years ago I designed the styling system for React Spectrum. It's inspired by StyleX and Vanilla Extract's Sprinkles, and built on bundler macros.
• Defaults to design tokens (type-safe with autocomplete), with escape hatches for arbitrary values.
• Generates atomic CSS at build time
• Supports conditions like variants and states without specificity issues.
• Nested conditions
• Supports creating reusable utilities
• Merges styles deterministically
• Restrict allowed component style overrides
react-spectrum.adobe.com/sty…
ALT import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; const styles = style({ backgroundColor: { variant: { primary: 'accent', secondary: 'neutral' } } }); function MyComponent({variant}: {variant: 'primary' | 'secondary'}) { return <div className={styles({variant})} /> }
1
2
59
12,677