Install Selia with TanStack Router

Setting up Selia in TanStack Router project.

Create Project

Create a TanStack Router project with Tailwind CSS:

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 { createFileRoute } from '@tanstack/react-router';
import { Button } from '@/components/selia/button';

export const Route = createFileRoute('/')({ component: App });

function App() {
	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.