@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