git404hub

what is shadcn-cssinjs fr?

shadcn-labs/shadcn-cssinjs — explained in plain English

Analysis updated 2026-05-18

39TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

tl;dr

A community port of the shadcn/ui React component library that uses StyleX styling instead of Tailwind CSS.

vibe map

mindmap
  root((shadcn-cssinjs))
    What it does
      Copy paste components
      StyleX styling
      Accessible UI
    Tech stack
      TypeScript
      React
      StyleX
    Use cases
      Prebuilt components
      Custom component library
      Swap styling approach
    Audience
      Developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Copy accessible, prebuilt React components into your own project.

VIBE 2

Build a custom component library styled with StyleX instead of Tailwind.

VIBE 3

Swap shadcn/ui's Tailwind styling for a CSS-in-JS approach.

VIBE 4

Use Base UI's unstyled primitives as a foundation for custom components.

what's the stack?

TypeScriptReactStyleXBase UI

how it stacks up fr

shadcn-labs/shadcn-cssinjschaos-xxl/zelda-hyrule-uicoasty-ai/open-cowork
Stars393939
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity2/52/53/5
Audiencedeveloperdevelopervibe coder

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 30min

Components are copied directly into your project rather than installed as a package dependency.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

in plain english

shadcn-cssinjs is a collection of ready-made user interface components for building websites and web apps with React. It is an unofficial community project that recreates the popular shadcn/ui component library, but instead of using Tailwind CSS for styling, it uses a different styling approach called StyleX, which writes styles directly in JavaScript or TypeScript code rather than in separate CSS files. The idea behind the original shadcn/ui, and this port as well, is that you do not install it as a typical package dependency. Instead, you copy and paste the actual component code straight into your own project, which means you fully own that code and can change it however you like. The components are built to be accessible, meaning they work well with screen readers and keyboard navigation, and customizable in appearance. Under the hood, the components are built on top of a separate library of unstyled, functional building blocks from Base UI, with StyleX handling how everything looks. This separation between behavior and appearance is a common pattern in modern component libraries, letting the underlying logic stay stable while the visual styling approach can differ. The README for this project is quite short and mainly points elsewhere for details. It links out to a documentation website for full guidance on using the components, and to separate guides for people who want to help develop the project or contribute code changes. The maintainers describe it as free and open source, intended as a starting point for anyone who wants to build their own custom component library rather than being a polished, finished product to install as is. It is released under the MIT License, which means anyone can use, copy, modify, and share it, including for commercial projects, as long as the original copyright notice is kept somewhere in the code.

prompts (copy fr)

prompt 1
Explain how shadcn-cssinjs differs from the original shadcn/ui.
prompt 2
Help me copy a component from shadcn-cssinjs into my React project.
prompt 3
Show me how StyleX styling works compared to Tailwind CSS.
prompt 4
Walk me through building a custom component library on top of Base UI.

Frequently asked questions

what is shadcn-cssinjs fr?

A community port of the shadcn/ui React component library that uses StyleX styling instead of Tailwind CSS.

What language is shadcn-cssinjs written in?

Mainly TypeScript. The stack also includes TypeScript, React, StyleX.

What license does shadcn-cssinjs use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is shadcn-cssinjs to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is shadcn-cssinjs for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.