12 | {Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ").map((letter) => (
13 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/apps/web/content/patterns/forms/toggle.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Toggle"
3 | summary: "Switch between two states"
4 | description: "Implement toggle switches for binary state control in your web applications. Learn best practices for toggle buttons, state management, and accessibility."
5 | icon: ToggleLeft
6 | status: draft
7 | ---
8 |
9 |
11 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/content/patterns/user-feedback/empty-states.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Empty States"
3 | summary: "Guide users when no content is available"
4 | description: "Create effective empty state experiences in your web applications. Learn best practices for handling no-content scenarios with helpful messaging and clear actions."
5 | icon: CircleAlert
6 | status: draft
7 | ---
8 |
9 | 12 | {title} 13 |
14 |
15 | {description}
16 |
17 |
13 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/apps/gallery/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | export function slugify(text: string): string {
9 | return text
10 | .toLowerCase()
11 | .replace(/\s+/g, "-")
12 | .replace(/[^a-z0-9-]/g, "");
13 | }
14 |
15 | export function formatWebsite(website: string): string {
16 | return website.replace(/^(https?:\/\/)?(www\.)?/, "").replace(/\/$/, "");
17 | }
18 |
19 | export function getPatternSlug(pattern: string): string {
20 | return pattern.toLowerCase().replace(/\s+/g, "-");
21 | }
22 |
--------------------------------------------------------------------------------
/apps/kit/app/llms.mdx/[[...slug]]/route.ts:
--------------------------------------------------------------------------------
1 | import { notFound } from "next/navigation";
2 | import { type NextRequest, NextResponse } from "next/server";
3 | import { getLLMText } from "@/lib/get-llm-text";
4 | import { source } from "@/lib/source";
5 | export const revalidate = false;
6 | export async function GET(
7 | _req: NextRequest,
8 | { params }: { params: Promise<{ slug?: string[] }> },
9 | ) {
10 | const { slug } = await params;
11 | const page = source.getPage(slug);
12 | if (!page) notFound();
13 | return new NextResponse(await getLLMText(page));
14 | }
15 | export function generateStaticParams() {
16 | return source.generateParams();
17 | }
18 |
--------------------------------------------------------------------------------
/packages/constants/src/social.tsx:
--------------------------------------------------------------------------------
1 | import { SiDiscord, SiInstagram, SiX } from "@icons-pack/react-simple-icons";
2 | import { AUTHOR, PROJECT } from "./author";
3 |
4 | interface SocialLink {
5 | label: string;
6 | link: string;
7 | icon?: React.ReactNode;
8 | rel?: "me";
9 | }
10 |
11 | export const SOCIAL_LINKS: SocialLink[] = [
12 | {
13 | label: "Discord",
14 | link: PROJECT.discord,
15 | icon: Loading glossary terms...
;
7 | }
8 |
9 | export function TermsListContainer() {
10 | return (
11 | No glossary terms found.
; 22 | } 23 | 24 | return
18 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/apps/web/examples/patterns/content-management/modal/native.ts:
--------------------------------------------------------------------------------
1 | export const nativeModalExample = `
2 |
3 |
9 |
10 |
11 |
26 | `;
27 |
--------------------------------------------------------------------------------
/apps/web/content/patterns/forms/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Forms",
3 | "description": "Form components and input patterns",
4 | "icon": "FileText",
5 | "pages": [
6 | "autocomplete",
7 | "button",
8 | "checkbox",
9 | "code-confirmation",
10 | "color-picker",
11 | "currency-input",
12 | "date-input",
13 | "date-picker",
14 | "date-range",
15 | "file-input",
16 | "form-validation",
17 | "multi-select-input",
18 | "password",
19 | "phone-number",
20 | "radio",
21 | "rating-input",
22 | "rich-text-editor",
23 | "search-field",
24 | "selection-input",
25 | "signature-pad",
26 | "slider",
27 | "tag-input",
28 | "text-field",
29 | "textarea",
30 | "time-input",
31 | "toggle"
32 | ]
33 | }
34 |
--------------------------------------------------------------------------------
/packages/seo/src/structured-data/breadcrumb.ts:
--------------------------------------------------------------------------------
1 | import type { BreadcrumbItem, SchemaOrgBase } from "../types";
2 | import { StructuredDataGenerator } from "./base";
3 |
4 | export class BreadcrumbSchema extends StructuredDataGenerator {
5 | /**
6 | * Generate BreadcrumbList schema
7 | */
8 | breadcrumbs(items: BreadcrumbItem[]): SchemaOrgBase & Record
16 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/apps/web/content/patterns/forms/slider.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Slider"
3 | summary: "Select values from a range"
4 | description: "Learn how to implement accessible range slider inputs in your web applications. Discover best practices for continuous value selection, touch interactions, and accessibility."
5 | icon: SlidersHorizontal
6 | status: draft
7 | ---
8 |
9 | {message}
17 | {subMessage && ( 18 |{subMessage}
19 | )} 20 | {linkHref && linkText && ( 21 | 25 | {linkText} 26 | 27 | )} 28 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/apps/web/content/patterns/ai-intelligence/ai-error-states.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "AI Error States"
3 | summary: "Handling AI-specific errors"
4 | description: "Learn how to implement AI error states. Discover best practices for rate limits, model errors, and graceful degradation."
5 | icon: CircleAlert
6 | status: draft
7 | ---
8 |
9 |
20 | {label}
21 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/kit/lib/get-llm-text.ts:
--------------------------------------------------------------------------------
1 | import fs from "node:fs/promises";
2 | import type { InferPageType } from "fumadocs-core/source";
3 | import { remarkInclude } from "fumadocs-mdx/config";
4 | import { remark } from "remark";
5 | import remarkGfm from "remark-gfm";
6 | import remarkMdx from "remark-mdx";
7 | import type { source } from "@/lib/source";
8 |
9 | const processor = remark()
10 | .use(remarkMdx)
11 | // needed for Fumadocs MDX
12 | .use(remarkInclude)
13 | .use(remarkGfm);
14 |
15 | export async function getLLMText(page: InferPageType
18 |
21 |
24 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/.github/workflows/link-checker.yml:
--------------------------------------------------------------------------------
1 | name: Links Checker
2 |
3 | on:
4 | repository_dispatch:
5 | workflow_dispatch:
6 |
7 | env:
8 | HUSKY: 0
9 |
10 | jobs:
11 | links-checker:
12 | runs-on: ubuntu-latest
13 | name: Links Checker
14 | permissions:
15 | issues: write
16 |
17 | steps:
18 | - name: Checkout
19 | uses: actions/checkout@v4
20 |
21 | - name: Link Checker
22 | id: lychee
23 | uses: lycheeverse/lychee-action@v2.2.0
24 | with:
25 | args: --config ./lychee.toml --verbose --no-progress .
26 | fail: true
27 |
28 | - name: Create Issue From File
29 | if: env.exit_code != 0
30 | uses: peter-evans/create-issue-from-file@v5
31 | with:
32 | title: Link Checker Report
33 | content-filepath: ./lychee-out.md
34 | labels: report, automated issue
35 |
--------------------------------------------------------------------------------
/apps/web/components/blog/mobile-toc.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Drawer,
5 | DrawerContent,
6 | DrawerHeader,
7 | DrawerTrigger,
8 | } from "@ux-patterns/ui/components/shadcn/drawer";
9 | import { List } from "lucide-react";
10 | import { TableOfContents } from "@/components/blog/table-of-contents";
11 |
12 | export function MobileTableOfContents() {
13 | return (
14 | Table of Contents
22 |
25 |
27 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/apps/kit/constants/footer.ts:
--------------------------------------------------------------------------------
1 | export const FOOTER_GENERAL_LINKS = [
2 | {
3 | path: "/",
4 | label: "Home",
5 | },
6 | {
7 | path: "/docs",
8 | label: "Docs",
9 | },
10 | {
11 | path: "/docs/components",
12 | label: "Components",
13 | },
14 | ];
15 |
16 | export const FOOTER_RESOURCES_LINKS = [
17 | {
18 | path: "/llms.txt",
19 | label: "LLMs",
20 | },
21 | {
22 | path: "/llms-full.txt",
23 | label: "LLMs Full",
24 | },
25 | ];
26 |
27 | export const FOOTER_OPENSOURCE_LINKS = [
28 | {
29 | path: "https://llmstxthub.com/",
30 | label: "LLMs.txt Hub",
31 | rel: "noopener noreferrer",
32 | },
33 | {
34 | path: "https://frontendchecklist.io/",
35 | label: "Front-End Checklist",
36 | rel: "noopener noreferrer",
37 | },
38 | {
39 | path: "https://github.com/thedaviddias/indie-dev-toolkit",
40 | label: "Indie Dev Toolkit",
41 | rel: "noopener noreferrer",
42 | },
43 | ];
44 |
--------------------------------------------------------------------------------
/apps/gallery/lib/image-utils.ts:
--------------------------------------------------------------------------------
1 | import type { Entry } from "./types";
2 |
3 | /**
4 | * Constructs the image path based on the entry's website
5 | * Path structure: /website/[website-name]/[filename]
6 | */
7 | export function getImagePath(entry: Entry): string {
8 | // If the media.src is already a full URL or data URL, return as is
9 | if (
10 | entry.media.src.startsWith("http") ||
11 | entry.media.src.startsWith("data:")
12 | ) {
13 | return entry.media.src;
14 | }
15 |
16 | // If the media.src is already a full path starting with /, return as is
17 | if (entry.media.src.startsWith("/")) {
18 | return entry.media.src;
19 | }
20 |
21 | // Construct the path based on website
22 | const website = entry.website; // e.g., "klingai.com"
23 | const filename = entry.media.src; // e.g., "001.png"
24 |
25 | // Build the path: /web/[website-name]/[filename]
26 | return `/web/${website}/${filename}`;
27 | }
28 |
--------------------------------------------------------------------------------
/apps/gallery/components/common/pattern-badge.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { getCategoryForPattern } from "@/lib/url-utils";
3 | import { cn } from "@/lib/utils";
4 |
5 | interface PatternBadgeProps {
6 | pattern: string;
7 | platform: string;
8 | className?: string;
9 | }
10 |
11 | export function PatternBadge({
12 | pattern,
13 | platform,
14 | className,
15 | }: PatternBadgeProps) {
16 | const normalizedPattern = pattern.toLowerCase().replace(/\s+/g, "-");
17 | const category = getCategoryForPattern(normalizedPattern) || "navigation";
18 | const href = `/${platform}/${category}/${normalizedPattern}`;
19 |
20 | return (
21 |
28 | {pattern}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/components/pattern-comparison/decision-flow-section.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { LazyDecisionFlow } from "@/components/decision-flow/lazy-decision-flow";
4 | import type {
5 | DecisionEdge,
6 | DecisionNode,
7 | } from "@/components/decision-flow/types";
8 |
9 | interface DecisionFlowSectionProps {
10 | title: string;
11 | nodes: DecisionNode[];
12 | edges: DecisionEdge[];
13 | }
14 |
15 | export function DecisionFlowSection({
16 | title,
17 | nodes,
18 | edges,
19 | }: DecisionFlowSectionProps) {
20 | return (
21 |
22 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/apps/gallery/lib/types.ts:
--------------------------------------------------------------------------------
1 | export interface Entry {
2 | id: string;
3 | title: string;
4 | pattern: string;
5 | platform: "web" | "mobile";
6 | type: "do" | "dont";
7 | website: string;
8 | media: {
9 | type: "image" | "video";
10 | src: string;
11 | };
12 | tags?: string[];
13 | content: string;
14 | source?: {
15 | url: string;
16 | capturedAt: string;
17 | };
18 | // Internal fields for content processing
19 | slug: string;
20 | filePath: string;
21 | body?: any; // MDX compiled body for rendering
22 | }
23 |
24 | export interface SearchIndex {
25 | id: string;
26 | title: string;
27 | pattern: string;
28 | platform: string;
29 | type: string;
30 | website: string;
31 | tags: string[];
32 | content: string;
33 | slug: string;
34 | }
35 |
36 | export type FilterState = {
37 | platform: "all" | "web" | "mobile";
38 | type: "all" | "do" | "dont";
39 | pattern: string | null;
40 | search: string;
41 | };
42 |
--------------------------------------------------------------------------------
/packages/hooks/src/use-config.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | type Config = {
4 | packageManager: "npm" | "yarn" | "pnpm" | "bun";
5 | };
6 |
7 | const defaultConfig: Config = {
8 | packageManager: "pnpm",
9 | };
10 |
11 | export function useConfig() {
12 | const [config, setConfig] = useStateInteractive Decision Flow
23 |
24 |
31 |
17 | {/** biome-ignore lint/performance/noImgElement: no need to optimize */}
18 | 
23 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/components/blog/hash-scroll-handler.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect } from "react";
4 |
5 | export function HashScrollHandler() {
6 | useEffect(() => {
7 | const handleHashScroll = () => {
8 | const hash = window.location.hash;
9 | if (hash) {
10 | const element = document.getElementById(hash.slice(1));
11 | if (element) {
12 | const offset = 80;
13 | const elementPosition = element.getBoundingClientRect().top;
14 | const offsetPosition = elementPosition + window.pageYOffset - offset;
15 | window.scrollTo({
16 | top: offsetPosition,
17 | behavior: "smooth",
18 | });
19 | }
20 | }
21 | };
22 | if (window.location.hash) {
23 | setTimeout(handleHashScroll, 100);
24 | }
25 | window.addEventListener("hashchange", handleHashScroll);
26 |
27 | return () => {
28 | window.removeEventListener("hashchange", handleHashScroll);
29 | };
30 | }, []);
31 |
32 | return null;
33 | }
34 |
--------------------------------------------------------------------------------
/packages/registry/registry/default/blocks/button/button-disabled.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @registry
3 | * @name button-disabled
4 | * @title Disabled Button States
5 | * @type registry:block
6 | * @description Button in disabled states with different approaches
7 | * @categories ["buttons", "states", "accessibility"]
8 | * @tags ["disabled", "states", "accessibility", "aria", "interactive"]
9 | * @registryDependencies ["button"]
10 | */
11 | import { Button } from "@/ui/button";
12 |
13 | export default function ButtonDisabled() {
14 | return (
15 |
24 |
31 | 25 | {author.name} 26 |
27 |28 | {author.position} 29 |
30 |
16 |
17 |
20 |
21 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/packages/ui/src/components/custom/pattern-badge.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@ux-patterns/ui/lib/utils";
2 | import type { ReactNode } from "react";
3 |
4 | export interface PatternBadgeProps {
5 | variant: "new" | "updated";
6 | className?: string;
7 | children?: ReactNode;
8 | }
9 |
10 | export function PatternBadge({
11 | variant,
12 | className,
13 | children,
14 | }: PatternBadgeProps) {
15 | const variantStyles = {
16 | new: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
17 | updated: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
18 | };
19 |
20 | const label = children || (variant === "new" ? "New" : "Updated");
21 |
22 | return (
23 |
31 | {label}
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/apps/web/components/component-preview-wrapper.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 |
5 | interface PageMetadata {
6 | title?: string;
7 | description?: string;
8 | [key: string]: unknown;
9 | }
10 |
11 | // Create a context to pass metadata to components
12 | const MetadataContext = React.createContext
15 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/apps/web/components/glossary/term-card.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import defaultMdxComponents from "fumadocs-ui/mdx";
4 |
5 | interface TermCardProps {
6 | title: string;
7 | description: string;
8 | category: string[];
9 | url: string;
10 | }
11 |
12 | export function TermCard({ title, description, category, url }: TermCardProps) {
13 | const Card = defaultMdxComponents.Card;
14 |
15 | return (
16 | © {new Date().getFullYear()} UX Patterns Kit
16 |17 | Made with{" "} 18 | 19 | ♥ 20 | {" "} 21 | by{" "} 22 | 29 | David Dias 30 | {" "} 31 | for the Open-Source Community. 32 |
33 |
18 |
34 | 19 | {description} 20 |
21 | {category.length > 0 && ( 22 |
23 | {category.map((cat) => (
24 |
28 | {cat}
29 |
30 | ))}
31 |
32 | )}
33 |
18 |
22 |
26 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/apps/gallery/components/footer/footer-copyright.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AUTHOR } from "@ux-patterns/constants/author";
4 | import { usePlausible } from "next-plausible";
5 | import { trackFooterClick } from "@/lib/tracking";
6 |
7 | export const FooterCopyright = () => {
8 | const plausible = usePlausible();
9 |
10 | const handleAuthorClick = () => {
11 | trackFooterClick(plausible, "social", AUTHOR.name);
12 | };
13 |
14 | return (
15 |
16 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/apps/gallery/content/entries/carousel/klingai/carousel-auto-play.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: "kling002"
3 | title: "Auto-playing carousel without pause controls"
4 | pattern: "Carousel"
5 | platform: "web"
6 | type: "dont"
7 | website: "klingai.com"
8 | media:
9 | type: "image"
10 | src: "002.png"
11 | tags: ["accessibility", "carousel", "autoplay", "controls"]
12 | source:
13 | url: "https://klingai.com"
14 | capturedAt: "2024-12-01"
15 | ---
16 |
17 | This carousel automatically advances without any pause or stop controls, violating WCAG 2.2.2 (Pause, Stop, Hide) and preventing users from reading content at their own pace.
18 |
19 | ## The issue
20 |
21 | Users cannot control the carousel's auto-rotation, making it impossible for those with reading difficulties or cognitive disabilities to consume the content properly.
22 |
23 | ## Learn more
24 |
25 | See the [Carousel pattern documentation](/patterns/content-management/carousel#auto-play-without-controls) for why auto-play without controls is problematic and how to implement accessible carousel controls.
--------------------------------------------------------------------------------
/apps/kit/next.config.mjs:
--------------------------------------------------------------------------------
1 | import { createMDX } from "fumadocs-mdx/next";
2 | import { withPlausibleProxy } from "next-plausible";
3 |
4 | const withMDX = createMDX();
5 |
6 | /** @type {import('next').NextConfig} */
7 | const config = {
8 | reactStrictMode: true,
9 | images: {
10 | remotePatterns: [
11 | {
12 | protocol: "https",
13 | hostname: "www.google.com",
14 | pathname: "/s2/favicons",
15 | },
16 | {
17 | protocol: "https",
18 | hostname: "images.unsplash.com",
19 | pathname: "/**",
20 | },
21 | ],
22 | },
23 | async rewrites() {
24 | return [
25 | {
26 | source: "/docs/:path*.mdx",
27 | destination: "/llms.mdx/:path*",
28 | },
29 | ];
30 | },
31 | webpack: (config) => {
32 | // Ignore OpenTelemetry instrumentation warnings
33 | config.ignoreWarnings = [
34 | {
35 | module: /@opentelemetry\/instrumentation/,
36 | message: /Critical dependency/,
37 | },
38 | ];
39 | return config;
40 | },
41 | };
42 |
43 | export default withPlausibleProxy()(withMDX(config));
44 |
--------------------------------------------------------------------------------
/apps/web/components/footer/footer-copyright.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AUTHOR } from "@ux-patterns/constants/author";
4 | import { usePlausible } from "next-plausible";
5 | import { trackFooterClick } from "@/lib/tracking";
6 |
7 | export const FooterCopyright = () => {
8 | const plausible = usePlausible();
9 |
10 | const handleAuthorClick = () => {
11 | trackFooterClick(plausible, "social", AUTHOR.name);
12 | };
13 |
14 | return (
15 | © {new Date().getFullYear()} UX Patterns for Devs
17 |18 | Made with{" "} 19 | 20 | ♥ 21 | {" "} 22 | by{" "} 23 | 30 | {AUTHOR.name} 31 | {" "} 32 | for the Open-Source Community. 33 |
34 |
16 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/apps/web/utils/get-glossary-terms.ts:
--------------------------------------------------------------------------------
1 | import { source } from "@/lib/source";
2 |
3 | export interface GlossaryTerm {
4 | title: string;
5 | description: string;
6 | category: string[];
7 | slug: string;
8 | url: string;
9 | }
10 |
11 | export async function getGlossaryTerms(): Promise© {new Date().getFullYear()} UX Patterns for Devs
17 |18 | Made with{" "} 19 | 20 | ♥ 21 | {" "} 22 | by{" "} 23 | 30 | {AUTHOR.name} 31 | {" "} 32 | for the Open-Source Community. 33 |
34 |{title}
26 |
27 | {"by"}{" "}
28 | {authors.map((author) => (
29 |
30 |
34 | {author.name}
35 |
36 |
37 | ))}
38 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",
3 | "vcs": {
4 | "enabled": true,
5 | "clientKind": "git",
6 | "useIgnoreFile": true
7 | },
8 | "files": {
9 | "ignoreUnknown": true,
10 | "includes": [
11 | "**",
12 | "!**/public/_pagefind",
13 | "!**/public/r",
14 | "!**/.next",
15 | "!**/dist",
16 | "!**/build",
17 | "!**/node_modules",
18 | "!**/.source",
19 | "!**/packages/registry/.generated",
20 | "!**/apps/kit/public/r/registry.json",
21 | "!**/packages/registry/registry",
22 | "!**/apps/kit/public/r/",
23 | "!**/coverage",
24 | "!**/.turbo",
25 | "!**/*.css"
26 | ]
27 | },
28 | "linter": {
29 | "enabled": true,
30 | "rules": {
31 | "recommended": true,
32 | "suspicious": {
33 | "noExplicitAny": "off"
34 | },
35 | "security": {
36 | "noDangerouslySetInnerHtml": "off"
37 | }
38 | }
39 | },
40 | "formatter": {
41 | "enabled": true,
42 | "indentStyle": "tab"
43 | },
44 | "css": {
45 | "linter": {
46 | "enabled": false
47 | }
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/packages/registry/registry/default/blocks/button/button-full-width.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @registry
3 | * @name button-full-width
4 | * @title Full-Width Buttons
5 | * @type registry:block
6 | * @description Button with full width styling for prominent actions
7 | * @categories ["buttons", "layout", "full-width"]
8 | * @tags ["full-width", "wide", "layout", "prominent", "mobile"]
9 | * @registryDependencies ["button"]
10 | */
11 | import { Button } from "@/ui/button";
12 |
13 | export default function ButtonFullWidth() {
14 | return (
15 |
16 |
17 |
20 |
23 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/content/patterns/data-display/card-grid.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Card Grid"
3 | summary: "Display content in a responsive card layout"
4 | description: "Learn how to implement card grids for content display. Discover best practices for responsive layouts, card designs, and grid systems."
5 | icon: Grid3x3
6 | status: draft
7 | ---
8 |
9 | import { GuidesBanner } from "@/components/guides-banner";
10 |
11 |
24 |
25 |
28 |
29 |
10 |
16 | Get Started
17 |
19 |
25 | Browse Patterns
26 |
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/packages/registry/registry/default/blocks/button/button-icon-right.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @registry
3 | * @name button-icon-right
4 | * @title Button with Right Icons
5 | * @type registry:block
6 | * @description Button with icons positioned on the right side
7 | * @categories ["buttons", "icons", "layout"]
8 | * @tags ["icons", "right", "layout", "lucide", "positioning", "navigation"]
9 | * @dependencies ["lucide-react"]
10 | * @registryDependencies ["button"]
11 | */
12 | import { ArrowRight, ChevronRight, ExternalLink } from "lucide-react";
13 | import { Button } from "@/ui/button";
14 |
15 | export default function ButtonIconRight() {
16 | return (
17 |
18 |
22 |
26 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/apps/web/components/pattern-guide-list.tsx:
--------------------------------------------------------------------------------
1 | import { getPageTreePeers } from "fumadocs-core/server";
2 | import defaultMdxComponents from "fumadocs-ui/mdx";
3 | import { source } from "@/lib/source";
4 |
5 | export function PatternGuideList() {
6 | // Get all pages in the pattern-guide directory
7 | const peerPages = getPageTreePeers(source.pageTree, "/pattern-guide");
8 |
9 | // Filter out the index page and separator items
10 | const guidePages = peerPages.filter(
11 | (page) =>
12 | page.url !== "/pattern-guide" &&
13 | typeof page.name === "string" &&
14 | !page.name.startsWith("---") &&
15 | page.url.startsWith("/pattern-guide/"),
16 | );
17 |
18 | const Cards = defaultMdxComponents.Cards;
19 | const Card = defaultMdxComponents.Card;
20 |
21 | return (
22 |
3 |
13 |
14 |
30 | `;
31 |
--------------------------------------------------------------------------------
/apps/kit/components/footer/footer-link.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Link from "next/link";
4 | import { usePlausible } from "next-plausible";
5 | import { trackFooterClick } from "@/lib/tracking";
6 |
7 | interface FooterLinkProps {
8 | label: string;
9 | path?: string;
10 | shortlink?: string;
11 | rel?: string;
12 | linkType: "general" | "resource" | "social";
13 | }
14 |
15 | export const FooterLink = ({
16 | label,
17 | path,
18 | shortlink,
19 | rel,
20 | linkType,
21 | }: FooterLinkProps) => {
22 | const plausible = usePlausible();
23 |
24 | const handleClick = () => {
25 | trackFooterClick(plausible, linkType, label);
26 | };
27 |
28 | // Merge rel attribute to preserve security tokens for external links
29 | const mergedRel = rel ? `${rel} noopener noreferrer` : undefined;
30 |
31 | return (
32 |
38 | {label}
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/apps/gallery/lib/search-context.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createContext, type ReactNode, useContext, useState } from "react";
4 |
5 | interface SearchContextType {
6 | isSearchOpen: boolean;
7 | openSearch: () => void;
8 | closeSearch: () => void;
9 | }
10 |
11 | const SearchContext = createContext4 | This is the visible content... 5 | 8 |
9 | 12 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/apps/kit/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import { cva, type VariantProps } from "class-variance-authority";
2 |
3 | const variants = {
4 | primary: "bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80",
5 | outline: "border hover:bg-fd-accent hover:text-fd-accent-foreground",
6 | ghost: "hover:bg-fd-accent hover:text-fd-accent-foreground",
7 | secondary:
8 | "border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground",
9 | } as const;
10 |
11 | export const buttonVariants = cva(
12 | "inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none",
13 | {
14 | variants: {
15 | variant: variants,
16 | // fumadocs use `color` instead of `variant`
17 | color: variants,
18 | size: {
19 | sm: "gap-1 px-2 py-1.5 text-xs",
20 | icon: "p-1.5 [&_svg]:size-5",
21 | "icon-sm": "p-1.5 [&_svg]:size-4.5",
22 | "icon-xs": "p-1 [&_svg]:size-4",
23 | },
24 | },
25 | },
26 | );
27 |
28 | export type ButtonProps = VariantProps
13 | {filteredEntries.length === 0 ? (
14 | Loading gallery...
28 | }
29 | >
30 | 21 | {filteredEntries.length}{" "} 22 | {filteredEntries.length === 1 ? "example" : "examples"} 23 |
24 | 25 |
13 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/packages/registry/test-setup.ts:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom";
2 | import "vitest-axe/extend-expect";
3 | import { vi } from "vitest";
4 |
5 | // Mock window.matchMedia
6 | Object.defineProperty(window, "matchMedia", {
7 | writable: true,
8 | value: vi.fn().mockImplementation((query) => ({
9 | matches: false,
10 | media: query,
11 | onchange: null,
12 | addListener: vi.fn(),
13 | removeListener: vi.fn(),
14 | addEventListener: vi.fn(),
15 | removeEventListener: vi.fn(),
16 | dispatchEvent: vi.fn(),
17 | })),
18 | });
19 |
20 | // Mock IntersectionObserver
21 | class MockIntersectionObserver implements IntersectionObserver {
22 | readonly root = null;
23 | readonly rootMargin = "";
24 | readonly thresholds = [];
25 | observe = vi.fn();
26 | unobserve = vi.fn();
27 | disconnect = vi.fn();
28 | takeRecords = vi.fn(() => []);
29 | }
30 | vi.stubGlobal("IntersectionObserver", MockIntersectionObserver as any);
31 |
32 | // Mock ResizeObserver
33 | class MockResizeObserver implements ResizeObserver {
34 | observe = vi.fn();
35 | unobserve = vi.fn();
36 | disconnect = vi.fn();
37 | }
38 | vi.stubGlobal("ResizeObserver", MockResizeObserver as any);
39 |
--------------------------------------------------------------------------------
/apps/web/components/suggest-pattern.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { PROJECT } from "@ux-patterns/constants/author";
4 | import { useId } from "react";
5 |
6 | import { TRACKING_CLASSES } from "@/lib/tracking";
7 | import { LinkCustom } from "./link-custom";
8 |
9 | export const SuggestPattern = () => {
10 | const suggestPatternTitleId = useId();
11 |
12 | return (
13 |
14 |
32 |
15 |
17 |
18 |
31 | 19 | Educational Purpose:{" "} 20 | These examples are shown for learning UX patterns, not to criticize 21 | companies or teams.{" "} 22 | 26 | Read our disclaimer 27 | {" "} 28 | for more information. 29 |
30 |21 | Got a pattern request? 22 |
23 |24 | Let us know, and we'll add it! 25 |
26 |