open-index/open-npm huggingface dataset:
npm package: @kalininilya/registry
Description: Spektr UI Component Registry
Author: kalininilya
Latest version: 0.1.0

# @spektr/registry

Component registry for Spektr UI. This package contains metadata for all components in the Spektr UI library, compatible with the shadcn/ui CLI.

## Usage

### As a hosted registry

Host the `/registry` folder as a static site or API endpoint. Users can then install components using:

```bash
npx shadcn-ui@latest add button --registry https://your-domain.com/registry
```

### As a package

Install the registry package to access component metadata programmatically:

```bash
npm install @spektr/registry
```

```typescript
import { registry, getRegistryItem } from "@spektr/registry";

const buttonComponent = getRegistryItem("button");
console.log(buttonComponent);
```

## Registry Structure

Each component in the registry includes:

- `name`: Component identifier
- `type`: Component type (registry:ui, registry:lib, registry:hook)
- `description`: Component description
- `dependencies`: Required npm packages
- `registryDependencies`: Other components from the registry
- `files`: Component source files
- `tailwind`: Tailwind configuration (optional)
- `cssVars`: CSS variables for theming (optional)

## Building

```bash
pnpm build
```

This will:
1. Compile TypeScript files
2. Generate JSON registry files in `/registry`

## License

Apache-2.0
npm package: @kalininilya/spektr-ui
Description: Spektr UI Component Library
Latest version: 0.1.19

# 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

```bash
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+:

```bash
npm install react react-dom
```

## Quick Start

### 1. Import Styles

Import the CSS file in your application entry point:

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

### 2. Wrap Your App with ThemeProvider

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

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

### 3. Use Components

```tsx
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.

```tsx
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:

```tsx
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:

```bash
pnpm storybook
```

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

## Development

```bash
# 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](https://github.com/novasamatech/spektr-ui)