@philiprehberger/next-layout-components

Layout primitives for Next.js and React apps

Installation

npm install @philiprehberger/next-layout-components clsx

Usage

import { Page, Card } from '@philiprehberger/next-layout-components';

export default function HomePage() {
  return (
    <Page maxWidth="xl">
      <Card title="Welcome" padding="lg" hoverable>
        <p>Card content goes here</p>
      </Card>
    </Page>
  );
}

API

Page

Page wrapper with responsive padding and configurable max width.

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | -- | Page content | | maxWidth | 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full' | 'xl' | Max width constraint | | className | string | -- | Additional CSS classes |

Card

Card container with optional title, configurable padding, and hover effect.

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | -- | Card content | | title | string | -- | Optional card heading | | padding | 'none' \| 'sm' \| 'md' \| 'lg' | 'md' | Padding size | | hoverable | boolean | false | Enable hover effect | | className | string | -- | Additional CSS classes | | contentWrapperClassName | string | -- | CSS class for the content wrapper |

Development

npm install
npm run build
npm test

Support

If you find this project useful:

⭐ Star the repo

🐛 Report issues

💡 Suggest features

❤️ Sponsor development

🌐 All Open Source Projects

💻 GitHub Profile

🔗 LinkedIn Profile

License

MIT