https://github.com/Dinuda/next.js-14-postgres-prisma-shadcn-template
This is a Next.js starter kit that uses NextAuth, Prisma as the ORM, Postgres databas, Shadcn for UI components, and Tailwind CSS for styling.
https://github.com/Dinuda/next.js-14-postgres-prisma-shadcn-template
next nextjs14 nextjs14-starter prisma server-side shadcn shadcn-ui typescript
Last synced: 7 months ago
JSON representation
This is a Next.js starter kit that uses NextAuth, Prisma as the ORM, Postgres databas, Shadcn for UI components, and Tailwind CSS for styling.
- Host: GitHub
- URL: https://github.com/Dinuda/next.js-14-postgres-prisma-shadcn-template
- Owner: Dinuda
- Created: 2023-11-24T04:26:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-12T19:28:10.000Z (about 2 years ago)
- Last Synced: 2024-04-14T21:48:03.505Z (almost 2 years ago)
- Topics: next, nextjs14, nextjs14-starter, prisma, server-side, shadcn, shadcn-ui, typescript
- Language: TypeScript
- Homepage:
- Size: 985 KB
- Stars: 25
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcnui - Github
README
Next.js Prisma PostgreSQL Auth Starter with Shadcn
This is a Next.js starter kit that uses Next-Auth for simple email + password login
Prisma as the ORM, and Postgres database to persist the data. This application uses Shadcn for UI components, and Tailwind CSS for styling. It has integrated theming support, with support for multiple themes with a custom plugin.
## Configure the Database
- create a `.env` file in the root of the project
```
# Create a Postgres database
POSTGRES_PRISMA_URL=
POSTGRES_URL_NON_POOLING=
# Generate one with this command: openssl rand -base64 32
NEXTAUTH_SECRET=
```
First, run the development server:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Theming with Shadcn
This starter kit uses Shadcn for UI components, and Tailwind CSS for styling. It has integrated theming support, with support for multiple themes with a custom plugin.
### Creating a Theme
To create a theme, add to `lib/shadcn-plugin.ts`:
```ts
- add colors to `:root` object
`
"--brown-dark-1": "355 45% 31%",
"--magenta-dark-1": "200 55% 37%",
"--purple-dark-1": "261 51% 51%",
"--dark-green-1": "145 58% 55%",
- configure the `theme` object
"dark-1": "hsl(var(--brown-dark-1))",
"dark-2": "hsl(var(--magenta-dark-1))",
"dark-3": "hsl(var(--purple-dark-1))",
"dark-4": "hsl(var(--dark-green-1))",
```