Installation
Layr is distributed via npm and can be installed using any modern JavaScript package manager.
1. Requirements
RequirementVersion
Node.js≥18.0.0
React^18.0.0 or ^19.0.0
TypeScript (optional)≥5.0.0 recommended
Layr has zero runtime dependencies. It only requires React as a peer dependency.
2. Package Managers
2a. npm

Bash

npm install @dynshift/layr
2b. pnpm

Bash

pnpm add @dynshift/layr
2c. Yarn

Bash

yarn add @dynshift/layr
2d. Bun

Bash

bun add @dynshift/layr
3. Verify Installation
After installation, verify Layr is working correctly:

Tsx

import { Container } from '@dynshift/layr';


export function App() {
  return (
    <Container width={200} height={100} color="#3b82f6">
      <span>Layr is installed!</span>
    </Container>
  );
}
If the component renders without errors, the installation was successful.
4. Module Formats
Layr supports both ESM (ECMAScript Modules) and CommonJS out of the box. Your bundler will automatically select the correct format.

Tsx

import { Container, Row, Column } from '@dynshift/layr';
4b. CommonJS

Tsx

const { Container, Row, Column } = require('@dynshift/layr');
5. TypeScript Configuration
Layr includes built-in TypeScript definitions. No additional `@types` packages are required.
5a. Automatic Type Detection
If your project uses TypeScript, types will be automatically resolved:

Tsx

import { Container, ContainerProps } from '@dynshift/layr';


// TypeScript knows all props
const MyContainer: React.FC<ContainerProps> = (props) => {
  return <Container {...props} />;
};
For optimal compatibility, ensure your tsconfig.json includes:

Json

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "strict": true
  }
}
See TypeScript Setup for advanced configuration options.
6. Tree-Shaking
Layr is fully tree-shakeable. Import only what you need, and unused components will be excluded from your production bundle.

Tsx

// ✅ Only Container and Row are bundled
import { Container, Row } from '@dynshift/layr';


// ❌ Avoid namespace imports (prevents tree-shaking)
import * as Layr from '@dynshift/layr';
7. Version Pinning
Layr follows Semantic Versioning. Current stable version: 1.0.2
7a. Install Specific Version

Bash

npm install @dynshift/layr@1.0.2
7b. Install Latest Version

Bash

npm install @dynshift/layr@latest
7c. Check Installed Version

Bash

npm list @dynshift/layr
8. Framework-Specific Setup
8a. Next.js (App Router)

Tsx

// app/page.tsx
import { Container } from '@dynshift/layr';


export default function Page() {
  return <Container width={300} height={200} color="#1a1a1a" />;
}
8b. Next.js (Pages Router)

Tsx

// pages/index.tsx
import { Container } from '@dynshift/layr';


export default function Home() {
  return <Container width={300} height={200} color="#1a1a1a" />;
}
8c. Vite

Tsx

// src/App.tsx
import { Container } from '@dynshift/layr';


function App() {
  return <Container width={300} height={200} color="#1a1a1a" />;
}
8d. Create React App

Tsx

// src/App.tsx
import { Container } from '@dynshift/layr';


function App() {
  return <Container width={300} height={200} color="#1a1a1a" />;
}
8e. Remix

Tsx

// app/routes/_index.tsx
import { Container } from '@dynshift/layr';


export default function Index() {
  return <Container width={300} height={200} color="#1a1a1a" />;
}
9. React Native
Layr is not compatible with React Native. It is designed specifically for web applications and uses standard CSS layout primitives. If you're building for React Native, use Flutter-style layout components like react-native-reanimated or stick with React Native's built-in layout system.
10. Bundle Size
Layr is designed to be lightweight: • Full library: ~12 KB (minified + gzipped) • Single component (e.g., Container): ~3 KB (minified + gzipped) • Zero runtime dependencies
You can analyze your bundle size using:

Bash

# Using webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer


# Using Vite
npm install --save-dev rollup-plugin-visualizer
While Layr can be loaded from a CDN, we strongly recommend using a package manager for production applications.

Html

<!-- UMD build (for experimentation only) -->
<script src="https://unpkg.com/@dynshift/layr@1.0.2/dist/index.umd.js"></script>
Why not use a CDN? • No tree-shaking (entire library is loaded) • No TypeScript support • Slower initial load time • Version updates require manual changes
12. Troubleshooting
12a. Module Not Found
If you see Module not found: Can't resolve '@dynshift/layr': 1. Ensure the package is installed: npm list @dynshift/layr 2. Clear your node_modules and reinstall: rm -rf node_modules && npm install 3. Restart your development server
12b. Type Errors
If TypeScript doesn't recognize Layr types: 1. Ensure TypeScript version is ≥5.0.0 2. Check that moduleResolution is set to "bundler" or "node16" in tsconfig.json 3. Restart your TypeScript server in your editor
12c. React Version Mismatch
If you see peer dependency warnings:

Bash

npm WARN @dynshift/layr@1.0.2 requires a peer of react@^18.0.0 || ^19.0.0
Install a compatible React version:

Bash

npm install react@18
13. Upgrade Guide

Bash

npm install @dynshift/layr@latest
Check the Changelog for breaking changes between versions.
14. Next Steps
• Migration from Flutter — Learn the differences from Flutter's layout system • TypeScript Setup — Configure advanced type checking