feat: initial commit

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "turbo",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": ["tailwindcss"],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off",
+    "react/jsx-key": "off",
+    "tailwindcss/no-custom-classname": "off"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn"]
+    },
+    "next": {
+      "rootDir": ["apps/*/"]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+.contentlayer

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx pretty-quick --staged

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

.nvmrc

@@ -0,0 +1 @@
+v16.18.0

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "eslint.workingDirectories": [
+    { "pattern": "apps/*/" },
+    { "pattern": "packages/*/" }
+  ]
+}

README.md

@@ -0,0 +1,46 @@
+# shadcn/ui
+
+Beautifully designed components built with Radix UI and Tailwind CSS.
+
+![hero](apps/www/public/og.jpg)
+
+## Roadmap
+
+> **Warning**
+> This is work in progress. I'm building this in public. You can follow the progress on Twitter [@shadcn](https://twitter.com/shadcn).
+
+- [ ] Toast
+- [ ] Toggle
+- [ ] Toggle Group
+- [ ] Toolbar
+- [ ] Navigation Menu
+- [ ] Figma?
+
+## Get Started
+
+Starting a new project? Check out the Next.js template.
+
+```bash
+npx create-next-app -e https://github.com/shadcn/next-template
+```
+
+### Features
+
+- Radix UI Primitives
+- Tailwind CSS
+- Fonts with `@next/font`
+- Icons from [Lucide](https://lucide.dev)
+- Dark mode with `next-themes`
+- Automatic import sorting with `@ianvs/prettier-plugin-sort-imports`
+
+### Tailwind CSS Features
+
+- Class merging with `taiwind-merge`
+- Animation with `tailwindcss-animate`
+- Conditional classes with `clsx`
+- Variants with `class-variance-authority`
+- Automatic class sorting with `eslint-plugin-tailwindcss`
+
+## License
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).

apps/www/.env.example

@@ -0,0 +1,4 @@
+# -----------------------------------------------------------------------------
+# App
+# -----------------------------------------------------------------------------
+NEXT_PUBLIC_APP_URL=http://localhost:3000

apps/www/.gitignore

@@ -0,0 +1,2 @@
+.vscode
+.env

apps/www/app/docs/[[...slug]]/head.tsx

@@ -0,0 +1,25 @@
+import { allDocs } from "contentlayer/generated"
+
+import MdxHead from "@/components/mdx-head"
+
+interface HeadProps {
+  params: {
+    slug: string[]
+  }
+}
+
+export default function Head({ params }: HeadProps) {
+  const slug = params?.slug?.join("/") || ""
+  const doc = allDocs.find((doc) => doc.slugAsParams === slug)
+
+  if (!doc) {
+    return null
+  }
+
+  return (
+    <MdxHead
+      params={params}
+      og={{ heading: doc.title, type: doc.title, mode: "light" }}
+    />
+  )
+}

apps/www/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,80 @@
+import { notFound } from "next/navigation"
+import { allDocs } from "contentlayer/generated"
+
+import "@/styles/mdx.css"
+import Link from "next/link"
+
+import { getTableOfContents } from "@/lib/toc"
+import { Icons } from "@/components/icons"
+import { Mdx } from "@/components/mdx"
+import { DocsPageHeader } from "@/components/page-header"
+import { DocsPager } from "@/components/pager"
+import { DashboardTableOfContents } from "@/components/toc"
+import { Separator } from "@/components/ui/separator"
+
+interface DocPageProps {
+  params: {
+    slug: string[]
+  }
+}
+
+export async function generateStaticParams(): Promise<
+  DocPageProps["params"][]
+> {
+  return allDocs.map((doc) => ({
+    slug: doc.slugAsParams.split("/"),
+  }))
+}
+
+export default async function DocPage({ params }: DocPageProps) {
+  const slug = params?.slug?.join("/") || ""
+  const doc = allDocs.find((doc) => doc.slugAsParams === slug)
+
+  if (!doc) {
+    notFound()
+  }
+
+  const toc = await getTableOfContents(doc.body.raw)
+
+  return (
+    <main className="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px]">
+      <div className="mx-auto w-full min-w-0">
+        <DocsPageHeader heading={doc.title} text={doc.description}>
+          {doc.radix ? (
+            <div className="flex items-center space-x-2 pt-4">
+              {doc.radix?.link && (
+                <Link
+                  href={doc.radix.link}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50"
+                >
+                  <Icons.radix className="mr-1 h-3 w-3" />
+                  Radix UI
+                </Link>
+              )}
+              {doc.radix?.api && (
+                <Link
+                  href={doc.radix.api}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50"
+                >
+                  API Reference
+                </Link>
+              )}
+            </div>
+          ) : null}
+        </DocsPageHeader>
+        <Mdx code={doc.body.code} />
+        <Separator className="my-4 md:my-6" />
+        <DocsPager doc={doc} />
+      </div>
+      <div className="hidden text-sm xl:block">
+        <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
+          <DashboardTableOfContents toc={toc} />
+        </div>
+      </div>
+    </main>
+  )
+}

apps/www/app/docs/layout.tsx

@@ -0,0 +1,20 @@
+import { docsConfig } from "@/config/docs"
+import { DocsSidebarNav } from "@/components/sidebar-nav"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface DocsLayoutProps {
+  children: React.ReactNode
+}
+
+export default function DocsLayout({ children }: DocsLayoutProps) {
+  return (
+    <div className="flex-1 items-start md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
+      <aside className="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r border-r-slate-100 dark:border-r-slate-700 md:sticky md:block">
+        <ScrollArea className="pr-6 lg:py-10">
+          <DocsSidebarNav items={docsConfig.sidebarNav} />
+        </ScrollArea>
+      </aside>
+      {children}
+    </div>
+  )
+}

apps/www/app/head.tsx

@@ -0,0 +1,43 @@
+import { siteConfig } from "@/config/site"
+
+export default function Head() {
+  const url = process.env.NEXT_PUBLIC_APP_URL
+  const ogUrl = new URL(`${url}/og.jpg`)
+
+  return (
+    <>
+      <title>{`${siteConfig.name} - ${siteConfig.description}`}</title>
+      <meta charSet="utf-8" />
+      <meta name="description" content={siteConfig.description} />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/site.webmanifest" />
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={siteConfig.name} />
+      <meta property="og:description" content={siteConfig.description} />
+      <meta property="og:url" content={url?.toString()} />
+      <meta property="og:image" content={ogUrl.toString()} />
+      <meta name="twitter:title" content={siteConfig.name} />
+      <meta name="twitter:description" content={siteConfig.description} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta property="twitter:url" content={url?.toString()} />
+      <meta name="twitter:image" content={ogUrl.toString()} />
+    </>
+  )
+}

apps/www/app/layout.tsx

@@ -0,0 +1,44 @@
+import { Inter as FontSans } from "@next/font/google"
+
+import "@/styles/globals.css"
+import { cn } from "@/lib/utils"
+import { Analytics } from "@/components/analytics"
+import { SiteFooter } from "@/components/site-footer"
+import { SiteHeader } from "@/components/site-header"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+import { ThemeProvider } from "@/components/theme-provider"
+
+const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <html lang="en" suppressHydrationWarning>
+        <head />
+        <body
+          className={cn(
+            "min-h-screen bg-white font-sans text-slate-900 antialiased dark:bg-slate-900 dark:text-slate-50",
+            fontSans.variable
+          )}
+        >
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <div className="flex min-h-screen flex-col">
+              <SiteHeader />
+              <div className="container flex-1">{children}</div>
+              <SiteFooter />
+            </div>
+            <TailwindIndicator />
+          </ThemeProvider>
+        </body>
+      </html>
+      <Analytics />
+    </>
+  )
+}