Package Exports

@janribkaui/material-ui-tailwind
@janribkaui/material-ui-tailwind/Button
@janribkaui/material-ui-tailwind/ButtonGroup
@janribkaui/material-ui-tailwind/CircularProgress
@janribkaui/material-ui-tailwind/DefaultPropsProvider
@janribkaui/material-ui-tailwind/index.js
@janribkaui/material-ui-tailwind/node/index.js
@janribkaui/material-ui-tailwind/utils

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@janribkaui/material-ui-tailwind) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

JanRibka UI

JanRibka is an open-source React component library for react projects with tailwind that implements Google's Material Design

Installation

To use material-ui-tailwind in your project, you can install it as a dependency:

yarn add @janribkaui/material-ui-tailwind
# or
npm i @janribkaui/material-ui-tailwind
# or
pnpm add @janribkaui/material-ui-tailwind

Components

Button
Loading button
Icon button
Circular progress
Linear progress
Still working on new components

Usage

Tailwind config

import type { Config } from 'tailwindcss';
import twConfigBase from '@janribkaui/material-ui-tailwind/tailwind.config';

const config: Pick<Config, 'content' | 'presets'> = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@janribkaui/material-ui-tailwind/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [twConfigBase],
};

export default config;

Button

import Button from '@janribkaui/material-ui-tailwind/Button';
import { AiFillAndroid } from 'react-icons/ai';
import { TbArrowBigRightLinesFilled } from 'react-icons/tb';

const App = () => {
    return (
        <>
            <Button
                size="small"
                startIcon={<AiFillAndroid />}
                endIcon={<TbArrowBigRightLinesFilled />}
            >
                Small
            </Button>
            <Button size="small" variant="outlined" disabled>
                Small
            </Button>
        </>
    )
}

Loading button

import LoadingButton from '@janribkaui/material-ui-tailwind/LoadingButton';
import { AiFillAndroid } from 'react-icons/ai';

const App = () => {
    return (
        <>
            <LoadingButton
              loading={loading}
              variant="contained"
              size="medium"
              fullWidth
              loadingPosition="end"
              endIcon={<AiFillAndroid />}
            >
              Fetch data
            </LoadingButton>
            <LoadingButton loading loadingIndicator="Loading…" variant="outlined" size="small">
              Fetch data
            </LoadingButton>
        </>
    )
}

Icon button

import IconButton from '@janribkaui/material-ui-tailwind/IconButton';
import { AiFillAndroid } from 'react-icons/ai';

const App = () => {
    return (
        <>
            <IconButton>
                <AiFillAndroid />
            </IconButton>
            <IconButton size="small" color="secondary">
                <AiFillAndroid />
            </IconButton>
        </>
    )
}

Circular progress

import CircularProgress from '@janribkaui/material-ui-tailwind/CircularProgress';

const App = () => {
    return (
        <>
            <CircularProgress color="success" size="3rem" />

            <CircularProgress variant="determinate" value={25} size={40} />
        </>
    )
}

Linear progress

import LinearProgress from '@janribkaui/material-ui-tailwind/LinearProgress';

const App = () => {
    return (
        <>
            <LinearProgress color="secondary" />

            <LinearProgress variant="determinate" value={progress} />

            <LinearProgress variant="buffer" value={progress} valueBuffer={buffer} />
        </>
    )
}

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss JanRibka UI on GitHub

Contributing

If you're interested in contributing to JanRibka UI, please read our contributing docs before submitting a pull request.

License

This project is licensed under the terms of the MIT license.

Security

For details of supported versions and contact details for reporting security issues, please refer to the security policy.