Install Selia with Vite

Setting up Selia in Vite project.

Create Project

Run the following command to create a new Vite project and choose React + TypeScript template:

Tailwind CSS

Install Tailwind CSS:

Delete all content in src/index.css and add the following:

src/index.css

@import 'tailwindcss';

Edit tsconfig.json

Add the baseUrl compiler option to your tsconfig.json file:

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Edit tsconfig.app.json

Add the baseUrl compiler option to your tsconfig.app.json file:

tsconfig.app.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  // ...
}

Edit vite.config.ts

Add the following configuration to resolve alias in vite.config.ts and add Tailwind CSS plugin:

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite';
import path from 'path';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

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:

src/App.tsx

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

function App() {
	return <Button>Cool Button</Button>;
}

export default App;

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:

app.css

@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;
}

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.