Why about Styled Component Support??

[KaViNnDev]

Is there support for styled component is available?

[Austin1serb]

Thanks for the question!

Short answer:

• Yes, you can use React Zero UI Core in a project that uses styled-components.
• No, there is not first class styled-components integration in the build pipeline yet.

---

How React Zero UI Core works

React Zero UI Core has two layers:

1. State layer (styling agnostic)

   • Hooks like useUI and the provider only manage UI state.
   • They flip data-* attributes on body or a scoped element, for example:
     • data-theme="dark"
     • data-sidebar="open"
   • This part does not care whether you use Tailwind, styled-components, CSS modules, or anything else.

2. Build time styling layer (Tailwind specific)

   • The AST resolver scans your code for useUI usage and Tailwind class tokens.
   • The scanner then generates CSS only from Tailwind utilities and variants.
   • It does not parse styled-components template literals or generate styles from them.

So:

• The state system works fine with styled-components.
• The auto CSS generation is currently Tailwind only.

---

Using Zero UI with styled-components

You can target the data-* attributes that Zero UI sets, inside your styled components, for example:

import styled from "styled-components"
import { useUI } from "@react-zero-ui/core"

const Box = styled.div`
  body[data-theme='dark'] & {
    background: #111;
    color: #fff;
  }

  body[data-theme='light'] & {
    background: #fff;
    color: #000;
  }`


export function Example() {
  const [, setTheme] = useUI("theme", "dark")

  return (
    <>
      <Box>Styled Components + Zero UI</Box>
      <button onClick={() => setTheme("dark")}>Dark</button>
      <button onClick={() => setTheme("light")}>Light</button>
    </>
  )
}

In this setup:

• Zero UI flips data-theme on body.
• styled-components emits the CSS and reacts to those attributes.
• The Tailwind scanner is not involved at all. ( but will still run in development)

Current status of “styled components support”

To be explicit:
✅ Works in apps that use styled-components.
✅ You can consume Zero UI state in styled-components via data-* selectors.
❌ No AST parsing or DX helpers for styled-components today.
❌ The Tailwind scanning and token extraction do not see styled-components definitions.

If you have a concrete API or DX in mind for deeper styled-components support (for example, a small helper or pattern that would make this feel first class), I am open to ideas or a proposal.