Kris Ellery

Principal SDE 👨🏻‍💻 Design Systems @Zillow • Previously @Cofense, @PublicisGroupe, and @RedVentures • 🇵🇱🇺🇸

[Kris Ellery @kris_ellery]

@colmtuite @pacovitiello I'm building something fun with Base UI components but torn between shadcn and coss ui. Is the consensus that coss ui is more polished and stable? I prefer the design too, those dialog footers are solid.

[Kris Ellery @kris_ellery]

@adamwathan @malfaitrobin Oh wow, that’s good to know! Thanks for a quick reply.

[Kris Ellery @kris_ellery]

@adamwathan @malfaitrobin do you have a timeline for non-Vite bundlers to rely on the module graph rather than crawling entire project? Specifically Next.js

I understand it’s a very complex task. Are there any critical blockers preventing you at this time? Thanks!

[Kris Ellery @kris_ellery]

@jeffrey_way A mix of all. It’s not yet ready to replace senior+ engineers. The quality is questionable. At some point, AI will face stricter limitations, either due to operating costs or memory issues. However, future engineers will be forced to use AI as a daily assistant.

[Kris Ellery @kris_ellery]

@panda__css That’s the plan at Zillow! We’re taking it one component at a time, starting with our design system. I respect styled-components and its history, but performance and business needs have led us to Panda CSS 🐼

[Kris Ellery @kris_ellery]

@devongovett Switched to oxlint from Oxc and haven’t looked back! Using it in a design system monorepo with 1,600+ files.

[Kris Ellery @kris_ellery]

@olivtassinari The shift from `asChild` to `render` prop for polymorphic components is pretty interesting. `asChild` made it easier to work with `forwardRef`, but now that React 19 treats `ref` as a regular prop, using `as` or `render` props is way simpler to type in TS.

[Kris Ellery @kris_ellery]

@_georgemoller Why not extend ComponentProps<'button'> and have access to ref, key, dangerouslySetInnerHTML, and other React-specific props?

[Kris Ellery @kris_ellery]

@panda__css
@thesegunadebayo
@_estheradebayo
My manager has bought the Panda Mastery team license, but we don't know how many seats per license there are and how to activate individual seats. Would you mind helping out? Thanks!

[Kris Ellery @kris_ellery]

@jimmy_morris Because you're a brilliant design systems engineer!

[Kris Ellery @kris_ellery]

@brijeshb42 @olivtassinari @JoshWComeau Sure, here is a sample ButtonGroup component that needs to support 3 responsive props with 2 of them being compound props. Of course it does not work, but you can get the sense of the API use case, etc. This is heavily influenced by Panda at the moment. https://t.co/7ydWTUuRNp

[Kris Ellery @kris_ellery]

@brad_frost I’ve been using Deco W7200 for the last 2 years with no issues. Easily covers 4,000 sq ft.

[Kris Ellery @kris_ellery]

@kaumac @JoshWComeau @olivtassinari Got it. I’m staying away from the styled factory. It’s the Bain of my existence at work with styled-components. Decided to go with Panda and use className exclusively. Much cleaner implementation.

[Kris Ellery @kris_ellery]

@tlakomy I've been there and done that for 19 years. I'm not going back until ***, Januszex, and the ever-present ads are gone 😅 That being said, I still have a soft spot for all the old Polish comedies🧸

[Kris Ellery @kris_ellery]

@kaumac @JoshWComeau @olivtassinari What specifically do you have to fight and what limitations? Would love to know as I’m embarking on a long journey with Panda.

[Kris Ellery @kris_ellery]

@JoshWComeau @__smiz A component with props and variants would still require some runtime code on the server and client to match prop values to variants. Either custom implementation or a built-in library utility. Unless you’re able to completely strip unused variants and mapping at build time.

[Kris Ellery @kris_ellery]

@__smiz @JoshWComeau That being said, the future of CSS-in-JS is the static CSS extraction with minimal prop value to variants mapping, and variant pre-generation. Thats the most performant solution w/out going full vanilla CSS or CSS Modules.

[Kris Ellery @kris_ellery]

@__smiz @JoshWComeau Not on a single component, but when you have to render 100, 500, 1,000 components, it adds up. styled-components affects Total Blocking Time, which negatively affects Interaction to Next Paint. Add a few slow event handlers and Core Web Vitals are gone.

[Kris Ellery @kris_ellery]

@__smiz @JoshWComeau Lastly, siloed performance benchmarks are mostly pointless. No website loads a single instance of a component and multiple component instances do not translate into linear performance deviation. Add React 18 and concurrent rendering to the mix and things will get even trickier.

[Kris Ellery @kris_ellery]

@__smiz @JoshWComeau On the other hand matching prop values to variants depends on implementation. For example, CVA (class variance authority) vs clsx vs Tailwind Variants vs built-in utilities like cva/sva in Panda CSS.