๐Ÿš€ Setup Neeto-UI

๐Ÿ”— Useful Links

๐Ÿงฉ 0. Remove node_modules

rm -rf node_modules

๐Ÿงฉ 1. Install Dependencies

Navigate to the root of your project and run:

yarn add \\\\
@bigbinary/neeto-cist@^1.0.6 \\\\
@bigbinary/neeto-icons@^1.17.6 \\\\
@bigbinary/neetoui@^5.2.41 \\\\
@emotion/is-prop-valid@^1.2.0 \\\\
@floating-ui/react@^0.26.6 \\\\
@hotwired/turbo-rails@^8.0.13 \\\\
@rails/actioncable@^8.0.200 \\\\
antd@^4.24.3 \\\\
[email protected] \\\\
date-fns@^4.1.0 \\\\
file-saver@^2.0.5 \\\\
formik@^2.4.6 \\\\
framer-motion@^12.11.3 \\\\
qs@^6.14.0 \\\\
ramda@^0.30.1 \\\\
react-query@3 \\\\
[email protected] \\\\
react-toastify@^9.0.1 \\\\
remixicon@^4.6.0 \\\\
util@^0.12.5 \\\\
vite-plugin-svgr@^4.3.0 \\\\
zustand@^5.0.3

๐ŸŽจ 2. Add Imports to CSS Entry Point

Replace the contents of your main CSS entry point (e.g. src/index.css or application.scss) with:

@use "@bigbinary/neetoui"; - It should be imported at top of the file

@use "@bigbinary/neetoui";

...

@import "react-toastify/dist/ReactToastify.min.css";

We can use @import as well.

๐Ÿงช 3. Verify Setup

You can now use neetoUI components by importing them. Example:

import React from "react";
import { Button } from "neetoui";

const App = () => <Button label="Click me" style="secondary" />;

export default App;

โœ… 4. Commit Your Changes

Once setup is done, commit your work:

gapa
gcmsg "Setup neetoUI"