React Components Kit

• IDUI
• Components
• Themes

Install

npm install --save @idui/react-kit

yarn add @idui/react-kit

Example

1. 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>
    );
}

2. Import font from your theme

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

3. 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 (@idui/react-avatar)
• Badge (@idui/react-badge)
• Icon (@idui/react-icon)
• Sheet (@idui/react-sheet)
• SnackbarGroup (@idui/react-snackbar)
• Snackbar (@idui/react-snackbar)
• Stepper (@idui/react-stepper)
• Tree (@idui/react-tree)
• CheckboxTree (@idui/react-tree)
• TreeSelect (@idui/react-tree-select)
• Modal (@idui/react-modal)
• Popover (@idui/react-popover)
• Tooltip (@idui/react-popover)
• Collapse (@idui/react-collapse)
• Calendar (@idui/react-date-components)
• DatePicker (@idui/react-date-components)
• DateInput (@idui/react-date-components)
• TimePicker (@idui/react-date-components)
• TimeInput (@idui/react-date-components)
• DateRangePicker (@idui/react-date-components)
• DateRangeInput (@idui/react-date-components)
• TextArea (@idui/react-text-area)
• TextInput (@idui/react-inputs)
• NumberInput (@idui/react-inputs)
• SearchInput (@idui/react-inputs)
• TagInput (@idui/react-inputs)
• FileInput (@idui/react-file-input)
• ImageUploader (@idui/react-file-input)
• MaskInput (@idui/react-mask-input)
• Checkbox (@idui/react-toggle-controls)
• Radio (@idui/react-toggle-controls)
• Switch (@idui/react-toggle-controls)
• OrderedPagination (@idui/react-pagination)
• UnorderedPagination (@idui/react-pagination)
• LinearProgress (@idui/react-progress)
• CircularProgress (@idui/react-progress)
• Breadcrumbs
• Button
• Chip
• DropDownMenu
• ExternalLink
• IconButton
• Image
• Tabs
• Select (in development)

License

MIT © [email protected]