Nexcade UI

Nexcade UI is a customizable React component library built with Tailwind CSS, offering a range of commonly used UI components such as Header, Footer, Spinner, Toast notifications, Date Picker, and more. It’s designed to help developers create beautiful, consistent UIs quickly and efficiently.

Table of Contents

• Installation
• Getting Started
• Components
  • Header
  • Footer
  • Spinner
  • Toast
  • Date Picker
• Contributing
• License

---

Installation

To install Nexcade UI, use npm:

npm install nexcade-ui

You also need to install Tailwind CSS in your project if you haven’t already:

npm install tailwindcss
npx tailwindcss init

Then, add the following to your Tailwind CSS configuration in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        "nexcade-blue": "#1E3A8A",
        "nexcade-green": "#00BFA6",
        "nexcade-red": "#FF5A5F",
        "nexcade-yellow": "#FFC72C",
        "nexcade-gray": "#F5F5F5",
      },
    },
  },
  variants: {},
  plugins: [],
};

Getting Started

Import the components you need from nexcade-ui and start using them in your project. Each component is designed to be customizable with props.

import { Header, Footer, Spinner, ToastContainer } from "nexcade-ui";

function App() {
  return (
    <div>
      <Header />
      <Spinner size="md" color="text-blue-500" />
      <ToastContainer position="top-right" />
      <Footer />
    </div>
  );
}

Components

Header

The Header component includes a logo, navigation links, and an optional button.

import { Header } from "nexcade-ui";

const navLinks = [
  { label: "Home", href: "/" },
  { label: "Components", href: "/components" },
  { label: "Docs", href: "/docs" },
];

<Header
  logoSrc="/logo.png"
  links={navLinks}
  buttonLabel="Sign Up"
  onButtonClick={() => alert("Button clicked!")}
/>;

Props

Prop	Type	Description
logoSrc	string	The path to the logo image
links	array	An array of objects with label and href properties for each navigation link
buttonLabel	string	The label for the optional button
onButtonClick	function	The function to call when the button is clicked

Footer

The Footer component includes navigation links, social media icons, and copyright information.

Usage

import { Footer } from "nexcade-ui";

const socialLinks = [
  { label: "Facebook", href: "https://facebook.com", icon: <FiFacebook /> },
  { label: "Twitter", href: "https://twitter.com", icon: <FiTwitter /> },
];

<Footer
  links={navLinks}
  socialLinks={socialLinks}
  copyright="© 2024 MyLibrary"
/>;

Props

Prop	Type	Description
links	array	An array of objects with label and href properties for each navigation link
socialLinks	array	An array of objects with label, href, and icon properties for each social media link
copyright	string	The copyright information

Spinner

The Spinner component displays a loading spinner with customizable size and color.

Usage

import { Spinner } from "nexcade-ui";

<Spinner size="lg" color="text-blue-500" />;

Props

Prop	Type	Description
size	string	The size of the spinner (sm, md, lg)
color	string	The color of the spinner

Toast

The ToastContainer component manages temporary notifications that appear and disappear automatically.

Usage

import { ToastContainer } from "nexcade-ui";

<ToastContainer position="top-right" />;

Props

Prop	Type	Description
position	string	The position of the toast container (top-left, top-right, bottom-left, bottom-right)

Date Picker

The DatePicker component supports single and range date selection.

Usage

import { DatePicker } from "nexcade-ui";

<DatePicker isRange={false} onSelect={(date) => console.log(date)} />;

Props

Prop	Type	Description
isRange	boolean	Whether to enable range selection
onSelect	function	The function to call when a date is selected

Contributing

Contributions are welcome! Please open an issue or submit a pull request with your improvements or bug fixes.

License

This project is licensed under the MIT License.

#

This README gives an overview of Nexcade UI, covering installation, component usage, props, and example code snippets to help users get started. Feel free to modify and expand it as your component library grows.