61 lines
1.0 KiB
Markdown
61 lines
1.0 KiB
Markdown
# Installation
|
|
|
|
## 1. Install the package
|
|
|
|
```bash
|
|
npm install @hykocx/zen
|
|
```
|
|
|
|
## 2. Install the styles
|
|
|
|
Add the following line to your `globals.css` file:
|
|
|
|
```css
|
|
@import '@hykocx/zen/styles/zen.css';
|
|
```
|
|
|
|
## 3. Add ZenProvider to your root layout
|
|
|
|
Wrap your application with the `ZenProvider` in your root layout to enable toast notifications globally:
|
|
|
|
```javascript
|
|
// app/layout.js
|
|
import './globals.css';
|
|
import { ZenProvider } from '@hykocx/zen/provider';
|
|
|
|
export const metadata = {
|
|
title: 'My App',
|
|
};
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html lang="en">
|
|
<body>
|
|
<ZenProvider>
|
|
{children}
|
|
</ZenProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
```
|
|
|
|
## 4. Configure the environment variables
|
|
|
|
Check the [`.env.example`](.env.example) file for the required environment variables to add to your `.env` file.
|
|
|
|
## 5. Initialize the database
|
|
|
|
```bash
|
|
npx zen-db init
|
|
```
|
|
|
|
# Setup
|
|
|
|
## Quick Setup
|
|
|
|
You can create all required files with a single command:
|
|
|
|
```bash
|
|
npx zen-setup init
|
|
``` |