Panda CSS: build time and type-safe CSS-in-JS

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • chakra-ui

    ⚡️Simple, Modular & Accessible UI Components for your React Applications (by segunadebayo)

  • @jxom went on to create bumbag and in that repo recommends Chakra as an alternative for these unmaintained libraries.

    See top of readme: https://github.com/jxom/bumbag-ui

    So not sure what controversy you're trying to stir. Fannypack didn't have dark mode, Accordions, Alerts, Breadcrumbs, responsive containers, and a whole slew of components that Chakra had.

    In fact if you look at the Avatar component from Chakra 5 yrs ago vs the Fannypack Avatar you'll see the code is completely different.

    https://github.com/segunadebayo/chakra-ui/blob/master/src/Av...

    https://github.com/jxom/fannypack/blob/c7046c5f58cc68ee756be...

    The most likely story is he was just using Fannypack's docs as a reference for how to format his own.

  • fannypack

    Discontinued [UNMAINTAINED] An accessible-focused, themeable, friendly React UI Kit.

  • @jxom went on to create bumbag and in that repo recommends Chakra as an alternative for these unmaintained libraries.

    See top of readme: https://github.com/jxom/bumbag-ui

    So not sure what controversy you're trying to stir. Fannypack didn't have dark mode, Accordions, Alerts, Breadcrumbs, responsive containers, and a whole slew of components that Chakra had.

    In fact if you look at the Avatar component from Chakra 5 yrs ago vs the Fannypack Avatar you'll see the code is completely different.

    https://github.com/segunadebayo/chakra-ui/blob/master/src/Av...

    https://github.com/jxom/fannypack/blob/c7046c5f58cc68ee756be...

    The most likely story is he was just using Fannypack's docs as a reference for how to format his own.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • panda

    🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️

  • npmgraph

    A tool for exploring NPM modules and dependencies

  • This looks a lot better than I expected.

    One thing that bugs me about this (and Tailwind) is the number of dependencies they pull in. Panda has 152 nodes (239, if you count their dev-dependencies)[0].

    Tailwind has 98 (594 if you count their dev-dependencies).

    I know they're only dev-dependencies, but still... I've got all of that code running on my machine, just to process CSS. I really don't love it.

    [0] https://npmgraph.js.org/?q=%40pandacss%2Fdev

  • jsxstyle

    Inline style system for JSX

  • Works in both React and Preact. It's designed to support generating styles at build time, but I've never bothered. For the sorts of things I work on, being able to quickly bang out a component is more important than golfing the bundle size or maintaining a design system.

    jsxstyle feels like I can sculpt in code. It's really satisfying to hammer out some props and see a component come to life, especially when you've got hot module replacement working.

    Based on a quick perusal of linked page, Panda seems like perhaps a more mature version of jsxstyle, but also more fidgety. As an army of one, I'm happy to optimize for iteration speed, but if I needed to maintain a system, maybe I'd consider switching to Panda.

    https://www.npmjs.com/package/jsxstyle

  • bumbag-ui

    Discontinued Build themeable React & React Native applications with your Bumbag 👝

  • @jxom went on to create bumbag and in that repo recommends Chakra as an alternative for these unmaintained libraries.

    See top of readme: https://github.com/jxom/bumbag-ui

    So not sure what controversy you're trying to stir. Fannypack didn't have dark mode, Accordions, Alerts, Breadcrumbs, responsive containers, and a whole slew of components that Chakra had.

    In fact if you look at the Avatar component from Chakra 5 yrs ago vs the Fannypack Avatar you'll see the code is completely different.

    https://github.com/segunadebayo/chakra-ui/blob/master/src/Av...

    https://github.com/jxom/fannypack/blob/c7046c5f58cc68ee756be...

    The most likely story is he was just using Fannypack's docs as a reference for how to format his own.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts