The MinIO Design System is a design specification for all UI elements used in MinIO products.
You can test this package using the embedded storybook. Please follow these steps:
- Do
yarn install
in the root folder of mds - Start Story book by running
yarn storybook
- Open any browser and go to
http://localhost:6006
To implement the MinIO Design System in your application, you can follow these steps:
- Install the package by running
yarn add http://github.com/minio/mds#[Version]
. Replace[Version]
with the version you want to install. - Import the required Geist & Geist Mono fonts in your application using your preferred method, Font Variants described as follows:
{
"@font-face": {
fontFamily: "Geist",
src: `url(${GeistBoldWoff2}) format("woff2")`,
fontWeight: "bold",
fontStyle: "normal",
fontDisplay: "swap",
},
},
{
"@font-face": {
fontFamily: "Geist",
src: `url(${GeistMediumWoff2}) format("woff2")`,
fontWeight: 500,
fontStyle: "normal",
fontDisplay: "swap",
},
},
{
"@font-face": {
fontFamily: "Geist",
src: `url(${GeistSemiBoldWoff2}) format("woff2")`,
fontWeight: 600,
fontStyle: "normal",
fontDisplay: "swap",
},
},
{
"@font-face": {
fontFamily: "Geist",
src: `url(${GeistLightWoff2}) format("woff2")`,
fontWeight: 300,
fontStyle: "normal",
fontDisplay: "swap",
},
},
{
"@font-face": {
fontFamily: "Geist",
src: `url(${GeistUltraLightWoff2}) format("woff2")`,
fontWeight: 200,
fontStyle: "normal",
fontDisplay: "swap",
},
},
{
"@font-face": {
fontFamily: "Geist",
src: `url(${GeistBlackWoff2}) format('woff2')`,
fontWeight: 900,
fontStyle: "normal",
fontDisplay: "swap",
},
},
{
"@font-face": {
fontFamily: "Geist",
src: `url(${GeistRegularWoff2}) format('woff2')`,
fontWeight: "normal",
fontStyle: "normal",
fontDisplay: "swap",
},
},
{
"@font-face": {
fontFamily: "Geist",
src: `url(${GeistThinWoff2}) format('woff2')`,
fontWeight: 100,
fontStyle: "normal",
fontDisplay: "swap",
},
},
{
"@font-face": {
fontFamily: "GeistMono",
src: `url(${GeistMonoRegularWoff2}) format('woff2')`,
fontWeight: 400,
fontStyle: "normal",
fontDisplay: "swap",
},
},
- Create an
mds.d.ts
file in the root of your project and add the following code and import it into your tsconfig.json file:
import { ThemeDefinition } from "mds";
import "@emotion/react";
declare module "@emotion/react" {
export type Theme = ThemeDefinition;
}
This is required to have the correct types for the theme object in your application.
- Import the required components in your application. For example, to import the Button component, you can use
import { Button } from 'mds'
. - Use the imported component in your application.
To create distribution files you can run yarn build
or make build
in source folder. This will create the required dist folders.
This process is required everytime a new component is created and ready to be distributed
MinIO Design System source is licensed under the GNU AGPLv3 license that can be found in the LICENSE file.