DOCSEARCHbyAlgolia
Submit Docs

ZenUI Library React

repository·production·Indexed 18 days ago

https://github.com/zenui-labs/zenui-library-react

An open-source, lightweight UI component library built with React and Tailwind CSS. It features a collection of components, templates, and tools designed for a copy-and-paste workflow. The library allows for easy customization via Tailwind utility classes and includes advanced implementation examples for animated tooltips, link previews, and reaction trails using framer-motion.

Tokens
80.3K
Snippets
64
Records
73
Agent score
64%

What's inside ZenUI Library React

  1. Understand earnings and payout processes

    production

    ZenUI offers a commission-based model for template creators:

    Earnings

    • Commission: You receive 80% of each sale.
    • Tracking: You will receive an email notification for every sale.
    • Calculation: Total Earnings = (Number of Sales * Template Price) * 0.80.

    Payouts

    • Threshold: Payouts are processed once you have accrued $100 or more in sales.
    • Frequency: Payouts are processed at the end of each month.
    • Method: Earnings are sent via bank transfer.
    • Timing: Funds are transferred within 5-7 business days after processing.

  2. How to use ZenUI components

    production

    ZenUI is a plug-and-play component library that uses Tailwind CSS for styling. It does not require complex installation or configuration. To use a component in your project:

    1. Find the desired component in the ZenUI library.
    2. Copy the provided code snippet.
    3. Paste the code directly into your project where HTML/JSX is supported.

    Components are built using standard Tailwind CSS classes and are ready to use immediately without extra props or configuration.

    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Click Me
</button>

  3. Install the swiper package for Slider components

    production

    The Slider component within the ZenUI library requires the swiper package to function correctly. If swiper is not installed in your project, the Slider component will not work as expected. Ensure you add swiper to your project dependencies.

    npm install swiper

  4. Customize ZenUI components with Tailwind CSS

    production

    Since ZenUI components are composed of Tailwind CSS utility classes, you can customize them by modifying existing classes or adding new ones.

    Changing Colors and Sizes

    Modify classes like bg-{color}-{shade} for background colors or px-{size} and py-{size} for padding.

    <!-- Original Button -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Click Me
</button>

<!-- Customized Button -->
<button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600">
    Customized Button
</button>

    Adding Effects and Animations

    You can add classes for shadows, transitions, and hover states to enhance the UI.

    <div class="p-4 bg-white shadow-lg rounded-lg hover:shadow-xl transition-shadow">
    <h2 class="text-lg font-semibold">ZenUI Card</h2>
    <p class="text-gray-700">This is a customizable card component.</p>
</div>

  6. Submit a template to ZenUI Library

    production

    To sell your React, Next.js, or Tailwind CSS templates on ZenUI, follow these steps:

    1. Prepare a ZIP file containing all code files, required assets (images, etc.), and a README.md file.
    2. Ensure your README.md includes:
      • Setup instructions (installing dependencies, dev environment setup, starting the project).
      • A customization guide (configurable options or sections).
      • Known issues or limitations.
    3. Email the submission to zenuilibrary@gmail.com.
      • Subject Line: [Template Submission - Your Template Name]
      • Email Body: Include Template Name, Template Description, Suggested Price (optional), and your Contact Information (full name and preferred payout method).

    Templates are reviewed within 3-5 business days.

  7. Best practices for using ZenUI

    production

    To maintain code quality and ease of maintenance when using ZenUI components, follow these practices:

    1. Start with Defaults: Use the components exactly as provided first to understand their intended behavior before applying customizations.
    2. Use Tailwind’s Utility-First Approach: Instead of writing custom CSS, apply additional Tailwind utility classes to modify components.
    3. Document Customizations: Keep track of any modifications made to standard ZenUI components to simplify future maintenance.

  8. Template requirements for ZenUI submission

    production

    All templates submitted to ZenUI must adhere to these standards:

    • Code Quality: Must be clean, well-organized, and fully functional using React, Next.js, or Tailwind CSS best practices. Avoid hardcoded values; use variables or props for customization.
    • Documentation: A README.md is mandatory. It must provide clear setup instructions and describe any third-party libraries used and their integration.
    • File Structure: Files must be structured logically. All necessary components (code, assets, README) must be bundled into a single ZIP file.

  9. Install ZenUI Library React via Git

    production

    To run the ZenUI library project locally, clone the repository, install the dependencies, and start the development server.

    # Clone the repository
git clone https://github.com/zenui-labs/zenui-library-react.git

# Go to the project directory
cd zenui-library

# Install all dependencies
npm install

# Run the project
npm run dev

  10. Search Placeholder Animations

    production

    ZenUI provides several animation components designed to enhance search input fields by animating the placeholder text. These animations can be used to create dynamic entry and exit effects, simulating typing, or adding visual flair like flipping or fading.

    Available animations include:

    • Fade In: Smoothly animates the placeholder text as it fades in on focus or page load.
    • Typewriter: Simulates a typing effect, revealing characters one by one.
    • Flip: Creates a flipping text effect, rotating words like flipping cards.
    • Slide In/Out: Animates placeholder text sliding in and out smoothly for dynamic entry and exit effects.

    Note: These components are part of the visual animation suite within the ZenUI library.

    import FadeInPlaceholder from "@animations/Visuals/SearchPlacholder/FadeInPlaceholder.jsx";
import TypewritterPlaceholder from "@animations/Visuals/SearchPlacholder/TypewritterPlaceholder.jsx";
import FlipPlaceholder from "@animations/Visuals/SearchPlacholder/FlipPlaceholder.jsx";
import BounceLettersPlaceholder from "@animations/Visuals/SearchPlacholder/SlideInOutPlaceholder.jsx";

  11. Available Text Effect Animations

    production

    The ZenUI library provides a variety of text effect animations designed to add dynamic motion, depth, and interactivity to text content. These effects can be used to reveal information, simulate typing, or create interactive magnetic responses to user input.

    Available text effects include:

    • Spoiler Text Animation: Reveals hidden words interactively to add curiosity.
    • Text Reveal Animation: Uses smooth transitions like sliding to display text.
    • 3D Transform Animation: Uses 3D transforms (e.g., rotateX, translateZ) to create depth.
    • Text Scramble Animation: Rapidly cycles through random characters before settling on the final text for a glitchy effect.
    • Text Wave Animation: Moves characters in a rhythmic, wave-like up-and-down motion.
    • 3D Rotation Animation: Spins elements around the X, Y, or Z axes.
    • Magnetic Text Animation: Makes text move toward the cursor to create an interactive attraction effect.
    • Typewriter Animation: Simulates text being typed out letter by letter.
    • Text Floating Animation: Creates a gentle, airy up-and-down or side-to-side motion.
    • Text Elastic Animation: Makes letters stretch and bounce back with a springy effect.

  12. Use Background Animations in ZenUI

    production

    ZenUI provides several high-fidelity background animation components designed to create immersive visual effects. These animations are intended to be used as background elements behind your primary content.

    Available Animations

    • Grid Distortion: A futuristic digital mesh effect with smooth, dynamic waves.
    • Starfield Warp: A deep space travel effect simulating stars streaking by at lightspeed.
    • Magnetic Field: Flowing lines and pulses mimicking electromagnetic waves.
    • Circuit Board: Glowing paths and pulses simulating data flow through electronic circuits.
    • String Art: Dynamic threads forming geometric patterns in a loop.

    Critical Implementation Note

    When using these animations, you must set a z-index on your child wrapper element (the element containing your actual UI/content). It is recommended to use a minimum value of 10 to ensure your content layers correctly above the animation and avoids stacking issues.

    /* 
  Example conceptual usage:
  Ensure your content wrapper has a higher z-index than the background animation.
*/

<div style={{ position: 'relative' }}>
  {/* The Background Animation */}
  <div style={{ position: 'absolute', zIndex: 0, inset: 0 }}>
    <GridDistortionExample />
  </div>

  {/* Your UI Content */}
  <div style={{ position: 'relative', zIndex: 10 }}>
    <h1>Your Content Here</h1>
  </div>
</div>