tartan-ui-kit
v0.0.25
Published
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.
Downloads
1,505
Readme
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
Toast
successHandler
queryErrorHandler
infoHandler
Contributing
We welcome contributions! Please follow the standard guidelines for submitting pull requests.
License
Tartan UI Kit is licensed under the MIT License.