### Install @ant-design/nextjs-registry
Source: https://github.com/ant-design/nextjs-registry/blob/main/README.md
Install the package using npm. This command adds the dependency to your project.
```bash
npm install @ant-design/nextjs-registry --save
```
--------------------------------
### Ant Design Login Form Example
Source: https://context7.com/ant-design/nextjs-registry/llms.txt
Demonstrates a complete login form using Ant Design components after configuring AntdRegistry. Ensure Ant Design components are imported and used within the application.
```tsx
'use client';
import React from 'react';
import { Button, Checkbox, ConfigProvider, Form, Input } from 'antd';
type FieldType = {
username?: string;
password?: string;
remember?: string;
};
const LoginPage: React.FC = () => {
const onFinish = (values: FieldType) => {
console.log('Success:', values);
// Expected output: { username: 'user@example.com', password: '***', remember: true }
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
// Expected output: { values: {...}, errorFields: [...], outOfDate: false }
};
return (
);
};
export default LoginPage;
```
--------------------------------
### Integrate AntdRegistry in Next.js RootLayout
Source: https://github.com/ant-design/nextjs-registry/blob/main/README.md
Wrap your application's root layout with AntdRegistry to manage Ant Design styles. This should be done in your app/layout.tsx file.
```tsx
import React from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
--------------------------------
### Configure AntdRegistry with StyleProvider Props
Source: https://context7.com/ant-design/nextjs-registry/llms.txt
Pass custom props like `hashPriority`, `ssrInline`, and `autoClear` to AntdRegistry to customize style behavior. These props are passed directly to the underlying `@ant-design/cssinjs` StyleProvider.
```tsx
import React from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.