) } ``` -------------------------------- ### MatrixText Component Usage Example Source: https://buouui.com/docs/animations/matrix-text This React component demonstrates how to use the MatrixText component from '@/components/matrix-text'. It shows how to import and render the component with custom props for text content, initial delay, animation duration, and letter interval. ```javascript import MatrixText from "@/components/matrix-text"; export default function Demo() { return ( ); } ``` -------------------------------- ### Flickering Grid Component Usage Example Source: https://buouui.com/docs/animations/flickering-grid Demonstrates how to use the FlickeringGrid component in a React application with various props for customization. ```javascript export default function HeroSection() { return (

Your content here

); } ``` -------------------------------- ### Usage Example - React Source: https://buouui.com/docs/animations/grid Demonstrates how to use the `InteractiveGrid` component, likely a part of the Grid Background functionality. It shows rendering a simple div within the grid and disabling the gradient effect. ```jsx export function GridDemo() { return (

) } ``` -------------------------------- ### GET /animations-stepper Source: https://buouui.com/docs/animations/stepper Retrieves the configuration schema for the Animations Stepper component, describing required and optional props for rendering the stepper UI. ```APIDOC ## GET /animations-stepper ### Description The Animations Stepper component provides a multi-step UI with customizable labels, values, and SVG icons. ### Method GET ### Endpoint /animations-stepper ### Parameters #### Path Parameters _None_ #### Query Parameters _None_ #### Request Body - **label** (string) - Required - The step label. - **value** (string) - Required - The step value. - **stepSvg** (ReactNode) - Optional - The step SVG icon. ### Request Example { "label": "Step 1", "value": "step1", "stepSvg": "" } ### Response #### Success Response (200) - **status** (string) - Operation successful. - **component** (object) - Rendered component details. ### Response Example { "status": "success", "component": { "label": "Step 1", "value": "step1" } } ``` -------------------------------- ### Usage example for LED Card in React TypeScript Source: https://buouui.com/docs/animations/led This code demonstrates using the LEDBoard component to display a word as an animated LED card. It exports a function that returns the component with a word prop. Requires the LEDBoard component; inputs a string word and outputs a React element with animation. ```TypeScript export function Led() { return } ``` -------------------------------- ### Install `cn` Utility for BuouUI Source: https://buouui.com/docs/animations/ads This snippet shows the installation of the `cn` utility function, which is essential for merging CSS class names efficiently in your project. It relies on `clsx` for class name manipulation and `tailwind-merge` for Tailwind CSS class name management. ```typescript import { ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } ``` -------------------------------- ### Animated Tabs Usage Example Source: https://buouui.com/docs/animations/animated-tabs Demonstrates how to use the AnimatedTabs component within a React page. Includes a handler for search functionality and shows how to pass custom props like className and activeColor. ```typescript export default function MyPage() { const handleSearch = (value: string) => { console.log("Searching for:", value); }; return (

); } ``` -------------------------------- ### Fliping Text Component Usage Example Source: https://buouui.com/docs/animations/fliping-text Demonstrates how to use the Fliping Text component to display a list of words that animate one after another. It sets up a container and uses the FlipWords component with a predefined array of words. ```typescript export function FlipWordsDemo() { const words = ["Super", "Smooth", "Beautiful", "Modern"] return (

Build

Website using BuouUI

) } ``` -------------------------------- ### Configure Tailwind CSS for Shadcn-UI (JavaScript/TypeScript) Source: https://buouui.com/docs/installation/laravel Configuration for `tailwind.config.js` to integrate with shadcn-ui. It defines content paths, theme settings including custom colors and radii, keyframes for animations like accordion, and plugins. ```javascript import forms from "@tailwindcss/forms" import defaultTheme from "tailwindcss/defaultTheme" /** @type {import('tailwindcss').Config} */ export default { darkMode: "class", content: [ "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php", "./storage/framework/views/*.php", "./resources/views/**/*.blade.php", "./resources/js/**/*.tsx", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: `var(--radius)`, md: `calc(var(--radius) - 2px)`, sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["Figtree", ...defaultTheme.fontFamily.sans], }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [forms, require("tailwindcss-animate")], } ``` -------------------------------- ### React Usage Example for Fade In and Out Component Source: https://buouui.com/docs/animations/fade-in-out Demonstrates how to use the Fade In and Out component in a React application. It shows how to pass text, custom class names, and transition durations as props. ```jsx export default function Demo() { return ( ) }; ``` -------------------------------- ### Usage Example for IPhone Color Background Source: https://buouui.com/docs/animations/color-bg This React code snippet demonstrates how to use the IPhone Color Background component within a Next.js application. It sets up a section with an animated background and content. ```jsx export default function Demo() { return (

Iphone color background

) } ``` -------------------------------- ### Implement Dot Background Component in React Source: https://buouui.com/docs/animations/dot Demonstrates basic usage of the Dot component with gradient disabled. The example shows how to render the dot pattern within a full-size container. Accepts props for color, size, spacing, and gradient configuration. ```typescript export function DotDemo() { return (

) } ``` -------------------------------- ### Usage: HackerBackground Demo (JavaScript) Source: https://buouui.com/docs/animations/hacker Demonstrates how to use the HackerBackground component within a React function component. The example creates a container div with styling and includes the HackerBackground component within it. ```javascript export default function HackerBackgroundDemo() { return (

) } ``` -------------------------------- ### HolographicCard with Animation and Events Source: https://buouui.com/docs/animations/3d-reflective-card Illustrates enabling automatic animation ('autoAnimate') and configuring event callbacks ('onHover', 'onHoverEnd') for the HolographicCard. This example also shows adjusting the 'sensitivity' prop for the 3D rotation effect. ```jsx console.log("Card hovered")} onHoverEnd={() => console.log("Hover ended")} /> ``` -------------------------------- ### React Usage Example for FloatingBubbles Source: https://buouui.com/docs/animations/bubble This React code demonstrates how to use the FloatingBubbles component within a Next.js application. It includes basic styling for the container to center the bubbles and hide overflow. The component itself is a direct child of the styled div. ```jsx export default function Demo() { return (

) } ``` -------------------------------- ### Render HoverEffect component with project data Source: https://buouui.com/docs/animations/card-hover-effect React example demonstrating how to render the HoverEffect component, passing an array of project items with title, description, and link. Shows required props and component layout. ```tsx export default function Demo() { return (

); } const projects = [ { title: "OpenAI", description: "An AI research and deployment company dedicated to ensuring artificial general intelligence benefits all of humanity.", link: "#", }, // ... more projects ]; ``` -------------------------------- ### Text Drop Component Usage Example Source: https://buouui.com/docs/animations/text-drop This React code snippet demonstrates how to use the Text Drop component. It showcases passing the 'text', 'className', 'bounceDuration', and 'dropAnimationDuration' props to customize the component's appearance and animation. ```jsx export default function demo() { return ( ) }; ``` -------------------------------- ### Create Vite React Project Source: https://buouui.com/docs/installation/vite Initializes a new React project using Vite with npm. This command sets up the basic project structure and dependencies. ```bash npm create vite@latest ``` -------------------------------- ### Wave Reveal Text Example (React) Source: https://buouui.com/docs/animations/wave-text Demonstrates the usage of the WaveReveal component within a React application. It showcases setting various props like text, direction, mode, duration, delay, blur, className, and letterClassName to control the animation effect. ```javascript export default function Demo() { return ( ); } ``` -------------------------------- ### Conditional Tailwind CSS Class Merging Utility (lib/utils.ts) Source: https://buouui.com/docs/installation/manual This TypeScript utility function, 'cn', combines multiple class names into a single string, conditionally applying them using clsx and merging duplicates or conflicting classes with tailwind-merge. It simplifies the process of managing dynamic Tailwind CSS classes in components. ```typescript import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } ``` -------------------------------- ### Using LanyardCard Component in React Source: https://buouui.com/docs/animations/3d-badge Render the LanyardCard component for displaying the 3D event badge in a React application. Props include className for styling, height for size, and backgroundColor for theme. Outputs a JSX element; depends on installed React Three Fiber packages. Limitations: Requires a React setup and downloaded 3D model. ```jsx export default function Demo() { return ( ) } ``` -------------------------------- ### HackerBackground Component API Source: https://buouui.com/docs/animations/hacker Documentation for the HackerBackground component, including its available props. ```APIDOC ## HackerBackground Component API ### Description Provides a customizable hacker background effect for your web applications. ### Props #### Available Props - **color** (string) - Optional - The background color of the hacker effect. - **size** (number) - Optional - The font size for the characters in the effect. - **speed** (number) - Optional - The speed of the animation. - **className** (string) - Optional - Additional CSS classes to apply to the component. ``` -------------------------------- ### Basic Usage of HolographicCard Component Source: https://buouui.com/docs/animations/3d-reflective-card Demonstrates the simplest way to use the HolographicCard component in a React application. It requires importing the component and providing the essential 'imageUrl' prop. ```javascript import HolographicCard from "@/components/holographic-card" export default function MyComponent() { return ( ) } ```

Apple Liquid Glass

Your content here