Information
This project and all components are written in TypeScript. We recommend using TypeScript for your project as well.
Create project
npx @svelte-add/tailwindcss@latestPrerequisites
These are the main dependencies you will need to get started.
pnpm add svelte-inviewEdit tsconfig.json file
Add the following code to the tsconfig.json file to resolve paths:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"~/*": [
"./src/*"
]
}
// ...
}
}Run the CLI
Run the nyxbui init command to setup your project:
npx nyxbui@latest initConfigure nyxbui.json
You will be asked a few questions to configure nyxbui.json:
Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › ~/components
Configure the import alias for utils: › ~/lib/utils
Are you using React Server Components? › no / yes (no)That's it
You can now start adding components to your project.
npx nyxbui@latest add buttonThe command above will add the Button component to your project. You can then import it like this:
import { Button } from "~/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}