@spexop/react v0.3.1: Building with Primitives-First Philosophy

---
title: "@spexop/react v0.3.1: Building with Primitives-First Philosophy"
published: true
tags: react, typescript, webdev, opensource
---

# @spexop/react v0.3.1: Building with Primitives-First Philosophy

I'm excited to share the latest release of @spexop/react - a React component library that emphasizes mastering fundamentals before building complexity.

## The Primitives-First Approach

Instead of jumping straight to complex components, Spexop encourages starting with 5 grid primitives:
- Grid
- GridItem
- Stack
- Container
- Spacer

Master these, then compose them into sophisticated interfaces. This leads to more maintainable code and better design consistency.

## What's New in v0.3.1

### 13 New Components

**Data Components**

tsx
import { DataTable } from '@spexop/react';

columns={columns}
data={data}
sortable
filterable
pagination
/>

- **Feedback Components**

tsx
import { Alert, Spinner, Progress } from '@spexop/react';

Operation successful!

- **Typography Components**

tsx
import { Heading, Text, Link } from '@spexop/react';

Page Title
Body text
Documentation

### 33+ React Hooks

20+ new hooks for common patterns:

tsx
// Storage
const [value, setValue] = useLocalStorage('key', defaultValue);

// Browser APIs
const isOnline = useOnline();
const size = useWindowSize();

// Interaction
const ref = useClickOutside(() => setIsOpen(false));

// Utilities
const debouncedValue = useDebounce(value, 500);
const [copied, copy] = useCopyToClipboard();

### 100% Documentation

Every component (all 59!) now includes:

- Comprehensive README
- USAGE-GUIDE with practical examples
- Component tests
- TypeScript definitions

## The Design Philosophy

Spexop follows 7 core principles:

1. **Primitives before patterns** - Master the grid first
2. **Borders before shadows** - Clean 2px borders, not heavy shadows
3. **Typography before decoration** - Use font weight for hierarchy
4. **Tokens before magic numbers** - Design system consistency
5. **Composition before complexity** - Build from simple parts
6. **Standards before frameworks** - Web fundamentals
7. **Accessibility before aesthetics** - WCAG AA+ compliance

## Enhanced Components

### Carousel

Full-featured slideshow with:

- Touch/swipe support
- Keyboard navigation
- Thumbnails
- Auto-play
- Lazy loading

### CodeBlock v3

Redesigned with:

- Custom syntax highlighting
- Multi-framework support (React, Vue, Angular)
- Theme integration
- Performance optimizations

## Installation

bash
npm install @spexop/react@0.3.1 @spexop/theme @spexop/icons

## Breaking Changes in v0.3.1

Animation imports changed:

tsx
// ❌ Old
import { FadeIn } from '@spexop/react/animations';

// ✅ New
import { FadeIn } from '@spexop/react';

See [Migration Guide](https://github.com/spexop-ui/spexop-design-system/blob/main/packages/react/MIGRATION-GUIDE.md) for details.

## Development Status

This is an active development release. While components follow design principles and include comprehensive documentation, the library is still evolving.

## Links in v0.3.1

- npm: <https://www.npmjs.com/package/@spexop/react>
- GitHub: <https://github.com/spexop-ui/spexop-design-system>
- Documentation: <https://spexop.com>

Feedback and contributions welcome! 🙌

bash