@plils/web-kit

React components from the Plils Web Kit for expressive, responsive interfaces.

Installation

npm install @plils/web-kit

Usage

import { GooeyBlobs, ShimmerText, SpotlightCard } from "@plils/web-kit";

export function Example() {
  return (
    <SpotlightCard>
      <GooeyBlobs>
        <ShimmerText>Create what is next.</ShimmerText>
      </GooeyBlobs>
    </SpotlightCard>
  );
}

Components

• Layout and surfaces: GooeyBlobs, Marquee, SpotlightCard
• Controls: FocusLine, SegmentedControl
• Buttons: ArrowSlide, HaloButton, HireButton, RippleButton
• Border effects: BorderBeam
• Text effects: CountUp, GradientText, ScrambleText, ShimmerText, UnderlineReveal
• Loading: BubbleProgress, OrbitLoader
• Feedback: ToastStack

Requirements

• React 18 or later
• React DOM 18 or later
• lucide-react

Notes for AI

• Use named imports from @plils/web-kit.
• Components include their own CSS Modules. Do not copy or replace their internal styles unless a project explicitly needs a custom implementation.
• Keep visible text, labels and accessible names in the host application's locale.
• Prefer the component props and className over editing package source code.
• demo props are intended for non-interactive previews. Omit them in production interfaces unless the automatic demonstration is desired.
• Some components inherit contextual CSS variables such as --color-text, --color-text-muted, --color-surface and --color-border. Define them in the host surface when visual consistency matters.
• Respect prefers-reduced-motion; the components already provide reduced-motion behavior and it should not be overridden.

License

MIT