@howso/react-tailwind-flowbite-components
v6.7.0
Published
Provides display components for React Tailwind Flowbite applications
Downloads
619
Readme
React + Tailwind + Flowbite components
Provides display components for React Tailwind Flowbite applications
Usage
To use this package in your application install it via npm.
Installation
Standard package installation makes imports available:
npm i @howso/react-tailwind-flowbite-components
Import the styles and fonts must be installed in your application directly.
import "@fontsource/inter/500.css";
import "@fontsource/inter/700.css";
import "@howso/react-tailwind-flowbite-components/lib/styles.css";
Modify your tailwind.config.js
configuration to include:
import twContainerQueries from "@tailwindcss/container-queries";
import flowbite from "flowbite-react/tailwind";
module.exports = {
content: [
"./node_modules/@howso/react-tailwind-flowbite-components/lib/index.esm.js",
flowbite.content(),
// ...
],
plugins: [
flowbite.plugin({ charts: true }),
twContainerQueries,
// ...
],
};
Translation files from this package must be included into your i18n
resources
:
To reduce overall bundle size, you are advised to specify components' bundles you use selectively in your i18n
service:
import { SkeletonI18nBundle } from "@howso/react-tailwind-flowbite-components";
i18n
// ...
.init({
resources: addI18nBundlesToResources(resources, [SkeletonI18nBundle]),
// ...
});
A naive export is available from this package that contains all bundles, though its use is discouraged:
import { I18nBundles } from "@howso/react-tailwind-flowbite-components";
i18n
// ...
.init({
resources: addI18nBundlesToResources(resources, [...I18nBundles]),
// ...
});
Contributing
Development is done through Storybook. You may start the UI for inspection with hot reloading using:
npm run storybook
Publishing
Documentation changes do not require a version publishing.
For functional changes, follow SemVer
standards updating the package.json
and package-lock.json
files in your pull request.
When you are ready to publish a new version, use the Github Release action.
Chromatic
Chromatic is used to review changes on this project. You may invite yourself to the project.