Layr is built with TypeScript and provides first-class type support out of the box. All components ship with comprehensive type definitions, enabling full IntelliSense and compile-time type checking in your IDE.

1. Automatic Type Detection

TypeScript types are automatically included when you install Layr. No additional @types packages are required.

Bash

npm install @dynshift/layr

Types are resolved automatically through the package's exports field:

Json

{
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      },
      "require": {
        "types": "./dist/index.d.cts",
        "default": "./dist/index.cjs"
      }
    }
  }
}

2. Recommended Configuration

For optimal compatibility with Layr, configure your tsconfig.json with the following settings:

Json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true
  }
}

2a. Critical Settings

Option	Value	Why It Matters
moduleResolution	Bundler	Required for modern package exports resolution
jsx	react-jsx	Enables React 17+ JSX transform
strict	true	Enforces type safety across all Layr components
esModuleInterop	true	Ensures compatibility with CommonJS and ESM

3. Framework-Specific Setup

3a. Next.js

Next.js 13+ automatically configures TypeScript correctly. Ensure your tsconfig.json includes:

Json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "preserve",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true
  }
}

Layr works seamlessly with both App Router and Pages Router.

3b. Vite

Vite projects work out of the box. Recommended tsconfig.json:

Json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

3c. Create React App

CRA includes TypeScript support by default. No additional configuration needed for Layr.

4. Available Types

Layr exports all component types and enums for use in your application.

4a. Component Props

Tsx

import type { 
  ContainerProps, 
  RowProps, 
  ColumnProps,
  StackProps,
  PositionedProps,
  SizedBoxProps,
  PaddingProps,
  CentreProps
} from '@dynshift/layr';

4b. Enums

Tsx

import {
  MainAxisAlignment,
  CrossAxisAlignment,
  MainAxisSize,
  BoxShape,
  StackFit,
  Clip,
  VerticalDirection,
  TextDirection
} from '@dynshift/layr';

4c. Type Definitions

Tsx

import type {
  EdgeInsets,
  BoxDecoration,
  BoxBorder,
  BoxShadow,
  DecorationImage,
  Gradient,
  BoxConstraints,
  Alignment,
  StackAlignment
} from '@dynshift/layr';

5. Type Examples

5a. Typed Component Props

Tsx

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

const Card: React.FC<ContainerProps> = (props) => {
  return (
    <Container
      padding={24}
      decoration={{
        color: '#ffffff',
        borderRadius: 12,
        boxShadow: [{
          color: 'rgba(0, 0, 0, 0.1)',
          offset: { dx: 0, dy: 4 },
          blurRadius: 8,
        }],
      }}
      {...props}
    />
  );
};

5b. Generic Components with Layr

Tsx

import { Container } from '@dynshift/layr';
import type { ReactNode } from 'react';

interface ButtonProps {
  variant: 'primary' | 'secondary';
  children: ReactNode;
  onClick?: () => void;
}

const Button: React.FC<ButtonProps> = ({ variant, children, onClick }) => {
  const isPrimary = variant === 'primary';

  return (
    <Container
      padding={{ horizontal: 24, vertical: 12 }}
      decoration={{
        color: isPrimary ? '#eb1660' : '#ffffff',
        borderRadius: 8,
        border: isPrimary ? undefined : {
          top: { width: 1, color: '#e5e7eb' },
          bottom: { width: 1, color: '#e5e7eb' },
          left: { width: 1, color: '#e5e7eb' },
          right: { width: 1, color: '#e5e7eb' },
        },
      }}
      cursor="pointer"
      onClick={onClick}
    >
      <span style={{ color: isPrimary ? '#ffffff' : '#1f2937' }}>
        {children}
      </span>
    </Container>
  );
};

5c. Type-Safe EdgeInsets

Tsx

import type { EdgeInsets } from '@dynshift/layr';
import { EdgeInsetsAll, EdgeInsetsSymmetric } from '@dynshift/layr';

// Object syntax (fully typed)
const padding1: EdgeInsets = { all: 16 };
const padding2: EdgeInsets = { horizontal: 20, vertical: 10 };
const padding3: EdgeInsets = { top: 10, left: 20, right: 20, bottom: 10 };

// Helper functions (type-safe)
const padding4 = EdgeInsetsAll(16);
const padding5 = EdgeInsetsSymmetric({ horizontal: 20, vertical: 10 });

5d. Type-Safe BoxDecoration

Tsx

import type { BoxDecoration } from '@dynshift/layr';
import { Container, BoxShape } from '@dynshift/layr';

const decoration: BoxDecoration = {
  color: '#eb1660',
  shape: BoxShape.circle,
  boxShadow: [{
    color: 'rgba(235, 22, 96, 0.3)',
    offset: { dx: 0, dy: 4 },
    blurRadius: 12,
    spreadRadius: 0,
  }],
};

function Avatar() {
  return (
    <Container 
      width={80} 
      height={80} 
      decoration={decoration} 
    />
  );
}

import type { BoxDecoration } from '@dynshift/layr';
import { Container, BoxShape } from '@dynshift/layr';

const decoration: BoxDecoration = {
  color: '#eb1660',
  shape: BoxShape.circle,
  boxShadow: [{
    color: 'rgba(235, 22, 96, 0.3)',
    offset: { dx: 0, dy: 4 },
    blurRadius: 12,
    spreadRadius: 0,
  }],
};

function Avatar() {
  return (
    <Container 
      width={80} 
      height={80} 
      decoration={decoration} 
    />
  );
}

Preview

NOTE: Previews are not depiction of actual website output.

5e. Type-Safe Alignment

Tsx

import { Column, Row, MainAxisAlignment, CrossAxisAlignment } from '@dynshift/layr';

function Layout() {
  return (
    <Column
      mainAxisAlignment={MainAxisAlignment.center}
      crossAxisAlignment={CrossAxisAlignment.start}
      spacing={16}
    >
      <Row
        mainAxisAlignment={MainAxisAlignment.spaceBetween}
        crossAxisAlignment={CrossAxisAlignment.center}
      >
        <span>Left</span>
        <span>Right</span>
      </Row>
    </Column>
  );
}

import { Column, Row, MainAxisAlignment, CrossAxisAlignment } from '@dynshift/layr';

function Layout() {
  return (
    <Column
      mainAxisAlignment={MainAxisAlignment.center}
      crossAxisAlignment={CrossAxisAlignment.start}
      spacing={16}
    >
      <Row
        mainAxisAlignment={MainAxisAlignment.spaceBetween}
        crossAxisAlignment={CrossAxisAlignment.center}
      >
        <span>Left</span>
        <span>Right</span>
      </Row>
    </Column>
  );
}

Preview

NOTE: Previews are not depiction of actual website output.

6. IntelliSense Benefits

TypeScript provides full autocomplete for all Layr components and props:

6a. Prop Suggestions

When you type <Container, your IDE suggests:
• width, height
• padding, paddingHorizontal, paddingVertical
• margin, marginHorizontal, marginVertical
• decoration, foregroundDecoration
• alignment, constraints
• onClick, onTap, cursor
• And more...

6b. Enum Autocomplete

When you type mainAxisAlignment={MainAxisAlignment., you get:
• start
• center
• end
• spaceBetween
• spaceAround
• spaceEvenly

6c. Type Errors

TypeScript catches errors at compile time:

Tsx

// ❌ Error: Type 'string' is not assignable to type 'number'
<Container width="200px" />

// ✅ Correct
<Container width={200} />
<Container width="200px" style={{ width: '200px' }} />

7. Strict Mode Compatibility

Layr is fully compatible with TypeScript's strict mode. All internal types are null-safe and exhaustively checked.

Json

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}

8. Type Inference

Layr components leverage TypeScript's type inference for cleaner code:

Tsx

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

// Types are inferred automatically
const MyComponent = () => {
  const padding = EdgeInsetsAll(16); // Inferred as EdgeInsets
  
  return (
    <Container padding={padding}> {/* TypeScript validates this */}
      Content
    </Container>
  );
};

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

// Types are inferred automatically
const MyComponent = () => {
  const padding = EdgeInsetsAll(16); // Inferred as EdgeInsets
  
  return (
    <Container padding={padding}> {/* TypeScript validates this */}
      Content
    </Container>
  );
};

Preview

NOTE: Previews are not depiction of actual website output.

9. React 18 & 19 Support

Layr supports both React 18 and React 19:

Json

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0"
  }
}

Ensure your @types/react version matches your React version:

Bash

# React 18
npm install --save-dev @types/react@^18.3.0

# React 19
npm install --save-dev @types/react@^19.0.0

10. Common Issues

10a. "Cannot find module '@dynshift/layr'"

Solution: Ensure moduleResolution is set to "bundler" or "node16":

Json

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

10b. "JSX element type does not have any construct or call signatures"

Solution: Set jsx to "react-jsx":

Json

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

10c. Types Not Showing in IDE

Solution: Restart your TypeScript server:

• VS Code: Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server"
• WebStorm: File → Invalidate Caches → Restart

11. Advanced: Extending Types

You can extend Layr's types for custom wrappers:

Tsx

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

interface CardProps extends ContainerProps {
  title: string;
  variant?: 'elevated' | 'outlined';
}

const Card: React.FC<CardProps> = ({ title, variant = 'elevated', children, ...props }) => {
  const decoration = variant === 'elevated' 
    ? { 
        color: '#ffffff', 
        borderRadius: 12,
        boxShadow: [{ color: 'rgba(0,0,0,0.1)', offset: { dx: 0, dy: 4 }, blurRadius: 8 }]
      }
    : { 
        color: '#ffffff', 
        borderRadius: 12,
        border: { top: { width: 1, color: '#e5e7eb' } }
      };

  return (
    <Container padding={24} decoration={decoration} {...props}>
      <h3>{title}</h3>
      {children}
    </Container>
  );
};

12. Type-Only Imports

For better tree-shaking, use type-only imports when importing types:

Tsx

// ✅ Recommended
import { Container } from '@dynshift/layr';
import type { ContainerProps } from '@dynshift/layr';

// ⚠️ Also works, but less explicit
import { Container, type ContainerProps } from '@dynshift/layr';

13. Next Steps

• Container — Learn about decoration, padding, and constraints

Migration from Flutter

Container