trUI

A modern, accessible React component library built with Tailwind CSS v4. Spektr UI provides a comprehensive set of components with built-in theming support, TypeScript types, and full accessibility features.

Installation

npm install @novasamatech/spektr-ui

Note: Spektr UI requires react, react-dom, and react-compiler-runtime as peer dependencies. These are auto-installed by npm 7+.

Quick Start

1. Import Styles

Import the CSS file in your application entry point:

import '@novasamatech/spektr-ui/styles.css';

2. Wrap Your App with ThemeProvider

import { ThemeProvider, defaultTheme } from '@novasamatech/spektr-ui';

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

3. Use Components

import { Button, Card } from '@novasamatech/spektr-ui';

function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Hello Spektr UI</Card.Title>
      </Card.Header>
      <Card.Content>
        <Button>Click me</Button>
      </Card.Content>
    </Card>
  );
}

Using Tailwind Preset

If you want to use Spektr UI's design tokens in your own Tailwind classes, use the preset:

// tailwind.config.ts
import type { Config } from 'tailwindcss';
import spektrPreset from '@novasamatech/spektr-ui/tailwind.preset';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  presets: [spektrPreset],
} satisfies Config;

Then import styles in your CSS:

@import "tailwindcss";
@config "./tailwind.config.ts";

And in your entry point:

import '@novasamatech/spektr-ui/styles.css'; // Theme CSS variables
import './index.css'; // Your Tailwind build

Now you can use Spektr UI tokens in your own classes:

<div className="bg-primary text-primary-foreground">
  Uses spektr-ui colors
</div>

Theming

Spektr UI provides built-in themes:

import { ThemeProvider, defaultTheme, amberTheme, techTheme } from '@novasamatech/spektr-ui';

// Default theme
<ThemeProvider theme={defaultTheme}>

// Amber accent theme
<ThemeProvider theme={amberTheme}>

// Dark tech theme
<ThemeProvider theme={techTheme}>

Theme Hook

Use the useTheme hook to access and control theme state:

import { useTheme } from '@novasamatech/spektr-ui';

function ThemeControls() {
  const { mode, setMode, theme, setTheme } = useTheme();

  return (
    <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
      Toggle Mode
    </button>
  );
}

Storybook

View all components and their variations in Storybook:

npm run storybook

Visit http://localhost:6006 to explore the component library.

Development

# Install dependencies
npm install

# Run development build
npm run dev

# Build for production
npm run build

# Run Storybook
npm run storybook

License

Apache-2.0

Repository

https://github.com/novasamatech/spektr-ui