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

Chromatic UI Review

For information about Chromatic UI Review workflows, responsive design testing, and designer integration, see CHROMATIC.md.

License