shadcn-ui / taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

Taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

Warning This app is a work in progress. I'm building this in public. You can follow the progress on Twitter @shadcn. See the roadmap below.

About this project

This project as an experiment to see how a modern app (with features like authentication, subscriptions, API routes, static pages for docs ...etc) would work in Next.js 13 and server components.

This is not a starter template.

A few people have asked me to turn this into a starter. I think we could do that once the new features are out of beta.

Note on Performance

Warning This app is using the unstable releases for Next.js 13 and React 18. The new router and app dir is still in beta and not production-ready. Expect some performance hits when testing the dashboard. If you see something broken, you can ping me @shadcn.

Features

• New /app dir,
• Routing, Layouts, Nested Layouts and Layout Groups
• Data Fetching, Caching and Mutation
• Loading UI
• Route handlers
• Metadata files
• Server and Client Components
• API Routes and Middlewares
• Authentication using NextAuth.js
• ORM using Prisma
• Database on PlanetScale
• UI Components built using Radix UI
• Documentation and blog using MDX and Contentlayer
• Subscriptions using Stripe
• Styled using Tailwind CSS
• Validations using Zod
• Written in TypeScript

Roadmap

• Add MDX support for basic pages
• Build marketing pages
• Subscriptions using Stripe
• Responsive styles
• Add OG image for blog using @vercel/og
• Dark mode

Known Issues

A list of things not working right now:

1. GitHub authentication (use email)
2. Prisma: Error: ENOENT: no such file or directory, open '/var/task/.next/server/chunks/schema.prisma'
3. Next.js 13: Client side navigation does not update head
4. Cannot use opengraph-image.tsx inside catch-all routes

Why not tRPC, Turborepo or X?

I might add this later. For now, I want to see how far we can get using Next.js only.

If you have some suggestions, feel free to create an issue.

Running Locally

1. Install dependencies using pnpm:

pnpm install

2. Copy .env.example to .env.local and update the variables.

cp .env.example .env.local

3. Start the development server:

pnpm dev

License

Licensed under the MIT license.

taxonomy's Issues

Create repo as Template Repo

getting the error while cloning, Could not clone: shadcn/taxonomy is not a template repository.

Correct setting .env?

Hi! I really don't understand how to properly configure the .env file, can I ask you to describe in detail how to do everything correctly so that all the functionality works correctly for me?

CSS not working

Hi, I don't know why but your CSS is not working. Any solution?

Add support for multiple langauges

I imagine this is a big one - but would be an awesome addition.

Error when installed with npm instead of pnpm

I know it's written to be installed with pnpm and after doing it it worked.

I am more interested in general if anyone understands why it's not working with plain npm:

Error on all routes after npm install & npm run dev: => generated is not exported from package

After Login Error on Vercel

Hi,

@shadcn Thanks for such a wonderful project, Its works like a charm for starter projects.

I have cloned it for testing, but after deployment on Vercel, the login functionality somehow is having some issues.

I looked for it in the log but no error reported, the test project is located at https://taxonomy-nine.vercel.app/ and GitHub is active.

Any help will be appreciated.

Fix TypeScript warnings

I got a couple of types errors in there and a couple of @ts-nocheck. I'll fix this when Next.js app dir is out of beta or when new minors are out.

would it be better to have incremental static generation?

https://github.com/shadcn/taxonomy/blob/03ef292d26f1f96dfbd9d2773284c370e3fec7e4/app/(dashboard)/dashboard/page.tsx#L20

New post without pressing Save button still persists posts (back button or browser back)

Steps to repro:

1. Sign in with GitHub
2. Click 'New Post' button in top right
3. Click 'Back' button in top left

Expected Behavior:
Still no posts in the list

Actual behavior:
There's a new post in the list
'Untitled Post {today's date}'

Design Files

As I was browsing the stunning website, I became curious about how such beauty could be crafted. I speculated that it must have been designed using software before being brought to life, so I began searching for the design. However, despite my efforts, I was unable to locate it. (I am learning from the project.)

Enhancement: "New Post" loads for a really long time

Not sure why hitting "New Post" takes a really long time to load (~3-4s):

CleanShot.2022-11-05.at.19.38.46.mp4

Header overlapping modal overlay

When removing post heading is still visible.

Looks like Heading and modal have z-index: 40

Saving a post does not show the saved post automatically

When we go to the editor page for one post, when we click on "save", go back to the dashboard, and return to the editor page it shows the old post.

Since next 13 does a soft navigation on route push or back, you could call router.refresh() on save to force it to refetch the data.

I've attached a screenshot :
https://user-images.githubusercontent.com/38298743/200118896-baa87a7d-eabf-4a02-8490-867fdc8d3649.mov

PS :
And one simple way to have loading state without creation one yourself is to use React.useTransition it provides you with a pending state :

const [isSaving, startTransition] = React.useTransition();

async function onSubmit(data: FormData) {
	startTransition(() => {
		// you do your fetch call here...

		router.refresh();
	});
}

// ... rest of your code

Bug report: Login page doesn't auto redirect if I'm logged in

It sometimes does but it's a bit flaky:

CleanShot.2022-11-05.at.19.37.28.mp4

Middleware should solve this.

https://tx.shadcn.com/docs/documentation/contentlayer -> not found

when I click on contentLayer in documentation it go to a 404 page,

Call redirect function on dashboard layout if user not found

This is not really an issue but a suggestion :
You probably should call redirect to login for users on the dashboard if the user is not in the session :

import { redirect } from 'next/navigation';

// ... rest of the code

export default async function DashboardLayout({
  children,
}: DashboardLayoutProps) {
  const user = await getUser()

  if (!user) {
	// here
    redirect('/login');
  }

  return ( ... );
}

The docs on redirect are here : https://beta.nextjs.org/docs/api-reference/redirect

server not start after install

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from D:\Codehub\taxonomy.env.local
error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'esbuild' imported from D:\Codehub\taxonomy\node_modules.pnpm@[email protected][email protected]\node_modules@contentlayer\core\dist\getConfig\esbuild.js
at new NodeError (node:internal/errors:371:5)
at packageResolve (node:internal/modules/esm/resolve:932:9)
at moduleResolve (node:internal/modules/esm/resolve:978:18)
at defaultResolve (node:internal/modules/esm/resolve:1080:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
at ModuleWrap. (node:internal/modules/esm/module_job:79:40)
at link (node:internal/modules/esm/module_job:78:36) {
code: 'ERR_MODULE_NOT_FOUND'
}

Contribution guidelines / project board

Love the project and would definitely like to start contributing if possible. Would be great to have a GitHub project board for the roadmap / see who's working on what.

Side note: Discord server would also be awesome for chatting all things Next13 / SaaS, just throwing it out there 😉

Add tanstack query.

This project is really nice. Ideally any production project is going to need a library like tanstack/react query. Would be really nice if you incorporated it into this project

PFA: Getting this error when clicked on login button.

Active on this page if ID is visible in the view

Hello,

Not really a issue, but what is responsible for this behavior ? Highlight the topic that is on the screen.

active-link.mp4

Even if the user is logged in, when we visite home page we get a login button

If you're logged in, shouldn't you be getting a logout button or a profile dropdown shown on the website's home page instead of the login button?

Mobile navigation

navigation does not close on click

Profile icon not showing on the home page after successful login

In the application, after a user successfully logs in, the site is supposed to show the user's profile icon on the home page. However, instead of showing the profile icon, the login button is still displayed.

Expected Result:

Profile icon not showing on the home page after successful login.

Actual Result

After successful login, the login button is still being displayed on the home page.

Preview

Screen.Recording.-.13.April.2023.mp4

Feature Request - Add React-Testing-Library

Can unit testing be added to this repo? It would be a great learning for many.

Postmark templates ID hardcoded.

Hi thanks for open sourcing!
I have a couple questions regarding the email integration:

• Are the templates in the repo too?
• How to create them. First time using postmark

POSTMARK_SIGN_IN_TEMPLATE = 29559329
POSTMARK_ACTIVATION_TEMPLATE = 29559329

Enhancement: Override default CMD + S behavior in text editor

Currently it brings up the default browser save dialog:

CleanShot.2022-11-05.at.19.42.21.mp4

Recommend adding a CMD + S event listener within the text area to allow users to save with CMD + S

Here's how I'm doing it in Dub: https://github.com/steven-tey/dub/blob/main/components/stats/feedback.tsx#L30-L34

How do you use the next/font?

Hi! I am trying to get my head around how to implement the new next/font package in my project and I dont really understand how can I specify the font as an utility class. In your case I suppose it applies to all the font in the web as you have set it up in the main layout, but how can I specify it to be used for example only for h1 tags or by specifying font-title to an element using tailwind? Thanks in advance!

Fallback avatar visible with avatar

Radix fallback component is visible with avatar image

Most likely because you are using next/image component and not Radix <Avatar.Image />. So fallback is triggered?

warn The `referentialIntegrity` attribute is deprecated.

Getting below warning while deploying to vercel,

warn The `referentialIntegrity` attribute is deprecated. Please use `relationMode` instead. Learn more at https://pris.ly/d/relation-mode

But while using relationMode, it gives deployment error:

Error: Schema validation error - Error (get-config wasm)
--
19:20:32.652 | Error code: P1012
19:20:32.652 | error: Error validating datasource `db`:
19:20:32.652 | This option can only be set if the preview feature is enabled in a generator block.
19:20:32.652 |  
19:20:32.653 | Example:
19:20:32.653 |  
19:20:32.653 | generator client {
19:20:32.653 | provider = "prisma-client-js"
19:20:32.653 | previewFeatures = ["referentialIntegrity"]
19:20:32.653 | }
19:20:32.653 |  
19:20:32.653 | -->  schema.prisma:4
19:20:32.653 | \|
19:20:32.653 | 3 \|   url      = env("DATABASE_URL")
19:20:32.653 | 4 \|   relationMode = "prisma"
19:20:32.653 | 5 \| }
19:20:32.653 | \|

Enable TypeScript `strict` mode

TypeScript strict mode enables some extremely useful static type analysis and prevents some easy to stumble into pitfalls. Unless there's a specific compatibility reason why it needs to be disabled, enabling it would be beneficial to the type-safety and runtime stability of this app

I originally realized it wasn't enabled after I wasn't able to get proper type inference using zod. Specifically, the discriminated union return type of parseSafe isn't able to be narrowed to one case unless strict mode is enabled.

There are some unhandled type errors when enabling strict mode. Most of these are either accessing a property of a nullish object or assigning a nullish value to a non-nullable target. I'd be willing to do a PR to enable strict mode and resolve these type errors but figured I'd raise an issue first.

Deos Your post was not saved. Please try again. error message makes sense for login failure

this is a small issue, but the login fail error toast message should be chaged

Referral code feature

Hello

I would like to see how you would approach implementing a referral code handling feature into this cool app.

Think of an url https://tx.shadcn.com/?ref=DISCOUNT5 for 5% discount on the subscription price

Thanks in advance!

Error: Invalid Tailwind CSS classnames order tailwindcss/classnames-order

Failed to compile.

01:38:16.130 |  
01:38:16.130 | ./components/card.tsx
01:38:16.130 | 27:14 Error: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
01:38:16.130 |  
01:38:16.130 | ./components/ui/command.tsx
01:38:16.131 | 32:18 Error: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
01:38:16.131 |  
01:38:16.131 | info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
01:38:16.248 | error Command failed with exit code 1.
01:38:16.249 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
01:38:16.279 | Error: Command "yarn run build" exited with 1
01:38:16.553 | BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

Why opening new route take time?

When clicking on Get Started or any link for the first time, it takes a couple of ms to open. Wasn't that a bad experience? Was it happening because of SSR?
Video link:-
Video 1
Video 2

Question : User Authentication

Hello,

I am very interested in your project as I wanted to start migrating some projet to Next13 and the app directory.
I was wondering how you handle the authentication as I am stuggling with that subject. I saw you removed the authentication in a previous commit. Why ? Have you got some ideas how to make it work ?
I am very interested to see how you will manage that, I'll folllow closely your work ;)

Thanks,

Cashed dashboard post.title not updated when the post title is updated

Hi @shadcn
It seems that when you update a POST in https://tx.shadcn.com/editor/clg0hxp290001l608laz06l3i and come back to /dashboard the title of the edited post stays the same.

Typos in Documentation

@shadcn There are a few typos in the documentation for the word markdown it's spelled mardown

Assign the issue to me I'll fix it.

posts can only be saved as draft

publish coming soon?

Can't deploy Taxonomy to Vercel

I tried to deploy Taxonomy on Vercel, I filled every environment variable, including NextAuth, Github, Stripe, Postmark and Planetscale, it works on my local machine, both development and build are OK, no console errors or warnings, but when I deploy it to Vercel, I always get the same error and I don't know how to debug it. Can you help me please?

"Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
ur @ 1038-8ac05e91eb48cd01.js:9"

Server Running on Port 3000 but Unable to Send Request to App

after running "pnpm run dev" server runs on port 3000 but when i visit http://127.0.0.1:3000/ It seems that it can't send request to the app, the bowser keeps loading infinitely.

I don't get any errors on server or dev console

Node version: v19.8.1

undefined og.jpeg

I get this error when I try and build the site.

Nov 28 10:08:42 AM  TypeError [ERR_INVALID_URL]: Invalid URL
Nov 28 10:08:42 AM      at new NodeError (node:internal/errors:387:5)
Nov 28 10:08:42 AM      at URL.onParseError (node:internal/url:565:9)
Nov 28 10:08:42 AM      at new URL (node:internal/url:641:5)
Nov 28 10:08:42 AM      at MdxHead (/opt/render/project/src/.next/server/chunks/6564.js:26:17)
Nov 28 10:08:42 AM      at T (/opt/render/project/src/.next/server/chunks/5245.js:20716:25)
Nov 28 10:08:42 AM      at Ma (/opt/render/project/src/.next/server/chunks/5245.js:20879:33)
Nov 28 10:08:42 AM      at Object.toJSON (/opt/render/project/src/.next/server/chunks/5245.js:20672:32)
Nov 28 10:08:42 AM      at stringify (<anonymous>)
Nov 28 10:08:42 AM      at V (/opt/render/project/src/.next/server/chunks/5245.js:20971:53)
Nov 28 10:08:42 AM      at AsyncLocalStorage.run (node:async_hooks:330:14) {
Nov 28 10:08:42 AM    input: 'undefined/og.jpg',
Nov 28 10:08:42 AM    code: 'ERR_INVALID_URL'

I think it is looking for "undefined/og.jpg" instead of the valid og.jpg

Not sure if I am right since I am not a developer.

Thanks
Paul

Error on login

Getting an error when trying to log in with email:

1. Enter email
2. Receive email link
3. Click link from email and receive error:

Question: purpose of project?

Question: is this project meant to:

• showcase all capabilities of the latest nextjs release;
• a project starter/template;
• a ready to use CMS;
• all of the above?

Add custom domains feature

Would be great to support custom domains on Vercel.

So that clients can easily use their own domain, it's already implemented in some Vercel templates such as this one regarding mutlitentant applications.

Can't deploy Taxonomy - Conflicting peer dependency: @opentelemetry

Hi
I can't deploy a fresh install of Taxonomy. It seems to be related to @opentelemetry.
Here are the deployment logs :

Install NPM Packages 20230403075608108
Missing lock file(s). Installing packages using npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @opentelemetry/[email protected]
npm ERR! node_modules/@opentelemetry/api
npm ERR! @opentelemetry/api@"~1.1.0" from @contentlayer/[email protected]
npm ERR! node_modules/@contentlayer/utils
npm ERR! @contentlayer/utils@"0.2.9" from [email protected]
npm ERR! node_modules/contentlayer
npm ERR! contentlayer@"^0.2.9" from the root project
npm ERR! @contentlayer/utils@"0.2.9" from [email protected]
npm ERR! node_modules/next-contentlayer
npm ERR! next-contentlayer@"^0.2.9" from the root project
npm ERR! 3 more (@contentlayer/cli, @contentlayer/core, @contentlayer/source-files)
npm ERR! peer @opentelemetry/api@"^1.1.0" from @effect-ts/[email protected]
npm ERR! node_modules/@effect-ts/otel
npm ERR! @effect-ts/otel@"^0.14.0" from @contentlayer/[email protected]
npm ERR! node_modules/@contentlayer/utils
npm ERR! @contentlayer/utils@"0.2.9" from [email protected]
npm ERR! node_modules/contentlayer
npm ERR! contentlayer@"^0.2.9" from the root project
npm ERR! 4 more (next-contentlayer, @contentlayer/cli, ...)
npm ERR! @effect-ts/otel@"^0.14.1" from @effect-ts/[email protected]
npm ERR! node_modules/@effect-ts/otel-exporter-trace-otlp-grpc
npm ERR! @effect-ts/otel-exporter-trace-otlp-grpc@"^0.14.0" from @contentlayer/[email protected]
npm ERR! node_modules/@contentlayer/utils
npm ERR! @contentlayer/utils@"0.2.9" from [email protected]
npm ERR! node_modules/contentlayer
npm ERR! 4 more (next-contentlayer, @contentlayer/cli, ...)
npm ERR! 1 more (@effect-ts/otel-sdk-trace-node)
npm ERR! 15 more (@opentelemetry/core, @opentelemetry/sdk-trace-base, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @opentelemetry/api@"^1.4.0" from [email protected]
npm ERR! node_modules/next
npm ERR! next@"^13.2.3" from the root project
npm ERR! peer next@"^12.2.5 || ^13" from [email protected]
npm ERR! node_modules/next-auth
npm ERR! next-auth@"^4.20.1" from the root project
npm ERR! 1 more (@next-auth/prisma-adapter)
npm ERR! 2 more (next-contentlayer, next-themes)
npm ERR!
npm ERR! Conflicting peer dependency: @opentelemetry/[email protected]
npm ERR! node_modules/@opentelemetry/api
npm ERR! peerOptional @opentelemetry/api@"^1.4.0" from [email protected]
npm ERR! node_modules/next
npm ERR! next@"^13.2.3" from the root project
npm ERR! peer next@"^12.2.5 || ^13" from [email protected]
npm ERR! node_modules/next-auth
npm ERR! next-auth@"^4.20.1" from the root project
npm ERR! 1 more (@next-auth/prisma-adapter)
npm ERR! 2 more (next-contentlayer, next-themes)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I can't deploy this template on vercel.

When I deploy this template on vercel, building process fails.

Routing back to home page in documentation

When in divination if you click on any of the other links it re routes you to the home page items of the link.

Quite possible could be something with nextjs app router but can investigate if needed.

Internationalization / i18n

Would you be interested in supporting i18n in this app? I'm the maintainer of next-intl, an internationalization library for Next.js. I just added support for Next.js 13 and the app folder in the latest version (docs).

The latest version includes a drop-in middleware replacement for the i18n routing that Next.js previously provided, but which was removed for the app folder. At this time, Client Components are fully supported by next-intl and support for Server Components is in beta.

If you'd be interested, I could help to set this up in Taxonomy—just let me know!

When logged in, users can still access the login page

to recreate the above issue, login and go to the /dashboard endpoint, go back to home page you still see a login button which should not be there and also when you click on it you can access login page even though the users is authenticated, i can't find a usecase where this is a feature instead of bug, lmk if i am msising anything