### Component List - Get Started Source: https://ui.shadcn.com/docs/components/breadcrumb HTML list of links for the 'Get Started' section of the documentation, covering introduction, installation, and other setup-related topics. ```html * [Introduction](/docs) * [Installation](/docs/installation) * [components.json](/docs/components-json) * [Theming](/docs/theming) * [Dark Mode](/docs/dark-mode) * [CLI](/docs/cli) * [Monorepo](/docs/monorepo) * [Open in v0](/docs/v0) * [JavaScript](/docs/javascript) * [Blocks](/docs/blocks) * [Figma](/docs/figma) * [Changelog](/docs/changelog) * [Legacy Docs](/docs/legacy) ``` -------------------------------- ### shadcn/ui Component List - Get Started Source: https://ui.shadcn.com/docs/components/popover Navigation links for the 'Get Started' section of the shadcn/ui documentation, covering introduction, installation, configuration, and advanced topics. ```html * [Introduction](/docs) * [Installation](/docs/installation) * [components.json](/docs/components-json) * [Theming](/docs/theming) * [Dark Mode](/docs/dark-mode) * [CLI](/docs/cli) * [Monorepo](/docs/monorepo) * [Open in v0](/docs/v0) * [JavaScript](/docs/javascript) * [Blocks](/docs/blocks) * [Figma](/docs/figma) * [Changelog](/docs/changelog) * [Legacy Docs](/docs/legacy) ``` -------------------------------- ### Getting Started Guide Source: https://uxpatterns.dev/en/patterns/user-feedback/loading-indicator A guide for developers on how to get started with UX Patterns for Devs, emphasizing effective, accessible, and usable UI components. ```APIDOC Getting Started: Title: Getting Started Description: UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components. ``` -------------------------------- ### Component List - Installation Source: https://ui.shadcn.com/docs/components/breadcrumb HTML list of links for installation guides, covering different frameworks and setups like Next.js, Vite, Laravel, React Router, and manual installation. ```html * [Next.js](/docs/installation/next) * [Vite](/docs/installation/vite) * [Laravel](/docs/installation/laravel) * [React Router](/docs/installation/react-router) * [Remix](/docs/installation/remix) * [Astro](/docs/installation/astro) * [TanStack Start](/docs/installation/tanstack) * [TanStack Router](/docs/installation/tanstack-router) * [Manual Installation](/docs/installation/manual) ``` -------------------------------- ### shadcn/ui Installation Guide Source: https://ui.shadcn.com/docs/components/pagination Instructions for installing shadcn/ui, likely involving a CLI or package manager setup. This section guides users through the initial steps to integrate shadcn/ui into their projects. ```mdx Installation ``` -------------------------------- ### Patterns - Getting Started Source: https://uxpatterns.dev/en/patterns/getting-started Links to the 'Getting Started' pattern, serving as an entry point for exploring UX patterns. ```html [Getting Started](/en/patterns/getting-started) ``` -------------------------------- ### Getting Started Page Source: https://uxpatterns.dev/en/patterns/user-feedback/progress-indicator Documentation for the 'Getting Started' page, which introduces the UX Patterns for Devs resource. It provides a summary and description for developers looking to implement UI components. ```APIDOC Getting Started: title: Getting Started description: UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components filePath: content/en/patterns/getting-started.mdx ``` -------------------------------- ### shadcn/ui Installation Guide Source: https://ui.shadcn.com/docs/components/breadcrumb Instructions on how to install and set up shadcn/ui in your project. This typically involves using a CLI tool to add components. ```markdown Installation ``` -------------------------------- ### Schema Markup for Getting Started Page Source: https://uxpatterns.dev/en/patterns/getting-started This snippet includes JSON-LD schema markup for an Article and BreadcrumbList, providing structured data about the 'Getting Started' page for search engines and accessibility. ```json { "@context": "https://schema.org", "@type": "Article", "headline": "Getting Started", "description": "UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components", "url": "https://uxpatterns.dev/en/patterns/getting-started", "image": "https://uxpatterns.dev/api/og?title=Getting%20Started", "author": { "@type": "Person", "name": "David Dias", "url": "https://thedaviddias.com", "sameAs": [ "https://www.reddit.com/r/UXPatterns/", "https://x.com/thedaviddias", "https://github.com/thedaviddias", "https://linkedin.com/in/thedaviddias" ] }, "publisher": { "@type": "Organization", "name": "UX Patterns for Devs", "url": "https://uxpatterns.dev" }, "mainEntityOfPage": { "@type": "WebPage", "@id": "https://uxpatterns.dev/en/patterns/getting-started" } } ``` ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://uxpatterns.dev/en" }, { "@type": "ListItem", "position": 2, "name": "Patterns", "item": "https://uxpatterns.dev/en/patterns" }, { "@type": "ListItem", "position": 3, "name": "Getting started" } ] } ``` -------------------------------- ### Component List - Registry Source: https://ui.shadcn.com/docs/components/breadcrumb HTML list of links related to the component registry, including getting started, FAQ, examples, and schema definitions. ```html * [Registry](/docs/registry) * [Getting Started](/docs/registry/getting-started) * [FAQ](/docs/registry/faq) * [Open in v0](/docs/registry/open-in-v0) * [Examples](/docs/registry/examples) * [registry.json](/docs/registry/registry-json) * [registry-item.json](/docs/registry/registry-item-json) ``` -------------------------------- ### Installation Instructions Source: https://ui.shadcn.com/docs/components/pagination Provides instructions for installing a component or library, offering both CLI and manual installation methods. ```APIDOC Installation: This section details how to install the component or library. Two methods are provided: 1. **CLI Installation**: Use the command-line interface for a streamlined installation process. (Specific CLI commands are not detailed in the provided text, but the option is presented). 2. **Manual Installation**: Follow manual steps for installation, which may involve copying files or configuring settings directly. (Specific manual steps are not detailed in the provided text, but the option is presented). ``` -------------------------------- ### Getting Started with UX Patterns Source: https://uxpatterns.dev/en/patterns/forms/file-input Introduction to the UX Patterns for Devs resource, guiding developers on implementing effective, accessible, and usable UI components. ```markdown ## Getting Started UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components. ``` -------------------------------- ### shadcn/ui Component List - Installation Source: https://ui.shadcn.com/docs/components/popover Guides for installing shadcn/ui with various popular frameworks and tools, including Next.js, Vite, Laravel, React Router, Remix, and Astro. ```html * [Next.js](/docs/installation/next) * [Vite](/docs/installation/vite) * [Laravel](/docs/installation/laravel) * [React Router](/docs/installation/react-router) * [Remix](/docs/installation/remix) * [Astro](/docs/installation/astro) * [TanStack Start](/docs/installation/tanstack) * [TanStack Router](/docs/installation/tanstack-router) * [Manual Installation](/docs/installation/manual) ``` -------------------------------- ### Install Dialog Component via CLI Source: https://ui.shadcn.com/docs/components/dialog Installs the Dialog component using the shadcn-ui CLI. This command automates the setup process, fetching necessary files and configurations. ```bash npx shadcn@latest add dialog ``` ```bash yarn shadcn@latest add dialog ``` ```bash pnpm dlx shadcn@latest add dialog ``` ```bash bunx --bun shadcn@latest add dialog ``` -------------------------------- ### Install Pagination CLI Source: https://ui.shadcn.com/docs/components/pagination Install the pagination component into your project using the shadcn CLI. ```bash npx shadcn@latest add pagination ``` -------------------------------- ### shadcn/ui Installation Page Source: https://ui.shadcn.com/docs/components/tooltip Details for the installation page of shadcn/ui, including its name and URL. ```markdown name: "Installation" url: "/docs/installation" ``` -------------------------------- ### Getting Started Documentation Source: https://uxpatterns.dev/en/glossary/aria-attributes Provides an introduction to the UX Patterns for Devs resource. It outlines the purpose of the collection and helps developers understand how to implement effective, accessible, and usable UI components. ```APIDOC Getting Started: description: UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components. title: Getting Started filePath: content/en/patterns/getting-started.mdx ``` -------------------------------- ### Dialog Component Installation Source: https://ui.shadcn.com/docs/components/dialog Instructions for installing the Dialog component using either the CLI or manual dependency installation and file copying. ```bash npx shadcn@latest add dialog ``` -------------------------------- ### Install Tooltip via CLI Source: https://ui.shadcn.com/docs/components/tooltip Installs the Tooltip component using the shadcn-ui CLI. ```bash npx shadcn@latest add tooltip ``` -------------------------------- ### Component List - Dark Mode Source: https://ui.shadcn.com/docs/components/breadcrumb HTML list of links for dark mode setup guides, specific to different environments like Next.js, Vite, Astro, and Remix. ```html * [Dark Mode](/docs/dark-mode) * [Next.js](/docs/dark-mode/next) * [Vite](/docs/dark-mode/vite) * [Astro](/docs/dark-mode/astro) * [Remix](/docs/dark-mode/remix) ``` -------------------------------- ### Miro Academy: Getting Started Source: https://www.invisionapp.com/inside-design/comprehensive-guide-designing-ux-buttons/ Official learning resources for new users to understand Miro's core functionalities. ```APIDOC GettingStarted: Academy Description: Learn the basics of using Miro effectively. Access: - Title: Get started with Miro URL: https://academy.miro.com/getting-started-with-miro/ Tag: academy ``` -------------------------------- ### shadcn/ui Monorepo Integration Source: https://ui.shadcn.com/docs/components/breadcrumb Guide on using shadcn/ui components and its CLI within a monorepo setup. ```markdown Monorepo Using shadcn/ui components and CLI in a monorepo. ``` -------------------------------- ### Install Pagination Component Source: https://ui.shadcn.com/docs/components/pagination Installs the pagination component and its dependencies using the pnpm package manager. ```bash pnpm dlx shadcn@latest add pagination ``` -------------------------------- ### Install Select Dependencies Manually Source: https://ui.shadcn.com/docs/components/select Installs the required Radix UI dependency for the Select component when performing a manual installation. ```bash npm install @radix-ui/react-select ``` -------------------------------- ### Next.js Page Structure and Content Rendering Source: https://uxpatterns.dev/en/patterns/getting-started This snippet illustrates the client-side rendering structure for a Next.js page, likely the 'Getting Started' page. It defines the main content area, including references to dynamically loaded components and layout elements. ```javascript self.__next_f.push([ 1, "5:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Article\\\",\\\"headline\\\":\\\"Getting Started\\\",\\\"description\\\":\\\"UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components\\\",\\\"url\\\":\\\"https://uxpatterns.dev/en/patterns/getting-started\\\",\\\"image\\\":\\\"https://uxpatterns.dev/api/og?title=Getting%20Started\\\",\\\"author\\\":{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"David Dias\\\",\\\"url\\\":\\\"https://thedaviddias.com\\\",\\\"sameAs\\\":[\\\"https://www.reddit.com/r/UXPatterns/\\\",\\\"https://x.com/thedaviddias\\\",\\\"https://github.com/thedaviddias\\\",\\\"https://linkedin.com/in/thedaviddias\\\"]},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"UX Patterns for Devs\\\",\\\"url\\\":\\\"https://uxpatterns.dev\\\"},\\"mainEntityOfPage\\\":{\\\"@type\\\":\\\"WebPage\\\",\\\"@id\\\":\\\"https://uxpatterns.dev/en/patterns/getting-started\\\"}}\"}}"],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Home\\\",\\\"item\\\":\\\"https://uxpatterns.dev/en\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Patterns\\\",\\\"item\\\":\\\"https://uxpatterns.dev/en/patterns\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Getting started\\\"}]}\"}}"],[\"$\",\"div\",null,{\"className\":\"nextra-content\",\"children\":[\"$\",\"div\",\"en-patterns-getting-started\",{\"className\":\"x:mx-auto x:flex x:max-w-(--nextra-content-width)\",\"children\":[[\"$\",\"$Ld\",null,{\"toc\":[{\"value\":\"About UX Patterns for Devs\",\"id\":\"about-ux-patterns-for-devs\",\"dept ``` -------------------------------- ### Install Select Component via CLI Source: https://ui.shadcn.com/docs/components/select Installs the Select component into your project using the shadcn/ui CLI tool. ```bash npx shadcn@latest add select ``` -------------------------------- ### Install Tooltip Manually Source: https://ui.shadcn.com/docs/components/tooltip Manually installs the Tooltip component by adding dependencies and copying source code. ```bash npm install @radix-ui/react-tooltip ``` -------------------------------- ### shadcn/ui Component List - Registry Source: https://ui.shadcn.com/docs/components/popover Information about the shadcn/ui registry, including getting started guides, FAQs, examples, and schema definitions for registry.json and registry-item.json. ```html * [Registry](/docs/registry) * [Getting Started](/docs/registry/getting-started) * [FAQ](/docs/registry/faq) * [Open in v0](/docs/registry/open-in-v0) * [Examples](/docs/registry/examples) * [registry.json](/docs/registry/registry-json) * [registry-item.json](/docs/registry/registry-item-json) ``` -------------------------------- ### Getting Started with Miro Templates Source: https://www.invisionapp.com/inside-design/comprehensive-guide-designing-ux-buttons/ Access pre-made frameworks and workflows to accelerate project setup. ```APIDOC GettingStarted: Templates Description: Save time with ready-made frameworks and proven workflows. Access: - Title: Get started with templates URL: https://miro.com/templates/ Image: 4000-plus-templates_image_EN_standard_3_2__1_.png ``` -------------------------------- ### Patterns - UX Books for Developers Source: https://uxpatterns.dev/en/patterns/getting-started Links to a curated list of UX books recommended for developers. ```html [UX Books for Developers](/en/patterns/books) ``` -------------------------------- ### Patterns - When to Use What? Source: https://uxpatterns.dev/en/patterns/getting-started Links to a guide on selecting the appropriate UX pattern for different development scenarios. ```html [When to Use What?](/en/patterns/when-to-use-what) ``` -------------------------------- ### Button Example Markup Source: https://a11y-style-guide.com/style-guide/section-general.html Provides example HTML markup for a button component, demonstrating structure and accessibility considerations like ARIA attributes or descriptive text for icons. ```html Button Example button markup Like Like example button markup A11Yall the things. A11y example button markup ``` -------------------------------- ### Install Dialog Dependencies Manually Source: https://ui.shadcn.com/docs/components/dialog Manually installs the required dependencies for the Dialog component using various package managers. This method is useful for custom setups or when the CLI is not preferred. ```bash npm install @radix-ui/react-dialog ``` ```bash yarn add @radix-ui/react-dialog ``` ```bash pnpm add @radix-ui/react-dialog ``` ```bash bun add @radix-ui/react-dialog ``` -------------------------------- ### Pattern Guide - Choose the Right Pattern Source: https://uxpatterns.dev/en/patterns/getting-started Links to a guide that helps developers select the most appropriate UX pattern for their needs. ```html [Choose the Right Pattern](/en/pattern-guide) ``` -------------------------------- ### Breadcrumb Component Installation and Usage Source: https://ui.shadcn.com/docs/components/breadcrumb Provides instructions for installing the Breadcrumb component using the CLI or manually, along with a basic usage example in TypeScript. It demonstrates how to structure navigation paths for users. ```bash npx shadcn@latest add breadcrumb ``` ```tsx import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb" Home Components Breadcrumb ``` -------------------------------- ### GitHub and Discord Links Source: https://uxpatterns.dev/en/patterns/getting-started Links to the project's GitHub repository and a Discord community for engagement. ```html [Loading...](https://github.com/thedaviddias/ux-patterns-for-developers)[](https://ddias.link/discord) ``` -------------------------------- ### shadcn/ui Introduction Page Source: https://ui.shadcn.com/docs/components/tooltip Details for the main introduction page of shadcn/ui, including its name, description, and URL. ```markdown name: "Introduction" description: "shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code." url: "/docs" ``` -------------------------------- ### Glossary - UX Patterns Glossary Source: https://uxpatterns.dev/en/patterns/getting-started Links to the main glossary page for UX Patterns. ```html [UX Patterns Glossary](/en/glossary) ``` -------------------------------- ### When to Use What Guide Source: https://uxpatterns.dev/en/patterns/user-feedback/loading-indicator A guide for choosing the right UI pattern for specific needs, featuring an icon and marked as 'complete'. ```APIDOC When to Use What?: Title: When to Use What? Description: Guide for choosing the right UI pattern for your needs Icon: Table ``` -------------------------------- ### Install Select Component Source: https://ui.shadcn.com/docs/components/select Provides commands to install the 'select' UI component using various package managers. This typically involves using a CLI tool like 'shadcn-ui' to add the component to your project. ```bash npx shadcn@latest add select ``` ```bash yarn shadcn@latest add select ``` ```bash pnpm dlx shadcn@latest add select ``` ```bash bunx --bun shadcn@latest add select ``` -------------------------------- ### Select with Placeholder Source: https://originui.com/selects This example shows a select component that prominently features a placeholder option. This is ideal for guiding user input when no default selection is appropriate. It includes a list of framework options. ```jsx
``` -------------------------------- ### Basic Pagination Component Usage Source: https://ui.shadcn.com/docs/components/pagination Shows how to import and render the Pagination component along with its constituent parts like PaginationLink, PaginationNext, and PaginationEllipsis. This example illustrates a typical setup for navigating through pages. ```tsx import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" 1 ``` -------------------------------- ### CSS for WAI ARIA Authoring Practices Guide (APG) Styling Source: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-2-tablist/ This CSS block defines styles for navigation elements, layout, and specific components used within the W3C Web Accessibility Initiative (WAI) ARIA Authoring Practices Guide (APG) website. It includes styles for skip links, navigation bars, and resource pages. ```css .nav { background: none; } .nav-related-info { /* blue bar with the "About:" links */ background: #005a9c; color: #fff; } .nav-related-info a { color: #fff !important; } .nav-page-specific { /* light blue bar with page/section specific navigation/pager */ margin-bottom: 1.25em; } .nav a:link, .nav a:visited { color: #036; color: var(--w3c-blue); } .nav a:hover, .nav a:active { color: var(--dk-blue); } .nav-hack.sidebar a:hover, .nav-hack.sidebar a:active { color: var(--dk-blue); text-decoration: underline; } .standalone-resource-about, .standalone-resource-pager { margin: 0; } nav.standalone-resource-about { padding: .5em 0 1.5em 0; font-style: italic; } .nav .standalone-resource-pager ul { align-items: center; } .nav .standalone-resource-pager a, .nav .standalone-resource-pager span { margin-left: 0; margin-right: 1.5em; padding: .5em; } .pager-icon { vertical-align: middle; padding: 0 0 0.15em 0; margin: 0 -0.4em; width: 1.65em; height: 2em; fill: var(--dk-blue) } .category-icon { vertical-align: middle; padding: 0 0.25em 0.25em 0.25em; width: 2em; height: 2em; } .zstandalone-resource-pager { padding: .7em 0; } .standalone-resource-pager zul { display: block; } .standalone-resource-pager zul li { display: inline; } .nav-hack { font-size: .85rem; /*justify-self: end;*/ align-self: start; } .nav-hack ul { list-style: none; border-bottom: 1px solid #BCBCBC; padding-left: 0 } .nav-hack li:not(:first-child){ padding-top: 0.4em; line-height: 1.2; border-top: 1px solid #BCBCBC; } .nav-hack li a { text-decoration: none; } .nav-hack h3 { margin: 0; font-size: 1rem; } .nav-hack p { margin: 0; } h2#sidebar-header { font-size: .95rem; } /* skip link */ .button--skip-link { background-color: var(--gold) !important; border-color: var(--gold) !important; outline-color: currentColor !important; color: var(--off-black) !important; font-weight: 600; font-size: larger; margin: 0 auto; position: absolute; z-index: 20; left: 0; right: 0; top: 0.5em; width: 10em; opacity: 1; transition: transform 0.1875s ease-out, opacity 0.1875s ease-out; } .button--skip-link:not(:focus):not(:hover) { transform: translateY(-4em); opacity: 0; } .standalone-resource-navrule { border:none; border-top: 1px solid grey } .standalone-resource-about ul, .standalone-resource-pager ul { list-style: none; } .standalone-resource-about a, .standalone-resource-pager a, .standalone-resource-about span, .standalone-resource-pager span { margin-left:.8em; margin-right:.8em; } .minimal-header-name a { text-decoration: none; } .minimal-header-name a:hover, .minimal-header-name a:focus { text-decoration: underline; } ``` -------------------------------- ### Skip Link Implementation Source: https://a11y-style-guide.com/style-guide/section-general.html Provides guidance and examples for implementing skip links to improve navigation for screen reader users. It suggests hiding links visually with a focus attribute for sighted keyboard users. ```html Skip to main content
```