@apvee/react-layout-kit

A type-safe, responsive React layout library built with TypeScript and Emotion CSS. Simplifies layout creation with component-based styling and container-aware responsive design.

Quick Overview

@apvee/react-layout-kit is an opinionated, type-safe React layout library that enables you to build responsive layouts without leaving the React component context. Built on TypeScript and Emotion CSS, it provides a comprehensive set of layout components with full CSS-in-JS capabilities, responsive prop support, and powerful composition patterns.

Why @apvee/react-layout-kit?

• Type Safety - Full TypeScript support with IntelliSense for all CSS properties
• Container-Aware - JavaScript-driven responsive system that works with any container, not just viewport
• ** Performance** - Emotion CSS runtime optimization, debounced ResizeObserver, memoized calculations
• Zero Config - No CSS setup required; styles are generated from props
• Customizable - Breakpoints and spacing scales with module augmentation
• Developer-Friendly - Intuitive API with both full CSS and convenient shorthand
• Composition - asChild prop for seamless component composition

---

Installation

npm install @apvee/react-layout-kit

yarn add @apvee/react-layout-kit

Requires React 17.0.0+

---

Quick Start

import{Box,Flex,Stack}from"@apvee/react-layout-kit";functionApp(){return(<Boxp={{xs: "md",lg: "xl"}}><Stackgap="lg"><Box$fontSize={32}$fontWeight="bold">
Welcome to React Layout Kit
</Box><Flexdirection={{xs: "column",md: "row"}}gap="md"align="center"><Box$flex={1}>Responsive content</Box><Box$flex={1}>Container-aware layout</Box></Flex></Stack></Box>);}

---

Full Documentation

For complete documentation, guides, API reference, and examples, see:

Full Documentation

The complete documentation includes:

• Core Concepts - Responsive values, container-aware design, dollar/short props, spacing system
• Layout Components - Box, Flex, Grid, Stack, SimpleGrid, AreaGrid, Container, Center, AspectRatio, Group, Space, ScrollArea
• Composition Primitives - Slot, Slottable, useSlot
• Hooks - useElementWidth, useContainerWidth, useMergedRef
• Utilities - createStyles, mergeClasses, resolveSpacing, resolveResponsiveValue
• Configuration - Breakpoints, spacing scales, TypeScript module augmentation
• Advanced Patterns - Custom responsive components, complex layouts, polymorphic rendering
• TypeScript Support - Full type safety with custom type definitions
• Migration Guides - From CSS Modules, Styled Components, and other libraries
• Troubleshooting - Common issues and solutions

---

Resources

• Storybook Demo - Interactive component examples
• GitHub Repository - Source code and issues
• npm Package - Package information

---

Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Setup

# Clone the repository
git clone https://github.com/apvee/react-layout-kit.git
cd react-layout-kit
# Install dependencies
npm install
# Run development mode with watch
npm run dev
# Run Storybook for component development
npm run storybook
# Build the library
npm run build
# Type check
npm run check

---

License

MIT License

---

Made with ❤️ by Apvee Solutions