open-index/open-npm huggingface dataset:
npm package: @paboddev05/arcui
Description: ![NPM Version](https://www.npmjs.com/package/@paboddev05/arcui)
Latest version: 1.0.2

# ✦ ArcUI

![NPM Version](https://www.npmjs.com/package/@paboddev05/arcui)

**ArcUI** is a premium, high-performance React UI library featuring an "Ash Black" aesthetic, cinematic spotlight effects, and advanced Glassmorphism. Built with **React**, **Tailwind CSS**, and **Framer Motion**.

---

## 📦 Installation

To install ArcUI in your React project, run:

```bash
npm install @paboddev05/arcui

⚠️ Important Setup
You must import the library's CSS file at the root of your application (e.g., main.jsx or App.jsx) for styles to load correctly.

import '@paboddev05/arcui/style.css';

🧩 Components
1. SpotlightNavbar
A responsive navbar with a magnetic spotlight hover effect and mobile drawer.

import { SpotlightNavbar, createNavItems } from '@paboddev05/arcui';

const navItems = createNavItems([
  { label: "Home", href: "#" },
  { label: "About", href: "#" }
]);

<SpotlightNavbar items={navItems} />

2. GlowingButton
A high-impact action button with a moving gradient beam border.

import { GlowingButton } from '@paboddev05/arcui';

<GlowingButton glowColor="#a855f7" onClick={() => alert('Clicked')}>
  Get Started
</GlowingButton>

3. GlassForm (Card & Input)
Beautiful, transparent form components with blur effects.

import { GlassCard, GlassInput } from '@paboddev05/arcui';

<GlassCard>
  <GlassInput label="Email" placeholder="user@example.com" />
</GlassCard>

4. CountdownTimer
A jitter-free, tabular-num countdown timer.

import { CountdownTimer } from '@paboddev05/arcui';

<CountdownTimer targetDate={new Date('2026-12-31')} size="lg" />

5. SpotlightFooter
A footer with a top ambient spotlight and grid layout.

import { SpotlightFooter } from '@paboddev05/arcui';

<SpotlightFooter logo="ArcUI" copyright="© 2026" />

6. LoadingScreen
A cinematic intro animation with text reveal.

import { LoadingScreen } from '@paboddev05/arcui';

// Use inside your main App component
{loading && <LoadingScreen onLoadingComplete={() => setLoading(false)} />}

🎨 Customization
All components accept a className prop, allowing you to override styles using Tailwind CSS.

<Button className="bg-red-500 hover:bg-red-600">
  Custom Button
</Button>

📄 License
MIT © PabodDev
npm package: @pabon/react-ui-kit
Description: A collection of UI components for React
Author: Juan Pablo Pabón
Latest version: 1.0.2

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.