Svelte

Install and configure Nyxb UI for Svelte

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@latest

Prerequisites

These are the main dependencies you will need to get started.

pnpm add svelte-inview

Edit 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 init

Configure 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 button

The 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>
  )
}