https://github.com/jxom/awesome-react-headless-components

https://reach.tech/alert/ https://www.radix-ui.com/docs/primitives/components/radio-group https://headlessui.com/

@cscart/ui

This is a easy-to-use and style UI library for @cscart prodcuts.

Purposes

Easy to re-style

Just re-define css-variables at the level of your app or add your styles for BEM classes.

Easy to use at runtime

You can use it like any other npm package: yarn add @cscart/ui @cscart/theme

...

import Button from '@cscart/ui/Button'
import '@cscart/theme'

or with native browser ESM:

index.html:

...
 <script type="importmap">
    {
      "imports": {
        "@cscart/ui/Button": "/@cscart/ui/Button.mjs"
      }
    }
</script>

<script type="module">
  import Button from '@cscart/ui/Button'
</script>

Start development

yarn workspace @cscart/ui storybook

BEM

All elements sould be BEM-compatable. Keep to this convention:

1. Prefix cse
2. Block cse-block, cse-button
3. Element cse-block__element, cse-button__text
4. Modifier cse-block--modifier, cse-button--danger, cse-button__text--disabled