James

455 posts

James

@atomiksdev

@Base_UI dev

Australia Katılım Haziran 2012

294 Takip Edilen1.6K Takipçiler

James retweetledi

Colm Tuite@colmtuite·12 Şub

Base UI Drawer is live. Here are some of my favourite features 🧵👇

Base UI@base_ui

Introducing: Drawer v1.2.0 ✔︎ New Drawer component ✔︎ New useFilteredItems hook ✔︎ Support lazy element in `render` ✔︎ Tons of Combobox + Autocomplete improvements ✔︎ Support `keepMounted` on NavigationMenu ✔︎ Support `finalFocus` on Select base-ui.com/react/overview…

English

247

27.4K

James retweetledi

Colm Tuite@colmtuite·16 Şub

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

English

152

16K

James@atomiksdev·25 Şub

@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!)

English

131

Rafaell Lycan 🇧🇷🇪🇸@RafaellLycan·25 Şub

@kianbazza @bazza_ui No worries mate The @base_ui team will improve performance eventually 😉 Nice project anyway 👍 cc @colmtuite

English

360

kian bazza@kianbazza·25 Şub

Performance gains in @bazza_ui vs. Base UI <𝙼𝚎𝚗𝚞> Finally did a side-by-side comparison... and the difference is ⚡ You can see how our implementation barely drops submenus opening when moving the cursor up/down at a fast speed. The video doesn't do it (enough) justice. We do a few things internally to make this happen -- excited to release this to the world. Soon.

English

895

135.8K

James@atomiksdev·16 Oca

@Doctorthe113 @YBenlemlih @shadcn We addressed some Radix/shadcn compatibility concerns in the latest Base UI release (1.1.0) Docs: #placeholder-values" target="_blank" rel="nofollow noopener">base-ui.com/react/componen… It also includes some bug fixes like this: github.com/shadcn-ui/ui/p…

English

The Doctor@Doctorthe113·16 Oca

@YBenlemlih @shadcn Should rephrase that select part. Shadcn docs doesn't tell you how to. And baseUI docs don't directly tell you either when I checked. If I'm not mistaken you could use a data-placeholder instead but it never worked for me.

English

322

Josef Bender@josefbender_·16 Oca

Is it better to user radix or base ui with @shadcn ui?

English

307

108.9K

James retweetledi

Colm Tuite@colmtuite·18 Ara

Built with @base_ui

nanda@nandafyi

6 months ago to now

English

771

73.4K

James retweetledi

diegoandai 🌳@DiegoAndaiC·15 Ara

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:

English

198

13.7K

James retweetledi

Colm Tuite@colmtuite·12 Ara

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

shadcn@shadcn

Start with a component library: Radix or Base UI. We rebuilt every component for Base UI, keeping the same abstraction. They are fully compatible with your existing components, even those pulled from remote registries. When you add components, we auto-detect your library and apply the right transformations.

English

508

43.1K

James@atomiksdev·15 Ara

Download stats:

English

431

James@atomiksdev·15 Ara

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!!

English

10.4K

James retweetledi

Base UI@base_ui·11 Ara

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

English

123

200

1.9K

394.3K

James@atomiksdev·16 Kas

@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 😅

English

424

Devon Govett@devongovett·16 Kas

@colmtuite @rauchg That's interesting. I wouldn't even consider this one to be a toast at all since the tooltip is already there before. Why not just change the text in the tooltip?

English

1.4K

Devon Govett@devongovett·15 Kas

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

Devon Govett@devongovett

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/accessibility/…

English

325

48.1K

James retweetledi

Pasquale Vitiello@pacovitiello·15 Eki

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 💪

English

887

107.8K

James@atomiksdev·13 Eki

@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

English

1.9K

Ricky@rickyfm·13 Eki

ok bet: no wrapper, which is easier?

English

757

575.4K

James@atomiksdev·11 Eki

@sergiodxa @purchase0264 @remix_run @bunjavascript @JLarky Had the same issue - it's because `this.update()` is actually called `this.render()` at runtime, at least on the current version of your repo The press event swallows errors so it just looks like nothing is happening

English

181

Sergio Xalambrí@sergiodxa·11 Eki

@purchase0264 @remix_run @bunjavascript @JLarky Works fine for me, the only thing that may not work is the /auth route as you need to configure some OAuth provider

English

683

Sergio Xalambrí@sergiodxa·10 Eki

I wrote a demo app using @remix_run v3 with @bunjavascript, it uses Remix to render a few routes with a hydrated component importmaps to load dependencies client-side from unpkg, and Bun.build to transform client components on demand github.com/sergiodxa/remi…

English

142

24.5K

James@atomiksdev·10 Eki

@JoshWootonn @base_ui @MakeswiftHQ This already exists, unless I'm missing something #positioner" target="_blank" rel="nofollow noopener">base-ui.com/react/componen…

English

202

Josh Wootonn@JoshWootonn·9 Eki

Hey @base_ui, have you considered adding a `Tooltip.Positioner` API? In @MakeswiftHQ, I have some specific situations where the interactive element is a invisible `input` and the visual thing being interacted with is a `div`. It would be great to be able to separate the trigger and anchor for this use case.

English

243

James@atomiksdev·9 Eki

@diegohaz Also I can deprecate Floating UI finally so we can use native anchor positioning 😂

English

115

Haz@diegohaz·8 Eki

If you all stop using Firefox (or Zen) today, I can ship something really nice with container style queries tomorrow.

English

6.4K

James@atomiksdev·9 Eki

@tomus_sherman @ryshaul @ryanflorence I didn't even see that beneath the code. I personally glaze over text unless it has a warning color/symbol to draw attention I don't think the example should omit request canceling for simplification purposes because I thought it wouldn't be buggy by default

English

Tom Sherman@tomus_sherman·9 Eki

@atomiksdev @ryshaul @ryanflorence No? This is literally linked from the example you shared

English

Ryan Florence@ryanflorence·7 Eki

Simple interaction: one select changes the options of a second with a remote data source How would you build it? How do you deal with race conditions?

English

119

253

241.1K

James@atomiksdev·9 Eki

@tomus_sherman @ryshaul @ryanflorence Hm ok, so you need to scroll all the way to the bottom to see caveats? I tried using useTransition after seeing your screenshot and immediately started creating bugs accidentally because I didn't realize this limitation. That seems like bad API design to me?

English

104

Tom Sherman@tomus_sherman·9 Eki

@atomiksdev @ryshaul @ryanflorence It's not a bug, it's a known limitation and explicitly called out in the docs #my-state-updates-in-transitions-are-out-of-order" target="_blank" rel="nofollow noopener">react.dev/reference/reac…

English

267

James@atomiksdev·9 Eki

@ryshaul @tomus_sherman @ryanflorence I just tested this and yes, it has a race condition. The official React demo uses a constant 2000ms timeout, but changing it to be random reveals the bug codesandbox.io/p/sandbox/lovi…

English

146

Ryan Shaul@ryshaul·7 Eki

@tomus_sherman @ryanflorence As someone still trying to figure out transitions, what is startTransition getting you here, is it just the isPending state? Seems like you need to cancel any pending getCities calls when select changes or is transition doing that too?

English

873

James@atomiksdev·7 Eki

@vladyslavmoroz Using it now and it looks great fontSize 11.5 is super small though(?!), I use 14 or 15

English

448

Vlad Moroz@vladyslavmoroz·6 Eki

Here’re my Paper Mono settings for coding: "editor.fontSize": 11.5, "editor.fontFamily": "Paper Mono", "editor.letterSpacing": 0.1, "editor.lineHeight": 20, This is what it looks like.

Diip3sh@diip3sh

@vladyslavmoroz Looks sharp 🪒 Any line-height or letter-spacing tips ?

English

519

53.3K

Keşfet

@RafaellLycan @kianbazza @bazza_ui @base_ui @colmtuite @Doctorthe113 @shadcn @floating