feat: add button ui documentation (#223)

Author: thedaviddias

apps/kit/README.md

@@ -60,7 +60,7 @@ registry/
 ### Adding New Components
 
 1. Create your component file in the appropriate directory:
-   - `registry/default/ui/` for base UI components
+   - `registry/default/components/upkit/` for base UI components
    - `registry/default/components/` for complex components
    - `registry/default/blocks/` for page sections
 
@@ -90,7 +90,7 @@ registry/
 Visit `/examples` to see components in action, or use them in your code:
 
 ```tsx
-import { Button } from "@/registry/default/ui/button"
+import { Button } from "@/registry/default/components/upkit/button"
 import InputBasic from "@/registry/default/components/input-basic"
 
 export default function MyPage() {

apps/kit/app/(home)/page.tsx

@@ -25,15 +25,13 @@ export default function HomePage() {
 			<section className="container mx-auto px-4 py-16 md:py-24 text-center">
 				<div className="max-w-4xl mx-auto">
 					<Badge variant="secondary" className="mb-6">
-						UX Patterns for Developers
+						Copy & Paste Ready
 					</Badge>
-					<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400 bg-clip-text text-transparent">
+					<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-neutral-900 to-neutral-600 dark:from-neutral-100 dark:to-neutral-400 bg-clip-text text-transparent">
 						UP Kit
 					</h1>
-					<p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-2xl mx-auto">
-						A comprehensive collection of UX patterns and UI components for
-						developers who want to build effective, accessible, and usable
-						interfaces.
+					<p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+						Ship better UX than most design teams. Without the meetings. Production-ready components with all the UX decisions already made. Every pattern, animation, and interaction battle-tested. Copy the excellence, skip the committees.
 					</p>
 					<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
 						<Button asChild size="lg">
@@ -42,7 +40,12 @@ export default function HomePage() {
 							</Link>
 						</Button>
 						<Button variant="outline" size="lg" asChild>
-							<Link href="/examples">View Examples</Link>
+							<Link href="/docs/components/button">View Components</Link>
+						</Button>
+						<Button variant="ghost" size="lg" asChild>
+							<Link href="https://uxpatterns.dev">
+								Learn the Patterns <ArrowRight className="h-4 w-4" />
+							</Link>
 						</Button>
 					</div>
 					<div className="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground">
@@ -150,7 +153,7 @@ export default function HomePage() {
 						</p>
 						<div className="bg-background rounded-lg p-6 mb-8">
 							<code className="text-sm">
-								npx shadcn@latest add https://kit.uxpatterns.dev/r/button.json
+								npx shadcn@latest add @upkit/button
 							</code>
 						</div>
 						<div className="flex flex-col sm:flex-row gap-4 justify-center">
@@ -160,7 +163,7 @@ export default function HomePage() {
 								</Link>
 							</Button>
 							<Button variant="outline" size="lg" asChild>
-								<Link href="/examples">View Examples</Link>
+								<Link href="/docs/components/button">View Components</Link>
 							</Button>
 						</div>
 					</div>

apps/kit/app/apple-icon.png

@@ -9,6 +9,7 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { source } from "@/lib/source";
 import { getMDXComponents } from "@/mdx-components";
+import { LLMCopyButton, ViewOptions } from "@/components/page-actions";
 
 export default async function Page(props: PageProps<"/docs/[[...slug]]">) {
 	const params = await props.params;
@@ -21,6 +22,13 @@ export default async function Page(props: PageProps<"/docs/[[...slug]]">) {
 		<DocsPage toc={page.data.toc} full={page.data.full}>
 			<DocsTitle>{page.data.title}</DocsTitle>
 			<DocsDescription>{page.data.description}</DocsDescription>
+			<div className="flex flex-row gap-2 items-center border-b pt-2 pb-6">
+				<LLMCopyButton markdownUrl={`${page.url}.mdx`} />
+				<ViewOptions
+					markdownUrl={`${page.url}.mdx`}
+					githubUrl={`https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/apps/kit/content/docs/${page.path}`}
+				/>
+			</div>
 			<DocsBody>
 				<MDXContent
 					components={getMDXComponents({

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

@@ -56,39 +56,40 @@
 }
 
 .dark {
-	--background: 222.2 84% 4.9%;
-	--foreground: 210 40% 98%;
-	--card: 222.2 84% 4.9%;
-	--card-foreground: 210 40% 98%;
-	--popover: 222.2 84% 4.9%;
-	--popover-foreground: 210 40% 98%;
-	--primary: 210 40% 98%;
-	--primary-foreground: 222.2 47.4% 11.2%;
-	--secondary: 217.2 32.6% 17.5%;
-	--secondary-foreground: 210 40% 98%;
-	--muted: 217.2 32.6% 17.5%;
-	--muted-foreground: 215 20.2% 65.1%;
-	--accent: 217.2 32.6% 17.5%;
-	--accent-foreground: 210 40% 98%;
+	--background: 0 0% 3.9%;
+	--foreground: 0 0% 98%;
+	--card: 0 0% 3.9%;
+	--card-foreground: 0 0% 98%;
+	--popover: 0 0% 3.9%;
+	--popover-foreground: 0 0% 98%;
+	--primary: 0 0% 98%;
+	--primary-foreground: 0 0% 3.9%;
+	--secondary: 0 0% 14.9%;
+	--secondary-foreground: 0 0% 98%;
+	--muted: 0 0% 14.9%;
+	--muted-foreground: 0 0% 63.9%;
+	--accent: 0 0% 14.9%;
+	--accent-foreground: 0 0% 98%;
 	--destructive: 0 62.8% 30.6%;
-	--border: 217.2 32.6% 17.5%;
-	--input: 217.2 32.6% 17.5%;
-	--ring: 212.7 26.8% 83.9%;
+	--border: 0 0% 14.9%;
+	--input: 0 0% 14.9%;
+	--ring: 0 0% 83.1%;
 	--chart-1: 220 70% 50%;
 	--chart-2: 160 60% 45%;
 	--chart-3: 30 80% 55%;
 	--chart-4: 280 65% 60%;
 	--chart-5: 340 75% 55%;
-	--sidebar: 222.2 84% 4.9%;
-	--sidebar-foreground: 210 40% 98%;
-	--sidebar-primary: 220 70% 50%;
-	--sidebar-primary-foreground: 210 40% 98%;
-	--sidebar-accent: 217.2 32.6% 17.5%;
-	--sidebar-accent-foreground: 210 40% 98%;
-	--sidebar-border: 217.2 32.6% 17.5%;
-	--sidebar-ring: 212.7 26.8% 83.9%;
+	--sidebar: 0 0% 3.9%;
+	--sidebar-foreground: 0 0% 98%;
+	--sidebar-primary: 0 0% 98%;
+	--sidebar-primary-foreground: 0 0% 3.9%;
+	--sidebar-accent: 0 0% 14.9%;
+	--sidebar-accent-foreground: 0 0% 98%;
+	--sidebar-border: 0 0% 14.9%;
+	--sidebar-ring: 0 0% 83.1%;
 }
 
+
 @theme inline {
 	--font-sans: var(--font-geist-sans);
 	--font-mono: var(--font-geist-mono);

apps/kit/app/favicon.ico

@@ -0,0 +1,12 @@
+import { source } from '@/lib/source';
+import { getLLMText } from '@/lib/get-llm-text';
+
+// cached forever
+export const revalidate = false;
+
+export async function GET() {
+  const scan = source.getPages().map(getLLMText);
+  const scanned = await Promise.all(scan);
+
+  return new Response(scanned.join('\n\n'));
+}

apps/kit/app/global.css

@@ -0,0 +1,17 @@
+import { type NextRequest, NextResponse } from 'next/server';
+import { getLLMText } from '@/lib/get-llm-text';
+import { source } from '@/lib/source';
+import { notFound } from 'next/navigation';
+export const revalidate = false;
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ slug?: string[] }> },
+) {
+  const { slug } = await params;
+  const page = source.getPage(slug);
+  if (!page) notFound();
+  return new NextResponse(await getLLMText(page));
+}
+export function generateStaticParams() {
+  return source.generateParams();
+}