Spektr UI

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 @kalininilya/spektr-ui
# or
pnpm add @kalininilya/spektr-ui
# or
yarn add @kalininilya/spektr-ui

Peer Dependencies

Spektr UI requires React 16.8+ and React DOM 16.8+:

npm install react react-dom

Quick Start

1. Import Styles

Import the CSS file in your application entry point:

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

2. Wrap Your App with ThemeProvider

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

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

3. Use Components

import { Button, Card, CardHeader, CardTitle, CardContent } from '@kalininilya/spektr-ui';

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello Spektr UI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

Theming

Spektr UI uses Tailwind CSS v4's @theme system, which maps CSS custom properties directly to utility classes. This allows you to customize the appearance of all components dynamically.

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

<ThemeProvider theme={defaultTheme} defaultMode="light">
  {/* Your app */}
</ThemeProvider>

Available themes: defaultTheme, amberTheme, techTheme

Theme Hook

Use the useTheme hook to access and control theme state:

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

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

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

Storybook

View all components and their variations in Storybook:

pnpm storybook

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

Development

# Install dependencies
pnpm install

# Run development build
pnpm dev

# Build for production
pnpm build

# Run type checking
pnpm type-check

# Run linter
pnpm lint

# Fix linting issues
pnpm lint:fix

# Format code
pnpm fmt:fix

# Run Storybook
pnpm storybook

# Build Storybook
pnpm build-storybook

License

Apache-2.0

Repository

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