James

@Base_UI dev

[James @atomiksdev]

@jonathantan1425 @emilkowalski This was an intentional trade-off to always avoid layout shift: https://t.co/xKAiNicO4h

Radix runs the risk of layout shifts with `fixed` elements that will likely appear randomly as the app scales. Case in point, Vlad's recordings showing it in the wild

[?elianiva✨ @elianiva_]

i hate it when tooltips jump around when you hover over them and switch between items, really like the fact that making this kind of smooth tooltip is very trivial with @base_ui

[James @atomiksdev]

@olivtassinari @ryanflorence Not sure tbh, it happens when `outline` and `box-shadow` are combined, but not when isolated individually

[James @atomiksdev]

@boldureans @letstri @emilkowalski It's how anchored toasts should be separated from stacked ones already, though it's more justified there.

Stacked ones could have a built-in `position` key so you only need to render 1 viewport for different positions.

https://t.co/0SqLi1MeW2

[James @atomiksdev]

@boldureans @letstri @emilkowalski I imagine you did something like this?

top = Toast.createToastManager()
bottom = Toast.createToastManager()

As viewports don't support multiple positions due to no grouping for stacks. It could be supported, but not sure how worth it is over just rendering multiple viewports

[James @atomiksdev]

@letstri @boldureans @emilkowalski Is this more so DX? Because Base UI Toast supports all of these:

1. The `update` method can dedupe
2. The `data` option allows passing anything you want (including components)
3. <Toast.Close> is usually always rendered, but can be conditional with `data` as well

[Colm Tuite @colmtuite]

Base UI Drawer is live.

Here are some of my favourite features 🧵👇

[Colm Tuite @colmtuite]

Base UI crossed 1.1M+ weekly downloads. We grew ~19% weekly for the past 7 weeks. Not that for one year in 📈

[James @atomiksdev]

@RafaellLycan @kianbazza @bazza_ui @base_ui @colmtuite In 1.1.0 there was a bug where the submenu could get stuck (as shown in the recording above)

In 1.2.0 this should be fixed, and I made an isolated demo that shows the perf is pretty good in prod mode for delay=0 submenu triggers 🔽

(probably can still be improved!)

[James @atomiksdev]

@Doctorthe113 @YBenlemlih @shadcn We addressed some Radix/shadcn compatibility concerns in the latest Base UI release (1.1.0)

Docs: https://t.co/xkaChCsZvo

It also includes some bug fixes like this: https://t.co/yvUNHWxpMy

[Colm Tuite @colmtuite]

Built with @base_ui

[Diego Andai @DiegoAndaiC]

I'm constantly impressed by @base_ui's flexibility. You can use NumberField's scrub area to make the input scrubbable, and even place other interactive elements like menu triggers on top:

[Colm Tuite @colmtuite]

shadcn 🤝 Base UI

A first class integration. Same shadcn abstraction, rebuilt for Base UI components.

[James @atomiksdev]

Download stats:

[James @atomiksdev]

Added this notice to Floating UI docs!!

CSS really needed this behavior — Floating UI/Popper (v1-v3) gets 50 million combined downloads per week on npm 🤯

Many users don't even realize they're using it as it's a hidden dependency of component libs.

$ pnpm why @floating-ui/dom

[Una 🇺🇦 @Una]

About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!

[Base UI @base_ui]

Introducing Base UI v1

✔︎ 35 unstyled UI components
✔︎ New npm package (base-ui/react)
✔︎ New website ✨
✔︎ Configurable, composable, customizable
✔︎ Accessible, based on ARIA + WCAG

https://t.co/HHGtrMZZLy

[James @atomiksdev]

@devongovett @colmtuite @rauchg It's minor here, but:

- The toast announces "Copied" to assistive tech, unlike tooltip text changes
- The imperative API feels more intuitive to use than controlled `open` state
- Animations & events work more nicely by default

Our tooltip guidelines are pretty long now 😅

[Pasquale Vitiello @pacovitiello]

Opening up coss ui 🎉

The new UI we're building for the @calcom platform.

Built on top of @base_ui, as we strongly believe in the project and the team behind it.

It's now open to everyone who wants to test it, break it, and make it better 💪

[James @atomiksdev]

@rickyfm If useEffectEvent shipped with hooks originally in 2019, I think there'd have been a lot less confusion around effects, especially a massive reduction in broken dep arrays

React's model is beautiful when you see it like this