Setup Guide

Get Stellix UI Material running in your project in under 2 minutes.

1Install

Terminal

npm install @stellix/ui-web

This automatically installs @stellix/ui-core and @stellix/ui-tokens as dependencies.

2Configure Next.js

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  transpilePackages: [
    '@stellix/ui-web',
    '@stellix/ui-core',
    '@stellix/ui-tokens',
  ],
};

export default nextConfig;

3Add Tailwind CSS Theme

app/globals.css

@import 'tailwindcss';
@source "node_modules/@stellix/ui-web/dist/**/*.mjs";

@theme {
  --color-ink: #1a1a1a;
  --color-ink-2: #6b6b6b;
  --color-ink-3: #9a9a9a;
  --color-surface: #ffffff;
  --color-surface-field: #f5f5f5;
  --color-surface-canvas: #fafafa;
  --color-line: #e5e5e5;
  --color-line-strong: #d1d1d1;
  --color-accent: #6366f1;
  --color-green: #22c55e;
  --color-red: #ef4444;
  --color-orange: #f97316;
  --color-blue: #3b82f6;
  --color-purple: #a855f7;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-raised: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-btn: 0 1px 2px rgba(0,0,0,0.05);
  --breakpoint-sm: 640px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1440px;
}

4Use Components

app/page.tsx

import { LoadingState, Chat, CodeBlock } from '@stellix/ui-web';

export default function Page() {
  return (
    <div className="space-y-6 p-8">
      <LoadingState variant="orbit" label="Processing..." />
      <CodeBlock code="console.log('hello')" language="ts" streaming />
      <Chat
        messages={[
          { id: '1', role: 'user', content: 'Hello!', timestamp: Date.now() },
        ]}
        tabs={['Chat']}
      />
    </div>
  );
}

React Native Setup

Terminal

npm install @stellix/ui-native react-native-reanimated react-native-gesture-handler react-native-svg nativewind

App.tsx

import { LoadingState, Chat, TaskRows } from '@stellix/ui-native';

export default function Screen() {
  return <LoadingState variant="dots" label="Loading..." />;
}