@sahmed2528/blox-ui

Animated React components built with Motion and Tailwind CSS.

Install

npm install @sahmed2528/blox-ui

Requirements: React 18+, Tailwind CSS

Setup

Tailwind v4

/* globals.css */
@import "tailwindcss";
@source "../node_modules/@sahmed2528/blox-ui/dist/**/*.js";

Next.js App Router

// next.config.ts
const nextConfig = {
  transpilePackages: ["@sahmed2528/blox-ui"],
};
export default nextConfig;

Use components in client components:

"use client";

Usage

import {
  TextScramble,
  TextHighlight,
  AnimatedBorder,
  HighlightAction,
  AnimatedTitle,
} from "@sahmed2528/blox-ui";

export function Example() {
  return (
    <div>
      <AnimatedTitle>Blox UI</AnimatedTitle>

      <TextHighlight animateOn="hover">Hover me</TextHighlight>

      <TextScramble text="Scramble effect" />

      <HighlightAction onClick={() => {}}>Action</HighlightAction>

      <div className="relative">
        <AnimatedBorder show color="border-primary" />
        <input className="rounded-md border px-3 py-2" />
      </div>
    </div>
  );
}

Components

| Component | Required props | |---|---| | TextScramble | text | | TextHighlight | children (string) | | AnimatedBorder | show | | HighlightAction | children | | AnimatedTitle | children |

License

MIT