Arek UI: tailwindCSS - v4 + Ark UI - v4

Copy paste components to your project.

Supported frameworks:

React https://arek-ui.arexoft.com/

SolidJs https://arek-ui-solid.arexoft.com/

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 @ark-ui/react clsx tailwind-variants tailwind-merge
• the default icons used are lucide-react, you need to install those for some components
• some components require individual dependencies like @radix-ui/react-aspect-ratio, match-sorter or react-day-picker, you need to install those to use them