Create project
Start by creating a new Remix project using create-remix
:
Run the CLI
Run the nyxbui
init command to setup your project:
You will be asked a few questions to configure nyxbui.json
:
App structure
Note: This app structure is only a suggestion. You can place the files wherever you want.
- Place the UI components in the
app/components/ui
folder.
- Your own components can be placed in the
app/components
folder.
- The
app/lib
folder contains all the utility functions. We have a utils.ts
where we define the ny
helper.
- The
app/tailwind.css
file contains the global CSS.
Install Tailwind CSS
Then we create a postcss.config.js
file:
And finally we add the following to our remix.config.js
file:
Add tailwind.css
to your app
In your app/root.tsx
file, import the tailwind.css
file:
That's it
You can now start adding components to your project.
The command above will add the Button
component to your project. You can then import it like this: