Flashes Home Search Notifications Sign in Post

Devon Govett

@devongovett.me

4240 Followers 78 Following

I write javascript

screenshot of shadcn/create showing supported component libraries: Base UI, React Aria, and Radix UI.

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>

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.

<ComboBox>
<Input />
<ComboBoxValue>
{({selectedItems}) => (
<TagGroup items={selectedItems}>
{item => <Tag>{item.name}</Tag>}
</TagGroup>
)}
</ComboBoxValue>
<ComboBox>

import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div className={style({backgroundColor: 'red-400', color: 'white'})}>
{/* ... */}
</div>

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']);

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>

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>

Screenshot of Spectrum 2 example app showing an app frame with a photo grid in a waterfall layout.

Video demo of website features

Screenshot of Vanilla CSS components in light mode with a purple accent color including TextField, DatePicker, Select, Tags, Radios, Slider, Table, Menu, and more.

Example cards including Emoji Picker, Filterable CRUD Table, Gesture Driven Sheet, iOS List View, Kanban Board, Photo Library, Ripple Button, and Swipeable Tabs.

Screenshot showing component card illustrations with pretty gradients for several components.

.react-aria-TabPanels {
position: relative;
height: var(--tab-panel-height);
transition: height 400ms;
overflow: clip;
}

.react-aria-TabPanel {
transition: opacity 400ms;

&[data-entering],
&[data-exiting] {
opacity: 0;
}

&[data-exiting] {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}

Diagram showing current month centered in the viewport, with a month plus a placeholder on each side.

Screenshot of all the components with various color themes: indigo, blue, green, pink, red, and orange.

Screenshot of the same components in dark mode.

Screenshot of various UI elements including textfield, date picker, select, tags, radios, slider, switch, checkbox, buttons, progress bar, table, number field, combobox, and menu.

View overlooking a lake with palm trees in the foreground.

<Select>
<Label />
<SelectValue>
<TagGroup />
</SelectValue>
<Button />
<Popover>
<Autocomplete>
<SearchField />
<ListBox />
</Autocomplete>
</Popover>
</Select>

Screenshot of ColorSlider code example. Code shows highlighted lines setting the value, onChange, and onChangeEnd props, with faded out code above and below.

Code sample showing graphviz code on the left, and server component to render it on the right.

screenshot of Tabs component documentation with toggle between Vanilla CSS and Tailwind, controls for orientation (horizontal or vertical), keyboardActivation (automatic or manual), and isDisabled. Live example output and code. Tabs to switch between files.

Incorrect and correct examples of date formatting in Hebrew. Incorrect shows 45:8, 2025.1.31. Correct shows 8:45, 31.1.2025.

Screen recording of tree with drag and drop, showing mouse and keyboard reordering, with VoiceOver captions

Screenshot of two chrome windows showing a Parcel + Deno + React Server App, and a Parcel + Bun + React Server App.

import {fetchRSC} from '@parcel/rsc/client';

function App() {
return (
<Suspense fallback={<>Loading...</>}>
<Comments />
</Suspense>
);
}

let request;
function Comments() {
request ??= fetchRSC('/comments');
return request;
}

Screenshot of code sample:

$ parcel server.tsx

// server.tsx
import express from 'express';
import {renderRequest} from '@parcel/rsc/node';
import {Page} from './Page';

const app = express();
app.get('/', async (req, res) => {
await renderRequest(req, res, <Page />);
});

app.listen(3000);

// Page.tsx
"use server-entry";
export function Page() {
return (
<html>
<body>
<h1>Hello world!</h1>
<Client />
</body>
</html>
);
}

Screen recording showing Chrome dev tools with a virtualized list

Video demo of components including command palette, searchable select, searchable submenu, toast, tree, and virtualizer.

Changing "Over 40 components" to "Over 50 components" in React Aria homepage subtitle

Screenshot of Parcel documentation for React Server Components

Legal

Privacy Policy Terms and Conditions

Contact

Follow

Bluesky Instagram Threads

Flashes for Bluesky Get it on the App Store