Arek UI: tailwindCSS + Ark UI

Copy paste components to your project.

Supported frameworks:

React https://arek-ui.fly.dev/

SolidJs https://arek-ui-solid.fly.dev/

Inspired by:

https://ui.shadcn.com/

https://park-ui.com/

https://chakra-ui.com/

Setup:

• React:
• setup tailwind css - https://tailwindcss.com/docs/installation
• copy over the tailwind config
• copy over the utils folder, it contains three key files:
  • cn - merges tailwind class names
  • styled - wraps a component in a tailwind variants recipe and adds a new unstyled prop
  • create-styled-context - wraps root component and its slots in a tailwind variants recipe, adds classes and unstyled props to the root, and unstyled prop to the child slots
• use the base css for tailwind
• install -D tailwind-animate @savvywombat/tailwindcss-grid-areas
• install @ark-ui/solid clsx tailwind-variants tailwind-merge
• the default icons used are lucide-solid, you need to install those for some components
• some components require individual dependencies, you need to install those to use them