chimera-ui - GitLite

KO | EN

gitlite — search

#javascript #react #llm #go #deep-learning #macos #java #windows #cli #kubernetes #vue #security #mcp #open-source

chimera-ui

(★ 132)

A beautiful, accessible, and fully customizable Tailwind UI library for React. Maybe the easiest themeing experience ever? Free and open source.

File Explorer

Download Latest Version (.zip)

- config.json
- README.md
- - .eslintrc.js
  - .gitignore
  - .prettierignore
  - cypress.config.ts
  - next.config.js
  - package.json
  - postcss.config.js
  - README.md
  - tailwind.config.js
  - theme.config.jsx
  - tsconfig.json
- - .eslintrc.js
  - CHANGELOG.md
  - docgen.js
  - package.json
  - postcss.config.js
  - README.md
  - styles.css
  - tailwind.config.js
  - test.json
  - tsconfig.json
  - tsdocSync.js
  - tsup.config.ts
- - index.js
  - package.json
- - package.json
  - postcss.config.js
  - tailwind.config.js
- - base.json
  - nextjs.json
  - node16.json
  - package.json
  - react-library.json
- - index.js
  - package.json
.eslintrc.js
.gitignore
.npmrc
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
turbo.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center" display="flex">
     <svg
          version="1.0"
          xmlns="http://www.w3.org/2000/svg"
          width="64px"
          height="64px"
          viewBox="0 0 465.891509 467.403733"
        >
          <g
            transform="translate(-17.058420,478.592578) scale(0.100000,-0.100000)"
            fill="currentColor"
            stroke="none"
          >
            <path
              d="M2275 4784 c-187 -20 -349 -50 -458 -86 -670 -221 -1151 -641 -1426
-1246 -61 -136 -161 -422 -161 -464 0 -13 -7 -36 -15 -52 -41 -78 -59 -542
-30 -781 65 -550 290 -994 706 -1400 209 -204 282 -256 509 -370 400 -201 755
-285 1150 -272 246 8 397 35 655 119 142 46 417 176 560 265 213 133 424 336
561 543 48 71 51 81 67 190 10 63 17 138 17 166 0 28 3 72 6 98 6 43 11 50 68
90 149 106 261 268 317 456 30 102 38 317 16 387 -9 26 -21 69 -27 94 -31 122
-162 290 -280 356 -114 65 -189 82 -458 103 -136 11 -277 20 -313 20 -49 0
-72 5 -90 19 -13 10 -43 28 -65 39 -51 26 -104 86 -140 160 -25 50 -28 69 -29
152 0 113 18 159 97 245 54 60 147 105 267 131 79 16 240 18 310 3 28 -6 61
-9 73 -7 l23 4 -25 11 c-110 50 -235 98 -285 110 -91 20 -311 28 -376 13 -86
-20 -175 -67 -229 -121 -58 -58 -110 -143 -110 -179 0 -14 -6 -34 -14 -45 -42
-63 -46 -313 -6 -455 56 -198 180 -328 370 -387 33 -11 128 -16 360 -20 343
-5 400 -12 498 -62 57 -29 128 -95 173 -161 21 -31 24 -46 24 -130 0 -81 -4
-102 -25 -145 -36 -72 -95 -109 -200 -125 l-82 -13 -131 130 c-73 72 -148 140
-168 151 -19 12 -149 58 -289 102 -199 63 -280 94 -375 144 -223 116 -270 151
-432 328 -149 162 -217 218 -308 256 -99 42 -132 46 -353 43 -177 -1 -216 1
-235 14 -12 8 -29 15 -39 15 -25 0 -23 40 2 73 40 51 184 76 236 42 33 -21 41
-13 17 19 -68 92 -279 75 -372 -30 -44 -50 -66 -108 -75 -197 -6 -58 -7 -59
-96 -144 -50 -47 -104 -103 -121 -124 l-30 -38 55 -83 54 -83 7 -170 c6 -156
8 -172 28 -194 30 -32 59 -42 147 -51 67 -7 79 -5 112 14 32 18 41 31 59 86
42 125 137 310 159 310 4 0 16 -19 25 -42 14 -33 17 -74 18 -178 l0 -135 -42
-96 c-22 -53 -41 -101 -41 -107 0 -14 -80 -120 -196 -258 l-93 -111 -6 -69
c-8 -87 -31 -216 -56 -319 -24 -98 -78 -255 -94 -275 -7 -8 -16 -26 -20 -40
-15 -47 -48 -80 -104 -101 -58 -21 -201 -38 -201 -24 0 5 32 92 71 194 44 111
72 199 72 222 0 34 -8 45 -75 111 -232 229 -386 507 -447 808 -11 52 -22 118
-25 145 l-6 50 48 -51 c26 -28 59 -74 72 -102 14 -28 27 -48 31 -44 3 4 14 84
23 177 20 197 56 324 139 490 168 337 372 534 742 715 163 80 293 127 460 165
128 29 170 44 158 56 -5 4 -136 9 -293 11 -280 3 -286 3 -327 27 -75 43 -77
96 -6 163 33 32 195 102 348 151 482 154 1038 141 1490 -35 171 -67 338 -138
345 -147 7 -9 199 -141 205 -141 19 0 -119 171 -210 258 -296 287 -643 487
-1035 596 -30 8 -118 27 -195 41 -118 23 -173 27 -355 30 -118 2 -233 1 -255
-1z m1060 -2722 c-6 -5 -40 -29 -76 -55 -128 -89 -257 -253 -266 -340 -11 -99
44 -196 151 -264 88 -57 180 -149 206 -205 27 -60 26 -142 -3 -196 -68 -127
-243 -247 -517 -355 -224 -88 -344 -113 -463 -96 -182 25 -267 126 -312 374
-4 18 -11 20 -75 17 l-70 -4 -15 36 -15 36 79 157 c43 87 103 204 133 259 36
67 66 142 89 220 l33 119 119 100 c65 55 129 108 142 119 l23 18 54 -53 c61
-61 157 -115 267 -150 l74 -24 15 25 c30 48 148 156 207 190 33 19 87 44 120
57 60 22 118 31 100 15z m313 -590 c0 -110 24 -161 105 -215 l57 -38 0 -62 c0
-41 -7 -75 -21 -103 -19 -41 -156 -181 -166 -170 -3 2 1 29 7 59 8 34 11 94 8
154 -4 84 -10 111 -42 188 -31 74 -37 98 -33 140 5 60 31 150 49 172 11 14 14
12 25 -13 6 -16 11 -66 11 -112z"
            />
          </g>
        </svg>
        <h1 align="center">Chimera UI</h1>
</div>

<h3 align="center">Beautiful, accessible, and fully customizable with Tailwind.</h3>

## Features

- Fully accessible components, with Radix Primitives under the hood.
- Includes additional components beyond Radix, such as Button and Input.
- Components come pre-styled. Styles can be easily overwritten with Tailwind (Chimera uses tw-merge under the hood).
- Semantic color system built in. No more guessing what color to use, just use the same semantic color names across all your projects.
- Theme generator that quickly generates CSS themes for you.
- Tailwind plugin to keep tailwind.config.js nice and clean.
- Tree-shakeable. Use named imports without worrying about bundle-size!

## Installation

See official docs for more information

1. `npm install @chimera-ui/components @chimera-ui/tw-plugin`
2. Modify your `tailwind.config.js` to include:

- `"./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}",` in the `content` array
   - `require("@chimera-ui/tw-plugin")` in the `plugins` array
   - ```js
     module.exports = {
       content: [
         "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
         "./components/**/*.{js,ts,jsx,tsx}",
         "./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}", // This line is important! If you don't include this, Chimera's styles will be purged
         ,
       ],
       plugins: [
         require("@chimera-ui/tw-plugin"), // This is important! This extends your tailwind theme to consume the CSS variables.
       ],
     };
     ```

3. Use the <Link href="/docs/theme" className="text-primary underline">theme generator</Link> to generate CSS themes. Add the CSS variables to your global css file.

## Repository

`npm run build` will trigger `prebuild`. In `prebuild`, @chimera-ui/components will run tsdocSync.js, which syncs the classNames from each component to a tsdoc comment above it.