### Install Core Dependencies Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/app/(docs-page)/get-started/page.mdx Instructions to install necessary packages like `motion`, `clsx`, and `tailwind-merge` using npm. These dependencies are required as most UI-LAYOUT components utilize `motion` and `tailwindcss`. ```bash npm install motion clsx tailwind-merge ``` -------------------------------- ### Install Swapy Package Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/swapy.mdx Instructions to install the Swapy library using npm. ```bash npm install swapy ``` -------------------------------- ### Install Mousetrail Component via CLI Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/image-mousetrail.mdx This snippet demonstrates how to quickly add the `mousetrail` component to your project using the `uilayouts` command-line interface. It supports various Node.js package managers like pnpm, npm, yarn, and bun, simplifying the setup process. ```pnpm npx uilayouts add mousetrail ``` ```npm npx uilayouts add mousetrail ``` ```yarn npx uilayouts add mousetrail ``` ```bun npx uilayouts add mousetrail ``` -------------------------------- ### Install Framer Motion Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/faqs.mdx Installs the Framer Motion library, a dependency for creating animated UI components. ```bash npm install motion ``` -------------------------------- ### CSS Custom Properties for Theming (Light and Dark Mode) Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/app/(docs-page)/get-started/page.mdx Defines a comprehensive set of CSS custom properties (variables) for managing colors, borders, radii, and syntax highlighting tokens. It includes distinct sets for both light (`:root`) and dark (`.dark`) themes, allowing for easy theming and consistency across the UI. ```css :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --codebg: #f1f1f1f0; --primary-base: #fcfcfc; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --ch-0: light; --ch-1: #6e7781; --ch-2: #0550ae; --ch-3: #953800; --ch-4: #24292f; --ch-5: #8250df; --ch-6: #116329; --ch-7: #cf222e; --ch-8: #0a3069; --ch-9: #82071e; --ch-10: #f6f8fa; --ch-11: #ffebe9; --ch-12: #dafbe1; --ch-13: #ffd8b5; --ch-14: #eaeef2; --ch-15: #57606a; --ch-16: #ffffff; --ch-17: #eaeef280; --ch-18: #fdff0033; --ch-19: #1a85ff; --ch-20: #add6ff; --ch-21: #0969da; --ch-22: #f8fafc; --ch-23: #d1d5db; --ch-24: #8c959f; --ch-25: #afb8c133; --ch-26: #ffffffe6; /* Syntax Highlighting Colors (Light Mode) */ --token-null: #000000; --token-operator: #000000; --token-boolean: #000000; --token-number: #000000; --token-property: #fdcc59; --token-tag: #f7801f; --token-punctuation: #000000; --token-template-string: #5bf8ee; --token-script: #ffcb8b; --token-selector: #c85e7c; --token-attr-name: #b392f0; --token-attr-value: #008422; --token-function-variable: #b392f0; --token-black: #000000; } .dark { --background: 228 86% 5%; --foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; --radius: 0.5rem; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --codebg: #030608; --primary-base: #0a0a0a; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --ch-0: dark; --ch-1: #a1a1aa; --ch-2: #7dd3fc; --ch-3: #fb923c; --ch-4: #cbd5e1; --ch-5: #d8b4fe; --ch-6: #86efac; --ch-7: #f87171; --ch-8: #93c5fd; --ch-9: #fca5a5; --ch-10: #eff6ff; --ch-11: #450a0a; --ch-12: #052e16; --ch-13: #451a03; --ch-14: #111827; --ch-15: #a1a1aa; --ch-16: #0a0a0a; --ch-17: #6b72801a; --ch-18: #ffffff0b; --ch-19: #3b82f6; --ch-20: #155e75; --ch-21: #2563eb; --ch-22: #171717; --ch-23: #404040; --ch-24: #6b7280; --ch-25: #6b728066; --ch-26: #171717e6; /* Syntax Highlighting Colors (Dark Mode) */ --token-null: #ffffff; --token-operator: #ffffff; --token-boolean: #ffffff; --token-number: #ffffff; --token-property: #fdcc59; --token-tag: #66befd; --token-punctuation: #ffffff; --token-template-string: #5bf8ee; --token-script: #ffcb8b; --token-selector: #c85e7c; --token-attr-name: #b392f0; --token-attr-value: #52b7ff; --token-function-variable: #b392f0; --token-black: #ffffff; } ``` -------------------------------- ### Install React Three.js Core Dependencies Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/r3f-blob.mdx This command installs the essential npm packages required for building 3D applications with React Three Fiber: `three` (the core Three.js library), `@react-three/fiber` (React renderer for Three.js), and `@react-three/drei` (a collection of useful helpers for React Three Fiber). ```bash npm install three @react-three/fiber @react-three/drei ``` -------------------------------- ### Install Motion Library Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/media-modal.mdx Provides instructions to install the 'motion' animation library using npm, a package manager for JavaScript. ```bash npm install motion ``` -------------------------------- ### Install Core Dependencies for UI LAYOUTs Source: https://github.com/ui-layouts/uilayouts/blob/main/README.md This command installs essential dependencies like `motion`, `clsx`, and `tailwind-merge` required for UI LAYOUTs components, which heavily rely on `framer-motion` and `tailwindcss`. Ensure `tailwindcss` is already installed. ```bash npm install motion clsx tailwind-merge ``` -------------------------------- ### Install Motion Library using npm Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/github-button.mdx This snippet provides the command to install the 'motion' animation library, a dependency for the UI components, using npm. It's a standard package installation command for JavaScript/TypeScript projects. ```bash npm install motion ``` -------------------------------- ### Install Vaul Library for Drawer Component Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/responsive-sidebar.mdx Instructions to install the `vaul` library, which is a core dependency for the responsive sidebar/drawer component. This command should be run in your project's terminal. ```bash npm install vaul ``` -------------------------------- ### Install Dependencies for Responsive Header Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/responsive-header.mdx Instructions to install the necessary npm packages, 'motion' and 'vaul', which are required for the responsive header component's animations and drawer functionality. ```bash npm install motion vaul ``` -------------------------------- ### Install Required Libraries for Drawer Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/responsive-drawer.mdx Installs `motion` for animations and `vaul` for mobile drawer functionality, which are core dependencies for the responsive drawer component. ```bash npm install motion vaul ``` -------------------------------- ### Install Motion and Utils Libraries Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/scroll-text.mdx Installs the necessary `motion` and `@motionone/utils` packages using npm, which are required for the text marquee animation component. ```bash npm install motion @motionone/utils ``` -------------------------------- ### Install motion library dependency Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/blocks.mdx This command installs the 'motion' library, which is a common dependency for creating interactive UI elements and animations in React applications. ```bash npm install motion ``` -------------------------------- ### Install project dependencies using pnpm Source: https://github.com/ui-layouts/uilayouts/blob/main/CONTRIBUTING.md Command to install all required project dependencies using the pnpm package manager, ensuring all necessary libraries and tools are available for development. ```bash pnpm install ``` -------------------------------- ### Install 'motion' library dependency Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/magnified-doc.mdx This snippet provides the command to install the 'motion' library, which is a required dependency for the interactive features of the Magnified Docs component. ```bash npm install motion ``` -------------------------------- ### Install Dependencies for Randomized Text Effect Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/randomized-text-effect.mdx Instructions to install the necessary npm packages for the randomized text unveil component, including `motion` and `@motionone/utils`. ```bash npm install motion @motionone/utils ``` -------------------------------- ### Install Color Picker Component Dependency Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/color-picker.mdx Provides the command to install `react-colorful`, a key dependency for the interactive color picker component, using npm. ```bash npm install react-colorful ``` -------------------------------- ### Install Motion Library Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/tabs.mdx Installs the 'motion' library, a dependency for the UI components, using npm. This library is essential for the animation capabilities of the Tabs component. ```bash npm install motion ``` -------------------------------- ### Install Framer Motion Library Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/drag-items.mdx Installs the Framer Motion library using npm, which is a key dependency for implementing the draggable item component. ```bash npm install motion ``` -------------------------------- ### Install Dependencies for Text Marquee Component Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/text-marquee.mdx Instructions to install the necessary npm packages for the text marquee animation component, including motion and motionone/utils. ```bash npm install motion @motionone/utils ``` -------------------------------- ### Install React Mesh Gradient Package Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/bg-mesh-gradient.mdx Instructions for installing the necessary npm packages: `@johnn-e/react-mesh-gradient` for the mesh gradient component and `nice-color-palettes` for pre-defined color schemes. ```bash npm install @johnn-e/react-mesh-gradient nice-color-palettes ``` -------------------------------- ### Install Framer Motion npm Package Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/stacking-card.mdx This command installs the `framer-motion` library, a production-ready motion library for React, which is essential for implementing the animations and transitions demonstrated in the UI section component. ```bash npm install motion ``` -------------------------------- ### Install Motion Library Dependency Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/animated-beam.mdx Installs the `motion` library, a required dependency for the `AnimatedBeam` component, using the npm package manager. ```bash npm install motion ``` -------------------------------- ### Install Animation Library Dependency Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/image-tabs.mdx This snippet shows how to install the 'motion' library using npm, which is a required dependency for the animation features within the UI layout components. ```bash npm install motion ``` -------------------------------- ### Install Framer Motion Dependency Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/dialog.mdx Installs the 'motion' library, a core dependency for Framer Motion, which is required for the animated dialog component's smooth transitions and interactive effects. ```bash npm install motion ``` -------------------------------- ### Install UI Layouts Dependencies Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/range-slider.mdx Installs the necessary npm packages for the UI layouts, including React components from '@number-flow/react' and slider primitives from '@radix-ui/react-slider'. ```bash npm install @number-flow/react @radix-ui/react-slider ``` -------------------------------- ### Utility Function for Class Merging (cn) Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/app/(docs-page)/get-started/page.mdx A utility function named `cn` that combines `clsx` and `tailwind-merge` to conditionally join CSS class names and resolve potential Tailwind CSS conflicts. This function is recommended to be added to a `utils.ts` file for reusability. ```tsx import { type ClassValue, clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } ``` -------------------------------- ### Example FAQ Data Structure Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/faqs.mdx Defines an array of objects, each representing an FAQ item with a title, description, and an image URL, suitable for populating an accordion component. ```jsx const tabs = [ { "title": "How do UI components improve UX?", "description": "UI components can improve UX by providing familiar, consistent interactions that make it easy for users to navigate and interact with an application.", "imageUrl": "https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format" }, { "title": "Common UI component design challenges?", "description": "Some common challenges include maintaining consistency across different devices and screen sizes, ensuring compatibility with various browsers and assistive technologies, and balancing flexibility with ease of use.", "imageUrl": "https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format" }, { "title": "Ensuring UI component responsiveness?", "description": " Developers can ensure the responsiveness of UI components by using techniques such as fluid layouts, flexible grids, and media queries to adapt the components to different screen sizes and orientations.", "imageUrl": "https://images.unsplash.com/photo-1693581176773-a5f2362209e6?q=80&w=1200&auto=format" } ]; ``` -------------------------------- ### React Hook for Media Queries (useMediaQuery) Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/app/(docs-page)/get-started/page.mdx A custom React hook, `useMediaQuery`, designed to allow React components to dynamically react to changes in CSS media queries. It provides a boolean value indicating whether the specified media query currently matches, updating automatically when the match status changes. ```tsx import { useEffect, useState } from 'react'; export function useMediaQuery(query: string) { const [value, setValue] = useState(false); useEffect(() => { function onChange(event: MediaQueryListEvent) { setValue(event.matches); } const result = matchMedia(query); result.addEventListener('change', onChange); setValue(result.matches); return () => result.removeEventListener('change', onChange); }, [query]); return value; } ``` -------------------------------- ### Create and Position a Textured Mesh in Three.js Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/image-ripple-effect.mdx This example illustrates how to create a 3D plane with a loaded texture in Three.js. It involves using `useTexture` to get the image, creating a `THREE.MeshBasicMaterial` with the texture, and then instantiating a `THREE.Mesh` with a `geometry`. The snippet also shows how to precisely control the mesh's position and scale within the 3D scene using `viewport` dimensions. ```JSX const texture1 = useTexture('/picture3.jpeg'); const material1 = new THREE.MeshBasicMaterial({ map: texture1 }); const image1 = new THREE.Mesh(geometry, material1); image1.position.x = -0.0 * viewport.width; image1.position.y = 40; image1.position.z = 1; image1.scale.x = viewport.width / 4; image1.scale.y = viewport.width / 3.2; ``` -------------------------------- ### List Available UI Components with uilayouts CLI Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/cli/README.md Use this command to display a list of all UI components available in the `uilayouts` registry. This helps in discovering components before adding them to your project. ```bash npx uilayouts list ``` -------------------------------- ### Install Motion Library Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/scroll-animation.mdx Installs the `motion` library, a dependency for the `ScrollElement` component, enabling advanced animation capabilities. ```bash npm install motion ``` -------------------------------- ### Install Core Dependencies for UI Layouts Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/file-upload.mdx This `npm install` command adds `sonner` for toast notifications and `react-dropzone` for drag-and-drop file upload capabilities, which are essential dependencies for the UI layouts project. ```bash npm install sonner react-dropzone ``` -------------------------------- ### Default Output Path for Downloaded Components Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/cli/README.md After a component is successfully downloaded, it will be placed in this standardized directory structure within your project, ensuring consistent organization. ```bash components/ui-layouts/ ``` -------------------------------- ### Install Dependencies for Sparkles Component Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/sparkles.mdx This command installs the required `tsparticles` packages for the Sparkles component. These libraries handle the particle animation logic. ```bash npm install @tsparticles/react @tsparticles/slim ``` -------------------------------- ### Clone the ui-layout repository Source: https://github.com/ui-layouts/uilayouts/blob/main/CONTRIBUTING.md Instructions to clone the ui-layout repository from GitHub to your local machine using the Git command-line tool. ```bash git clone https://github.com/naymurdev/uilayout.git ``` -------------------------------- ### Install React Lenis Package Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/smooth-scroll.mdx This command installs the `react-lenis` package, which is required to integrate smooth scrolling functionality into React applications. ```bash npm install lenis/react ``` -------------------------------- ### Install NumberFlow React Component Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/motion-number.mdx Instructions to install the `@number-flow/react` package using npm, providing the core component for animated numbers. ```bash npm install @number-flow/react ``` -------------------------------- ### Full Spotlight Component Implementation Example Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/spotlight-cards.mdx This comprehensive example demonstrates a complete implementation of the Spotlight component, showcasing its interactive gradient effect based on cursor movement. It includes state management for overlay position and applies dynamic styling to create a radial gradient that follows the mouse. ```tsx // https://buildui.com/recipes/spotlight import { cn } from '@/lib/utils'; import Image from 'next/image'; import React, { MouseEvent, useRef, useState } from 'react'; export default function index() { // !mark(1:10) gold const boxWrapper = useRef(null); const [overlayColor, setOverlayColor] = useState({ x: 0, y: 0 }); const handleMouseMove = ({ currentTarget, clientX, clientY }:MouseEvent) => { let { left, top } = currentTarget.getBoundingClientRect(); const x = clientX - left; const y = clientY - top; setOverlayColor({ x, y }); }; return ( <>
<> grid

Create Group Effortlessly

Seamless chats, crystal-clear videos, and
premium audio quality

); } ``` -------------------------------- ### uilayouts CLI Project Folder Structure Overview Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/cli/README.md This snippet outlines the internal directory structure of the `uilayouts` CLI project itself, showing the organization of its source code, tests, and configuration files. ```bash cli/ ├── src/ │ └── index.js ← your main CLI script ├── test/ ← Test files directory ├── .npmignore ├── package.json └── README.md ``` -------------------------------- ### Install Dependencies for Image Hover Accordion Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/image-accordions.mdx Instructions to install the 'motion' dependency, which is required for the image hover accordion component to function correctly. ```bash npm install motion ``` -------------------------------- ### Install Cobe Library for Globe Visualization Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/globe.mdx This command installs the `cobe` library, which is a lightweight WebGL globe library essential for creating the interactive 3D globe component. It should be run in your project's terminal. ```bash npm install cobe ``` -------------------------------- ### Install motion/react Dependency Source: https://github.com/ui-layouts/uilayouts/blob/main/apps/ui-layout/content/components/sticky-scroll.mdx This command installs the 'motion' library, which is a required dependency for implementing the scroll-based animations used in the sticky hero section component. ```bash npm install motion ```