CssLink

A collection of beautifully animated link components with lightweight CSS-only hover effects. Features five unique link animations including underline reveals, icon transitions, and blend mode effects. Perfect for creating engaging navigation and call-to-action elements.

Dependencies

Interaction Type

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }

npx shadcn add @skiper-ui/skiper40

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper40.json

import {
  Link000,
  Link001,
  Link002,
  Link003,
  Link004,
  Link005,
} from "@/components/v1/skiper40";

const Skiper40Demo = () => {
  return (
    <div className="flex flex-col gap-4">
      {/* no animation */}
      <Link000 href="#">Contact Us</Link000>

      {/* underline left to right */}
      <Link001 href="mailto:contact@example.com">Contact Us</Link001>

      {/* underline right to left */}
      <Link002 href="https://example.com">Visit Website</Link002>

      {/* underline center */}
      <Link003 href="/about">About Page</Link003>

      {/* height 0 - full */}
      <Link004 href="/services">Our Services</Link004>

      {/* width 0 - full width*/}
      <Link005 href="/contact">Get in Touch</Link005>
    </div>
  );
};

Source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

License & Usage:

• Free to use and modify in both personal and commercial projects.
• Attribution to Skiper UI is required when using the free version.
• No attribution required with Skiper UI Pro.