DOCSEARCHbyAlgolia
Submit Docs

Spell UI

repository·main·Indexed 21 days ago

https://github.com/xxtomm/spell-ui

A library of sophisticated, motion-first UI components for modern React applications using Tailwind CSS. Built with Motion to ensure smooth 60fps animations, Spell UI provides pre-built components such as text reveals, shimmer effects, tilt cards, animated backgrounds, and marquees. It utilizes a shadcn-compatible CLI for copy-paste installation, allowing developers to maintain full ownership of the component code.

Tokens
109.7K
Snippets
363
Records
483
Agent score
77%

What's inside spell-ui

  1. Overview of Spell UI

    main
    Spell UI provides beautiful, sophisticated UI components specifically designed for modern React applications using Tailwind CSS. It is intended to enhance the visual quality and user experience of React-based web interfaces.

  2. What is Spell UI

    main
    Spell UI is a curated collection of reusable components, blocks, and templates designed for building landing pages and marketing materials. It is inspired by the design philosophy of shadcn/ui, focusing on high-quality, polished aesthetics to help build user trust and professional brand presentation.

  3. Use Spell UI Pre-Built Text Animation Components

    main

    Spell UI provides optimized, ready-to-use React components for common text animation patterns. These components handle text splitting, timing, and performance optimizations automatically.

    Available components:

    • BlurReveal: Transitions text from blurred to focused, word by word.
    • WordsStagger: Configurable word-by-word entrance animations.
    • ShimmerText: Gradient shimmer effect with customizable colors and speed.

  4. Compare Tailwind CSS component libraries

    main

    When choosing a Tailwind CSS component library in 2026, consider your project's specific needs regarding ownership, speed, accessibility, and motion:

    NeedRecommended Library
    Full code ownershipshadcn/ui or Spell UI
    Rapid prototypingdaisyUI or Flowbite
    Top-tier accessibilityRadix UI or Headless UI
    Animations & Micro-interactionsSpell UI
    Full-scale applicationsMantine or NextUI
    Official Tailwind Labs designCatalyst

  5. Core features of Spell UI components

    main

    Spell UI is a collection of animated UI components designed for React and Tailwind CSS. Key characteristics include:

    • Motion-powered animations: Uses Motion for smooth, interactive transitions.
    • Copy-paste friendly: Components are designed to be added directly to your codebase without heavy dependency overhead.
    • Tailwind CSS integration: Built with Tailwind for easy theming and customization.
    • Accessibility & Performance: Follows web accessibility standards and targets 60fps animations.

  6. Orchestrate multiple elements with Variants

    main

    Variants allow you to define named animation states (e.g., "hidden", "visible") and orchestrate children automatically.

    Key Features:

    • Staggering: Use staggerChildren within a parent's transition object to add a delay between each child's animation. You do not need to manually calculate delays for each child.
    • Propagation: When a parent's variant changes, all children with matching variant names will automatically animate to that state.

    Mental Model: Define a containerVariants for the parent and itemVariants for the children. The parent controls the timing, while the children define the individual movement.

    const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4 },
  },
};

// Usage: <motion.div variants={containerVariants} initial="hidden" animate="visible">
//          <motion.div variants={itemVariants} />
//        </motion.div>

  7. Best practices for animation performance

    main

    To avoid frame drops and jank, follow these performance rules:

    • Use GPU-composited properties: Only animate transform and opacity for CSS animations.
    • Prefer CSS Transitions: Use transitions over keyframe animations for interactions so they can be interrupted smoothly by user behavior.
    • Use will-change sparingly: Only apply it to elements that are about to animate.
    • Lazy-load complex effects: For WebGL or heavy particle systems, provide static fallbacks to ensure the page remains functional while assets load.

  8. Implement Pause on Hover for Toast Auto-Dismiss

    main

    To improve user experience, you can pause the auto-dismiss timer when a user hovers over a toast. This prevents the notification from disappearing while the user is reading it.

    Implementation Logic

    1. Track the remainingRef (remaining time) and startTimeRef (when the timer started).
    2. Use onMouseEnter to set an isPaused state to true.
    3. Use onMouseLeave to set isPaused to false.
    4. When the timer resumes, calculate the remaining time so the toast doesn't restart its full duration.
    // Logic for tracking remaining time
React.useEffect(() => {
  if (isPaused || toast.duration === Infinity) return

  startTimeRef.current = Date.now()
  timerRef.current = setTimeout(handleDismiss, remainingRef.current)

  return () => {
    clearTimeout(timerRef.current)
    remainingRef.current -= Date.now() - startTimeRef.current
  }
}, [isPaused, handleDismiss, toast.duration])

  9. Design a Pricing section

    main

    Effective pricing sections should include:

    • 3 Tiers: Typically 'good', 'better', and 'best'.
    • Visual Highlight: Call out the recommended plan.
    • Feature Lists: 5-7 checkmarked features per tier.
    • Billing Toggle: Switch between monthly and annual billing.
    • Objection Handling: Include text like "No credit card required" or "Cancel anytime".

  10. How Spell UI fits into a React UI stack

    main

    Spell UI is an animation-focused component library designed for motion and interactivity. It provides components like tilt cards, animated borders, and spotlight effects.

    Unlike traditional component libraries, Spell UI follows a copy-paste, Tailwind-native philosophy similar to shadcn/ui. This means it is designed to integrate cleanly alongside existing UI frameworks (like MUI, Radix, or shadcn/ui) rather than replacing them. It is best used when your project requires high-fidelity motion and sophisticated interactive elements that standard UI libraries often lack.

  11. Implement a custom keyboard listener with Kbd

    main
    You can create a dynamic keyboard shortcut display by setting the listenToKeyboard prop to true. This allows the component to automatically toggle its visual 'pressed' state when the user presses the specified keys on their physical keyboard.

  12. When to avoid lazy loading

    main

    Lazy loading adds network overhead and complexity. Avoid using it for:

    • Above-the-fold components: Components visible immediately on page load. Lazy loading these adds unnecessary delay to the initial render.
    • Small components: If a component is very small (e.g., under 10KB), the overhead of a new network request may be greater than the benefit of splitting it.
    • Critical path components: Elements like navigation, headers, and footers that appear on every page should remain in the main bundle.