DFH UI Library

Installation

npm install

1. npm install -D tailwindcss postcss autoprefixer

2. npx tailwindcss init -p

3. update tailwind.config.js "content" with following code  snipet

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ]

include following css to index.css

@import '../node_modules/dfh-ui-library/dist/cjs/index.css';
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'tailwindcss/variants';

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    padding: 10px;
    border-right: 1px solid #dddddd; /* Solid right border for all cells */
}

th {
    background-color: #fcfcfc; /* Optional: Add background color for header cells */
    font-weight: 500;
    border-top: 1px solid #dddddd;
}

/* Dashed bottom border for all rows */
tr {
    border-bottom: 1px dashed #dddddd;
}

/* Remove border from the last column */
th:last-child,
td:last-child {
    border-right: none;
}

tr:nth-child(even) {
    background-color: #f6f6f6;
} /*# sourceMappingURL=main.css.map */

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.image.loaded {
    opacity: 1;
}

.loader-wrapper {
    position: relative;
}

.progress-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

Usage

npm run storybook

run above command for view the components layouts

npm run rollup

run above command for build the UI library

License