BaseToolkit

BaseToolkit is a comprehensive React UI library designed to simplify the development of high-performance, responsive user interfaces. Inspired by popular libraries like Material-UI, Moment, Chroma, Clsx, and use-form-hook, BaseToolkit offers unique logic, dynamic styling, CSS-in-JS functionality, and a powerful form API.

BaseToolkit Docs

• View Full Docs: View Full Docs

Features

• Dynamic Styling: CSS-in-JS support with advanced styling capabilities, including useCSSClass for managing dynamic styles.
• Responsive Design: Adaptive components with a customized sx styling system for responsive breakpoints.
• Utilities: Datewise (date utility inspired by Moment) and Coloris (color utility inspired by Chroma) for powerful, seamless functionality.
• Form API: Integrates useForm and Controller hooks, inspired by use-form-hook, for managing complex forms with validations.
• Animations: Built-in keyframes function for custom animations.

Installation

Install BaseToolkit via npm:

npm install @basetoolkit/ui

Free Templates

Explore these free templates included in the library to kickstart your projects. Each template is designed to be fully customizable and integrates seamlessly with BaseToolkit components.

1. Multi-Step Form

A dynamic multi-step form template that guides users through various steps of a form. Ideal for registration flows, checkout processes, or data collection. This template leverages BaseToolkit's powerful form API to manage validation, state, and seamless transitions between steps.

• Features: Progress tracking, validation, smooth step transitions, and BaseToolkit form API integration.
• Live Demo: View Multi-Step Form Demo
• Source Code: GitHub Repository

2. 1inch Clone Website

A responsive template inspired by the popular 1inch cryptocurrency exchange aggregator. Perfect for creating a decentralized exchange or finance app interface. The layout is fully responsive, adapting seamlessly across desktop, tablet, and mobile devices for an optimal user experience.

• Features: Real-time data display, modern UI, fully responsive design.
• Live Demo: View 1inch Clone Demo
• Source Code: GitHub Repository

3. Admin Dashboard

A comprehensive admin dashboard template with a wide range of components, perfect for managing data and analytics for web applications.

• Features: Interactive charts, tables, and customizable widgets.
• Live Demo: View Admin Dashboard Demo
• Source Code: GitHub Repository

These templates are ready to use and customizable, making it easier to set up robust interfaces for various types of applications.

UI Components Usage Examples

Here’s a simple examples of how to use BaseToolkit components in a React app:

import * as React from "react";
import { Button, Grid } from "@basetoolkit/ui";

function BasicButtonDemo() {
  const buttonsProps = [
    { label: "Contained Variant", variant: "contained" },
    { label: "Text Variant", variant: "text" },
    { label: "Outlined Variant", variant: "outlined" },
    { label: "Warning Color", variant: "contained", color: "warning" },
    { label: "Secondary Color", variant: "contained", color: "secondary" },
    { label: "Red Color", variant: "contained", color: "red" },
    {
      label: "color Darken Degrees",
      variant: "contained",
      colorDarkenDegrees: "4",
    },
    {
      label: "color Lighten Degrees",
      variant: "contained",
      colorLightenDegrees: "4",
    },
    { label: "Alpha", variant: "contained", alpha: ".5" },
  ];

  return (
    <Grid container spacing={2}>
      {buttonsProps.map((config, index) => (
        <Grid item container xs={4} key={index} justifyContent="center">
          <Button {...config} fullWidth>
            {config.label}
          </Button>
        </Grid>
      ))}
    </Grid>
  );
}

export default BasicButtonDemo;

import * as React from "react";
import { Checkbox, SvgIcon } from "@basetoolkit/ui";

const label = { inputProps: { "aria-label": "Checkbox demo" } };

export default function CheckboxDemo() {
  return (
    <div>
      <Checkbox {...label} defaultChecked />
      <Checkbox
        {...label}
        icon={<SvgIcon icon="favorite_border" />}
        checkedIcon={<SvgIcon icon="favorite" />}
        color="red"
        defaultChecked
      />
      <Checkbox
        {...label}
        icon={<SvgIcon icon="star_border" />}
        checkedIcon={<SvgIcon icon="star" />}
        color="primary.light"
        defaultChecked
      />
    </div>
  );
}

import React from 'react';
import { TextField, Stack } from '@basetoolkit/ui';

function TextFieldVariantExample() {
  return (
    <Stack spacing={3} p={3}>
      <TextField
        label="Outlined - Primary"
        variant="outlined"
        color="primary"
        focused
      />
      <TextField label="Filled - Pink" variant="filled" color="pink" focused />
      <TextField
        label="Standard - Error"
        variant="standard"
        error
        color="error"
        focused
      />
    </Stack>
  );
}

export default TextFieldVariantExample;

import React, { useState } from 'react';
import { Autocomplete, TextField, Stack } from '@basetoolkit/ui';

function AutocompleteExample() {
  const [selectedLanguage, setSelectedLanguage] = useState(null);

  // Options for the Autocomplete dropdown
  const languages = [
    { label: 'JavaScript' },
    { label: 'Python' },
    { label: 'Java' },
    { label: 'C++' },
    { label: 'Ruby' },
    { label: 'Go' },
    { label: 'Swift' },
    { label: 'Kotlin' },
  ];

  return (
    <Stack spacing={3} p={3}>
      <Autocomplete
        options={languages}
        getOptionLabel={(option) => option.label}
        value={selectedLanguage}
        onChange={(event, newValue) => setSelectedLanguage(newValue)}
        renderInput={(params) => (
          <TextField {...params} label="Choose a Language" variant="outlined" />
        )}
      />
       <Autocomplete
        options={languages}
        getOptionLabel={(option) => option.label}
        multiple
        renderInput={(params) => (
          <TextField {...params} label="Choose Multiple Language" variant="outlined" />
        )}
      />
    </Stack>
  );
}

export default AutocompleteExample;

Integrating with form api

Easily integrate useForm hook with UI Libraries components here is an example using basetoolkit ui components and it can be used with other ui libraries too:

For the complete code, check out the Src Code.

Example: Working with Dates using Datewise

Datewise is a date utility in BaseToolkit that simplifies date manipulation, formatting, and comparison. Here’s how to use it:

import { Grid, Typography, Divider } from "@basetoolkit/ui";
import datewise from "@basetoolkit/ui/datewise";

export default function App() {
  return (
    <Grid container width={"100%"}>
      <Grid item xs={12} container justifyContent="center">
        <Grid item xs={6} container justifyContent="start">
          <Typography fontSize={14}>
            {"datewise().format('MMMM Do YYYY, h:mm:ss a')"}
          </Typography>
        </Grid>
        <Grid item xs={1} container justifyContent="center">
          <Divider orientation="vertical" />
        </Grid>
        <Grid item xs={4} container justifyContent="end">
          <Typography fontSize={14}>
            {datewise().format("MMMM Do YYYY, h:mm:ss a")}
          </Typography>
        </Grid>
      </Grid>
      <Grid item xs={12} container justifyContent="center">
        <Grid item xs={6} container justifyContent="start">
          <Typography fontSize={14}>{"datewise().format('dddd')"}</Typography>
        </Grid>
        <Grid item xs={1} container justifyContent="center">
          <Divider orientation="vertical" />
        </Grid>
        <Grid item xs={4} container justifyContent="end">
          <Typography fontSize={14}>{datewise().format("dddd")}</Typography>
        </Grid>
      </Grid>
      <Grid item xs={12} container justifyContent="center">
        <Grid item xs={6} container justifyContent="start">
          <Typography fontSize={14}>
            {"datewise().format('MMM Do YY')"}
          </Typography>
        </Grid>
        <Grid item xs={1} container justifyContent="center">
          <Divider orientation="vertical" />
        </Grid>
        <Grid item xs={4} container justifyContent="end">
          <Typography fontSize={14}>
            {datewise().format("MMM Do YY")}
          </Typography>
        </Grid>
      </Grid>
      <Grid item xs={12} container justifyContent="center">
        <Grid item xs={6} container justifyContent="start">
          <Typography fontSize={14}>
            {"datewise().format('YYYY [escaped] YYYY')"}
          </Typography>
        </Grid>
        <Grid item xs={1} container justifyContent="center">
          <Divider orientation="vertical" />
        </Grid>
        <Grid item xs={4} container justifyContent="end">
          <Typography fontSize={14}>
            {datewise().format("YYYY [escaped] YYYY")}
          </Typography>
        </Grid>
      </Grid>
      <Grid item xs={12} container justifyContent="center">
        <Grid item xs={6} container justifyContent="start">
          <Typography fontSize={14}>{"datewise().format()"}</Typography>
        </Grid>
        <Grid item xs={1} container justifyContent="center">
          <Divider orientation="vertical" />
        </Grid>
        <Grid item xs={4} container justifyContent="end">
          <Typography fontSize={14}>{datewise().format()}</Typography>
        </Grid>
      </Grid>
    </Grid>
  );
}

Example: Working with Colors using Coloris and BaseToolkit UI Components

In this example, we use Coloris for color manipulation and BaseToolkit UI components to display the results with a clean, styled layout.

import React from "react";
import { Box, Typography, Paper, Grid } from "@basetoolkit/ui";
import coloris from "@basetoolkit/ui/coloris";

function ColorExample() {
  // Define the base color
  const primaryColor = "#3498db";

  // Adjustments
  const lighterColor = coloris(primaryColor).brightness(3).hex(); // 50% brighter
  const desaturatedColor = coloris(primaryColor).desaturate(3).hex(); // 30% desaturation
  const saturatedColor = coloris(primaryColor).saturate(3).hex(); // 30% saturation
  const darkerColor = coloris(primaryColor).darken(4).hex(); // 40% darker
  const alphaColor = coloris(primaryColor).alpha(0.3).hex();

  // Color mixing
  const secondaryColor = "#e74c3c";
  const mixedColor = coloris.mix(secondaryColor, primaryColor, 0.5); // 50% mix
  const averageColor = coloris.average(
    [primaryColor, secondaryColor],
    [0.2, 0.8]
  );//more secondary in mix

  // Display color properties
  const colorBoxes = [
    { label: "Primary Color", color: primaryColor },
    { label: "Lighter Color", color: lighterColor },
    { label: "Darker Color", color: darkerColor },
    { label: "Alpha Color", color: alphaColor },
    { label: "Desaturated Color", color: desaturatedColor },
    { label: "Saturated Color", color: saturatedColor },
    { label: "Secondary Color", color: secondaryColor },
    { label: "Mixed Color", color: mixedColor },
    { label: "Average Mix Color", color: averageColor },
  ];

  return (
    <Grid container spacing={1}>
      <Grid item container xs={5} justifyContent="center">
        {colorBoxes.map(({ label, color }) => (
          <Grid item xs={12} sm={6} md={4} key={label}>
            <Paper elevation={3}>
              <Box
                p={2}
                style={{
                  backgroundColor: color,
                  color: "#fff",
                  textAlign: "center",
                  borderRadius: 8,
                }}
              >
                <Typography variant="caption">{label}</Typography>
                <Typography variant="body2">{color}</Typography>
              </Box>
            </Paper>
          </Grid>
        ))}
      </Grid>
    </Grid>
  );
}

export default ColorExample;

Example: Dynamic Styling with useCSSClass

In this example, we use the useCSSClass hook from BaseToolkit to create dynamic class names and apply conditional styles.

import React, { useState } from "react";
import { useCSSClass } from "@basetoolkit/ui";

const ThemedNestedStyles = () => {
  const [highlighted, setHighlighted] = useState(false);

  const classes = useCSSClass((theme) => ({
    card: {
      backgroundColor: theme.palette.background.paper,
      padding: "30px",
      borderRadius: "12px",
      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
      maxWidth: "400px",
      margin: "20px auto",
      transition: "transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease",
      transform: highlighted ? "scale(1.05)" : "none",
      border: highlighted ? `2px solid ${theme.palette.secondary.main}` : "none",
      "&:hover": {
        transform: "translateY(-5px)",
        boxShadow: "0 6px 16px rgba(0, 0, 0, 0.2)",
      },
      "& h1": {
        color: theme.palette.primary.main,
        margin: "0 0 15px 0",
        fontSize: "24px",
      },
      "& p": {
        color: theme.palette.text.secondary,
        fontSize: "16px",
        lineHeight: "1.6",
        marginBottom: "20px",
      },
      "& button": {
        backgroundColor: theme.palette.primary.main,
        color: "#fff",
        border: "none",
        padding: "10px 20px",
        borderRadius: "8px",
        cursor: "pointer",
        fontSize: "16px",
        transition: "background-color 0.3s ease, transform 0.2s ease",
        "&:hover": {
          backgroundColor: theme.palette.primary.dark,
          transform: "translateY(-3px)",
        },
        "&:active": {
          backgroundColor: theme.palette.primary.darker,
          transform: "translateY(0)",
        },
      },
    },
  }));

  return (
    <div className={classes.card}>
      <h1>Themed Card</h1>
      <p>
        This is a paragraph with themed colors, nested styles, and additional
        styling. The card has a hover effect to lift up slightly for a modern
        interactive feel.
      </p>
      <button onClick={() => setHighlighted(!highlighted)}>
        {highlighted ? "Unhighlight" : "Highlight"}
      </button>
    </div>
  );
};

export default ThemedNestedStyles;

Example: Styling a Standard <button> with CSS Injection

This example demonstrates how to use cssInjection to style a regular HTML <button> element with custom and conditional styling.

import React from 'react';
import { cssInjection, Stack } from '@basetoolkit/ui';

const StyledButton = cssInjection('button', {
  shouldForwardProp: (prop) => prop !== 'isPrimary',
})(({ theme, isPrimary }) => ({
  padding: '10px 20px',
  borderRadius: '8px',
  fontSize: '1rem',
  fontWeight: 600,
  border: 'none',
  cursor: 'pointer',
  backgroundColor: isPrimary ? theme.palette.primary.main : theme.palette.secondary.main,
  color: '#fff',
  transition: 'background-color 0.3s ease',

  '&:hover': {
    backgroundColor: isPrimary ? theme.palette.primary.dark : theme.palette.secondary.dark,
  },
}));

const CssInjectionExample = () => {
  return (
    <Stack direction={"row"} spacing={2} m={3}>
      <StyledButton isPrimary>Primary Button</StyledButton>
      <StyledButton>Secondary Button</StyledButton>
    </Stack>
  );
};

export default CssInjectionExample;

import React, { useState } from 'react';
import { cssInjection, keyframes } from '@basetoolkit/ui';

// Keyframes for the progress bar animation
const grow = keyframes`
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
`;

// Keyframes for the button color animation
const pulse = keyframes`
  0% {
    background-color: #007bff;
  }
  50% {
    background-color: #0056b3;
  }
  100% {
    background-color: #007bff;
  }
`;

const Button = cssInjection('button', {
  shouldForwardProp: (prop) => !['size', 'progress', 'loading'].includes(prop),
})(({ size, loading }) => ({
  padding: size === 'large' ? '15px 30px' : '10px 20px',
  fontSize: size === 'large' ? '18px' : '14px',
  backgroundColor: loading ? '#ddd' : '#007bff',
  color: '#fff',
  border: 'none',
  borderRadius: '5px',
  cursor: loading ? 'not-allowed' : 'pointer',
  position: 'relative',
  overflow: 'hidden',
  transition: 'background-color 0.3s ease',
  animation: loading ? `${pulse} 1.5s infinite` : 'none',
  '&:hover': {
    backgroundColor: loading ? '#ddd' : '#0056b3',
  },
}));

// Progress Bar styled with dynamic width
const ProgressBar = cssInjection('div')(({ progress }) => ({
  width: `${progress}%`,
  height: '5px',
  backgroundColor: progress > 75 ? '#4caf50' : progress > 50 ? '#f39c12' : '#e74c3c',
  position: 'absolute',
  bottom: 0,
  left: 0,
  animation: `${grow} 2s ease`,
}));

// Main component to show dynamic styling in action
const DynamicButton = () => {
  const [progress, setProgress] = useState(0);
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    if (!loading) {
      setLoading(true);
      let newProgress = 0;
      const interval = setInterval(() => {
        if (newProgress >= 100) {
          clearInterval(interval);
          setLoading(false);
        } else {
          newProgress += 10;
          setProgress(newProgress);
        }
      }, 200);
    }
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <Button size="large" loading={loading} onClick={handleClick}>
        {loading ? 'Loading...' : 'Start Process'}
        <ProgressBar progress={progress} />
      </Button>
    </div>
  );
};

export default DynamicButton;

Example: Adding Animations with keyframes and cssInjection

In this example, we create a bouncing animation for a <div> element using keyframes and apply it to the component using cssInjection.

import React from 'react';
import {cssInjection , keyframes } from '@basetoolkit/ui';

const bounce = keyframes`
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
`;

const BouncingBox = cssInjection('div')({
  width: '100px',
  height: '100px',
  backgroundColor: '#3498db',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  color: '#fff',
  borderRadius: '8px',
  fontWeight: 'bold',
  animation: `${bounce} 2s ease infinite`, 
});

const KeyframesExample = () => {
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <BouncingBox>Bounce!</BouncingBox>
    </div>
  );
};

export default KeyframesExample;

Example: Using classnames for Dynamic Class Name Management

The classnames function is highly flexible, allowing you to create dynamic and conditional class names in an efficient way. Here’s a demonstration covering all features:

import React from "react";
import { Divider, Grid, Typography } from "@basetoolkit/ui";
import classnames from "@basetoolkit/ui/classnames";

export default function App() {
  return (
    <Grid container width={"100%"}>
      <Grid item xs={12} container justifyContent="center">
        <Grid item xs={7} container justifyContent="start">
          <Typography fontSize={14}>
            {
              "classnames('header', 0, ['bold', null, 'italic'], { active: true, hidden: false })"
            }
          </Typography>
        </Grid>
        <Grid item xs={1} container justifyContent="center">
          <Divider orientation="vertical" />
        </Grid>
        <Grid item xs={4} container justifyContent="end">
          <Typography fontSize={14}>"
            {classnames("header", 0, ["bold", null, "italic"], {
              active: true,
              hidden: false,
            })}"
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  );
}