m7kit is a React component library designed to facilitate the integration of less common UI components into your React applications. It is built with React and TailwindCSS, providing a seamless development experience. This library focuses on offering unique image components, such as Masonry, GalleryStack, DiamondGrid, and ImageShowcase.
npm install m7kit
After installing m7kit, you can import components into your React application:
import { Masonry, GalleryStack, DiamondGrid, ImageShowcase } from "m7kit";
Additionally, you need to import the CSS file to ensure proper styling:
import "m7kit/css";
It is recommended to import this CSS file before your own CSS files if you want to override the default styles and CSS variables.
Responsive masonry layout for images. Supports up to 6 columns and images can be ordered both horizontally and vertically.
GalleryStack enables you to stack images as a deck of cards with a suitable animation. It is ideal for showcasing multiple images in a compact space.
The DiamondGrid component arranges images in a diamond grid layout, offering a visually striking alternative to traditional grid arrangements.
ImageShowcase is designed to highlight a single image in a row of images when hovering.
Colors are defined using CSS variables, allowing you to customize the appearance of m7kit components. You can override these variables in your own CSS files to match your application's theme. The following CSS variables are available:
@layer base {
:root {
--clr-accent: 37 99 235; /* blue-600 */
--clr-bg: 248 250 252; /* slate-50 */
--clr-border: 148 163 184; /* slate-400 */
--clr-text: 51 65 85; /* slate-700 */
}
:root[data-theme="dark"] {
--clr-accent: 253 230 138; /* amber-200 */
--clr-bg: 15 23 42 /* slate-900 */;
--clr-border: 100 116 139; /* slate-500 */
--clr-text: 226 232 240; /* slate-200 */
}
}
These follow the Tailwind guidelines of defining colors using only the color channels in order to be able to use the opacity modifier syntax.
To override these variables, you can define them in your own CSS file by copying the variables above into your own CSS file and changing the values to match your desired theme.
To enable dark mode, use a Theme Provider or JavaScript to add the data-theme="dark" attribute to the html element in your application.
For a live demonstration of m7kit components, you can visit the Storybook Demo.
The source code for m7kit is available on Github. Feel free to contribute, report issues, or provide feedback.
m7kit is licensed under the MIT License. Feel free to use, modify, and distribute it as needed.