@idui/react-kit

React Components Kit

⚠️ It's beta version. The system is still in development 🚀

• IDUI
• Components
• Themes

Install

npm install --save @idui/react-kit

yarn add @idui/react-kit

Example

• Provide theme

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { seaSandTheme } from '@idui/react-kit';

function Layout({ children }) {

    return (
            <ThemeProvider theme={seaSandTheme}>
                {children}
            </ThemeProvider>
    );
}

• Import font from your theme

@import url('https://fonts.googleapis.com/css?family=Montserrat:wght@500;700&display=swap')

• Use components

import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import { TextInput, Button } from '@idui/react-kit';

function Usage() {
    const [name, setName] = useState('');

    return (
          <div>
              <TextInput name="name" value={name} onChange={setName} />
              <Button outline>Cancel</Button>
              <Button>Submit</Button>
          </div>
    );
}

Available Themes

• iduiTheme
• coffeeTheme
• tendernessTheme
• sunsetTheme
• seaSandTheme

Available Components

• Alert
• Avatar
• Badge
• Breadcrumbs
• Button
• Checkbox
• CheckboxTree
• Chip
• DropDownMenu
• ExternalLink
• Icon
• IconButton
• Image
• ImageUploader
• Radio
• Sheet
• SnackbarGroup
• Snackbar
• Stepper
• Switch
• Tabs
• TextArea
• Tooltip
• Tree
• TreeSelect
• Popover
• Select
• Calendar
• DatePicker
• DateInput
• TimePicker
• TimeInput
• DateRangePicker
• DateRangeInput
• TextInput
• NumberInput
• SearchInput
• TagInput
• OrderedPagination
• UnorderedPagination
• LinearProgress
• CircularProgress

License

MIT © [e-mail]