Tartan-ui-kit NPM

Tartan UI Kit 🚀

Tartan UI Kit is a customizable component library built on top of Chakra UI. It offers a modular, accessible, and themeable design system to accelerate building modern, responsive UIs.

Installation

You can install Tartan UI Kit using npm or yarn:

npm install tartan-ui-kit @chakra-ui/react
# or
yarn add tartan-ui-kit @chakra-ui/react

Usage

Wrap your app with the TartanProvider to apply the theme:

import { TartanProvider } from "tartan-ui-kit";

function App({ children }) {
  return <TartanProvider>{children}</TartanProvider>;
}

Now you can start using Tartan UI components:

import { Button } from "tartan-ui-kit";

function Example() {
  return <Button>Click Me</Button>;
}

Theme Overview

Below is an overview of what the Tartan UI Kit theme provides by default.

Fonts

fonts: {
  heading: "'Public Sans', sans-serif",
  body: "'Public Sans', sans-serif"
}

heading: Used for titles and headers.
body: Applied to the main content text.

Colors

colors: {
  primary: {
    100: "#D6E4FF",
    200: "#ADC8FF",
    300: "#84A9FF",
    400: "#6690FF",
    500: "#3762DD", // Tartan's base color
    600: "#2F55C4",
    700: "#2748AB",
    800: "#203B92",
    900: "#192E79"
  }
}

primary: A blue-based palette used across the theme.

Text Styles

The theme provides a range of text styles for consistent typography:

textStyles: {
  h1: { fontSize: { base: "40px", sm: "48px" }, fontWeight: "bold", lineHeight: "110%" },
  body1: { fontSize: { base: "16px", sm: "18px" }, fontWeight: "regular", lineHeight: "150%" },
  caption: { fontSize: { base: "12px", sm: "14px" }, fontWeight: "medium", color: "gray.500" }
}

h1 - h6: Header styles with responsive sizes.
body1, body2: Styles for regular text content.
caption: Used for small or secondary text.

Components

Button

A customizable button with three sizes:

sizes: {
  sm: { height: "40px", padding: "12px", fontSize: "14px" },
  md: { height: "56px", padding: "16px", fontSize: "16px" },
  lg: { height: "60px", padding: "18px", fontSize: "18px" }
}

ControlledForm

A flexible form management component inspired by Formik.

ControlledForm: {
  gap: "24px",
  inputs: { height: "44px" },
  label: { fontSize: "14px", fontWeight: 600, color: "#344054" },
  error: { fontSize: "12px", fontWeight: 500 }
}

Customization

Extend the theme easily by using extendTheme:

import { extendTheme, TartanProvider } from "tartan-ui-kit";

const customTheme = extendTheme({
  colors: {
    primary: {
      500: "#FF5722",
    },
  },
});

function App() {
  return <TartanProvider themeOverride={customTheme}>...</TartanProvider>;
}

Exports

This library provides the following components, types, and utilities:

Components

Breadcrumbs Button ControlledForm DateInput Input MultiSelect NumberInput PhoneInput Radio SearchInput Select Textarea Pagination Table

Types

TartanBreadcrumbsProps TartanButtonProps TartanButtonVariant TartanFormActionType TartanFormErrorActionType TartanFormRef TartanFieldType TartanDateInputProps TartanInputProps TartanMultiSelectProps TartanNumberInputProps TartanPhoneInputProps TartanRadioProps TartanSearchInputProps TartanSelectProps TartanTextareaProps TartanProviderProps TartanCsvColumnMapping TartanCsvRow TartanEventBusInterface TartanPaginationProps TartanTableProps TartanTableColumnDef TartanTableRow

Theme Types

TartanTheme TartanButtonSizeTheme TartanButtonTheme TartanColorsTheme TartanColorsThemeShades TartanControlledFormTheme TartanPaginationTheme TartanTextStylesTheme

Utilities

regexEmail regexMobileNumber formatDate formatDateTime formatTime parseCsvToJson EventBus isNullOrUndefined isSameDate getInitials isValidEmail isValidPhoneNumber isValidURL