React UI Component Registry

A modern, responsive, and reusable UI component library built with React, TypeScript, and Vite. This project serves as a practical demonstration of building scalable and maintainable front-end components using a modern technology stack, including Tailwind CSS and shadcn/ui.

✨ Features

• Responsive Floating Header: A sleek header component that transitions its appearance on scroll, fully responsive for both desktop and mobile views.
• Modern Tech Stack: Built with React 19, Vite for lightning-fast development, and TypeScript for robust type safety.
• Utility-First Styling: Leverages Tailwind CSS and class-variance-authority for a highly customizable and maintainable styling system.
• Reusable Button Component: A versatile <Button> component with multiple variants and sizes, built following best practices with Radix UI Slot.
• Scalable Architecture: Organized with a clear directory structure for components, utilities, and registry definitions, making it easy to extend.
• Strict Code Quality: Enforced through a comprehensive ESLint and TypeScript configuration to ensure clean and error-free code.

🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v18 or later recommended)
• npm or a compatible package manager

Installation

1. Clone the Repository:

   git clone https://github.com/your-username/registry.git
   cd registry

2. Install Dependencies:

   npm install

3. Run the Development Server:

   npm run dev

   This will start the Vite development server. Open your browser and navigate to http://localhost:5173 to see the application in action.

💻 Usage

The primary component showcased in this registry is the FloatingHeader. You can find its implementation at src/registry/headers/floating-header/floating-header.tsx.

To integrate it into a page, simply import and render it:

import FloatingHeader from '@/registry/headers/floating-header/floating-header';
import './App.css';

function App() {
  return (
    <>
      <FloatingHeader />
      <main>
        {/* Your page content here */}
      </main>
    </>
  );
}

export default App;

The header is designed to be placed at the top of your application layout. It automatically handles its floating and background-blur effects based on the user's scroll position.

🛠️ Technologies Used

This project is built with a curated selection of modern web technologies to ensure performance, scalability, and an excellent developer experience.

Technology	Description
React	A JavaScript library for building user interfaces.
TypeScript	A typed superset of JavaScript that compiles to plain JS.
Vite	A next-generation frontend tooling for fast development.
Tailwind CSS	A utility-first CSS framework for rapid UI development.
shadcn/ui	A collection of beautifully designed, reusable components.
Lucide React	A simple and beautiful icon library.
ESLint	A tool for identifying and reporting on patterns in code.

📄 License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for more details.

👨‍💻 Author

Connect with me on social media!

• LinkedIn: [Your LinkedIn Profile]
• Twitter: [@YourTwitterHandle]
• Portfolio: [Your Portfolio URL]

---