Install Selia with Next.js

Setting up Selia in Next.js project.

Create Project

Create a Next.js project with recommended settings:

Selia Initialization

Run the following command to init Selia:

Components

Use the Selia CLI to add components to your project:

Import the component in your app:

import { Button } from "@/components/selia/button";

export default function Page() {
	return <Button>Cool Button</Button>;
}

Font Family (Recommended)

You can use any font you like, but Selia was designed with Inter and JetBrains Mono.

Add the following to your CSS file:

@theme inline {
  --font-sans:
    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}

Icons (optional)

You don’t need to install a separate icon library. We embed icons as SVGs directly inside the components that need them. This way, you’re free to use any icon library you like, without worrying about breaking other components.