Nullpixels-ui NPM

Nullpixels

is a versatile and customizable React component library designed to simplify the creation of stylish and responsive user interfaces. Whether you're building a web application, a landing page, or a dashboard, our components provide a solid foundation for consistent and visually appealing designs.

Developed Features

RoundedButton: Create beautiful rounded buttons with customizable colors, sizes, and hover effects.
SquaredButton: Design squared buttons for a clean and modern look, with flexible customization options.
RoundedFlyoutButton: A rounded button component for FlyoutNavbar same customization as RoundedButton
SquaredFlyoutButton: A squared button component for FlyoutNavbar same customization as SquaredButton
NormalNavbar: Build responsive navigation bars with ease, allowing you to focus on your content.
FlyoutNavbar: A seamless flyout navbar that hides the text until hovered over. Initially only your defined icon shows.

Planned Features

CardGrid: An array of GridCard components inside a CardGrid container. It would seamlessly scale dependent on props you give it.
GridCard: A highly customizable pre-defined card that takes in an image, title, description, profile picture, timestamp, and hover buttons / effects.
CardSlider: A vertical or horizontal slider of cards with the option to auto-slide, or be controlled by the end user via arrow buttons.
SliderCard: A highly customizable predefined card identical to GridCard just named different for ease of use.
Accordion: An accordion component that allows you to organize and present information in a collapsible manner.
Modal: A modal component for displaying pop-up content, like notifications, alerts, or additional information.
Tabs: A tabbed interface component that enables users to switch between different sections or views.
Stepper: A step-by-step wizard or stepper component for guiding users through a multi-step process.
Toggle Switch: A customizable toggle switch component for binary options like enabling/disabling features in a menu.
Progress Bar: A progress bar component to visually represent the completion status of a task or process.
Dropdown Menu: A flexible dropdown menu component for creating navigation or selection menus.
Tag Input: An input component that allows users to add and remove tags for organizing or categorizing content.
Feed: A feed component for displaying chronological events or activities in a visually appealing way.
Notification: A notification component for displaying non-intrusive messages or alerts to users.
Carousel: A carousel component for displaying a rotating set of images or content in a slideshow format.
Date Picker: A date picker component that allows users to select dates from a calendar interface.
Pagination: A pagination component for breaking down long lists or sets of data into manageable pages.
Rating System: A rating system component for users to express and view feedback through stars or other rating symbols.
Search Bar: A search bar component with an input field and optional filters for searching within a dataset.
Social Media Share Buttons: Pre-styled buttons for sharing content on popular social media platforms like Facebook, Twitter, and Instagram.
Toast Notifications: A toast notification component for displaying temporary messages or alerts at the bottom or top of the screen.
Tag Cloud: A tag cloud component for visually representing the frequency of tags or categories in a dataset.
Toggleable Sidebar: A sidebar component that can be toggled open or closed, providing additional navigation options.
Video Player: A video player component with play, pause, and volume controls, along with a customizable interface.
Timer/Countdown: A timer or countdown component for creating time-based features like countdowns or elapsed time displays.
Weather Widget: A weather widget component that displays current weather conditions or forecasts.
Notification Center: A notification center component for aggregating and displaying various notifications.
Filter Panel: A filter panel component for refining data or content based on user-defined criteria.
File Upload: A file upload component with a clean and user-friendly interface for uploading files.
Image Gallery: An image gallery component with features like lightbox view, captions, and navigation controls.

Setup

TailwindCSS

Install and Init TailwindCSS:

npm install tailwindcss postcss autoprefixer

npx tailwindcss init -p

Setup index.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

/* 
Add more imports for additional fonts to choose from.

Once imported like above, create a new class like shown below that simply applies the font family.
*/

@layer components {
    .karla {
        font-family: 'Karla', sans-serif;
    }
    .inconsolata {
        font-family: 'Inconsolata', monospace;
    }
    .inter {
        font-family: 'Inter', sans-serif;
    }
    .roboto {
        font-family: 'Roboto', sans-serif;
    }
    .notoSans {
        font-family: 'Noto Sans', sans-serif;
    }
}

Setup tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.ts',
    './src/**/*.tsx',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

These are the bare minimum steps needed.

Usage

RoundedButton

import { RoundedButton } from 'nullpixels';

<RoundedButton
  icon={<YourIconComponent />}
  label="Click me"
  labelColor="text-white"
  iconColor="text-white"
  labelHoverColor="hover:text-slate-200"
  iconHoverColor="hover:text-slate-200"
  labelSize="text-base"
  iconSize="text-base"
  padding="py-2 px-4"
  backgroundColor="bg-blue-500"
  hoverBackgroundColor="hover:bg-violet-500"
  rounding="rounded-3xl"
  hoverRounding="hover:rounded-md"
  justifyContent="justify-center"
  alignItems="items-center"
/>

SquaredButton

import { SquaredButton } from 'nullpixels';

<SquaredButton
  icon={<YourIconComponent />}
  label="Click me"
  labelColor="text-white"
  iconColor="text-white"
  labelHoverColor="hover:text-slate-200"
  iconHoverColor="hover:text-slate-200"
  labelSize="text-base"
  iconSize="text-base"
  padding="py-2 px-5"
  backgroundColor="bg-blue-500"
  hoverBackgroundColor="hover:bg-violet-500"
  rounding="rounded-3xl"
  hoverRounding="hover:rounded-md"
  justifyContent="justify-center"
  alignItems="items-center"
/>

RoundedFlyoutButton

import React, { useState } from 'react';
import { FaHome } from 'react-icons/fa';
import RoundedFlyoutButton from './RoundedFlyoutButton';

const App = () => {
  const [hoverState, setHoverState] = useState(false);

  const handleHover = () => {
    setHoverState(true);
  };

  const handleHoverLeave = () => {
    setHoverState(false);
  };

  return (
    <RoundedFlyoutButton
      hoverState={hoverState}
      onHover={handleHover}
      onHoverLeave={handleHoverLeave}
      font="inter"
      display="flex"
      icon={<FaHome />}
      label="Home"
      labelColor="text-green-600"
      iconColor="text-green-600"
      labelHoverColor="hover:text-green-900"
      iconHoverColor="hover:text-green-900"
      labelSize="text-base"
      iconSize="text-base"
      padding="py-2 px-5"
      rounding="rounded-3xl"
      hoverRounding="hover:rounded-md"
      backgroundColor="bg-slate-200"
      hoverBackgroundColor="hover:bg-emerald-500"
      justifyContent="justify-center"
      alignItems="items-center"
      flexDirection="flex-row"
      gap="gap-x-2"
      shadowSize="shadow-sm"
      shadowColor="shadow-green-600"
      hoverShadowColor="shadow-green-600"
      transition="transition-all"
      transitionDuration="duration-500"
      iconPosition="left"
      marginHide="ml-[-150px]"
      marginShow="ml-[-5px]"
      height="h-[60px]"
      width="w-[200px]"
    />
  );
};

export default App;

SquaredFlyoutButton

const App = () => {
  const [hoverState, setHoverState] = useState(false);

  const handleHover = () => {
    setHoverState(true);
  };

  const handleHoverLeave = () => {
    setHoverState(false);
  };

  return (
    <SquaredFlyoutButton
      hoverState={hoverState}
      onHover={handleHover}
      onHoverLeave={handleHoverLeave}
      font="inter"
      display="flex"
      icon={<FaHome />}
      label="Home"
      labelColor="text-green-600"
      iconColor="text-green-600"
      labelHoverColor="hover:text-green-900"
      iconHoverColor="hover:text-green-900"
      labelSize="text-base"
      iconSize="text-base"
      padding="py-2 px-5"
      backgroundColor="bg-slate-200"
      hoverBackgroundColor="hover:bg-emerald-500"
      justifyContent="justify-center"
      alignItems="items-center"
      flexDirection="flex-row"
      gap="gap-x-2"
      shadowSize="shadow-sm"
      shadowColor="shadow-green-600"
      hoverShadowColor="shadow-green-600"
      transition="transition-all"
      transitionDuration="duration-500"
      marginHide="ml-[-150px]"
      marginShow="ml-[-5px]"
      height="h-[60px]"
      width="w-[200px]"
    />
  );
};

export default App;

NormalNavbar

import { NormalNavbar } from 'nullpixels';

<NormalNavbar
  backgroundColor="bg-blue-500"
  justifyContent="justify-between"
  alignItems="items-center"
>
  {/* Add your navigation links or other content here */}
</NormalNavbar>

FlyoutNavbar

import React from 'react';
import FlyoutNavbar from './FlyoutNavbar';

const App = () => {
  return (
    <FlyoutNavbar
      mainDisplay="fixed"
      containerDirection="flex-col"
      position="top"
      listDisplay="flex"
      listDirection="flex-col"
      listStyle="list-none"
      listPadding="p-0"
      listMargin="m-0"
      backgroundColor="bg-slate-100"
      display="flex"
      padding="py-4"
      justifyContent="justify-between"
      alignItems="items-center"
      flexDirection="flex-row"
      gap="gap-y-2"
      shadowSize="shadow-md"
      shadowColor="shadow-gradient-to-t from-black"
      hoverShadowColor="hover:shadow-gradient-to-t from-black"
      transition="transition-all"
      transitionDuration="duration-500"
    >
      {/* The FlyoutNavbar is intended to be used to hold:
      * RoundedFlyoutButton
      * SquaredFlyoutButton
      That being said, any component or context/element
      can be used inside here.
      */}
    </FlyoutNavbar>
  );
};

export default App;