A collection of vanilla react and tailwind components, fields and output formats written in typescript.

Checkout the Examples

Working on a few projects that require the same fields and easy mapping to database columns. I looked around for typescript react interfaces (both the free and paid versions) without luck.

Mostly I created this component repository for selfish reasons and will be adding more components as are needed in my projects.

$ npm install frui

frui was written first in vanilla react with no other dependencies. You can start importing components like the following.

import { Alert, FieldInput, FormatMarkdown } from 'frui/react';
//or
import FieldSelect from 'frui/react/FieldSelect';

After you install frui, open tailwind.config.js and add the frui location in the content section.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    //...
    './node_modules/frui/**/*.{jsx,tsx}'
    //...
  ],
  //...
}

Tailwind components in frui has also been written from the ground up and you can importing components like the following.

import { Alert, FieldInput, FormatMarkdown } from 'frui/tailwind';
//or
import FieldSelect from 'frui/tailwind/FieldSelect';

• Accordian (TODO)
• Alert
• Badge
• Button
• Control
• Crumbs (TODO)
• Loader
• Modal
• Pagination (TODO)
• Progress (TODO)
• Table
• Tabs (TODO)
• Tree (TODO)

• Autocomplete
• Checkbox
• Checklist (TODO)
• Code (TODO)
• Color (TODO)
• Country
• Currency
• Date
• Datetime
• Fieldset
• File
• Filelist
• Image
• Imagelist
• Input
• JSON (TODO)
• Markdown
• Mask
• Metadata (String, Number, Date, Datetime, Time)
• Number
• Password
• Radio
• Radio Group (TODO)
• Select
• Slider (TODO)
• Slug
• Switch
• Taglist
• Textarea
• Textlist
• Time
• WYSIWYG (TODO)

• Color
• Currency
• Date
• Email
• Formula
• HTML
• Image
• Imagelist
• JSON
• Link
• List (Ordered, Unordered)
• Markdown
• Metadata
• Number
• Overflow (Char, Word)
• Phone
• Separated (Space, Comma, Line)
• Table
• Taglist
• Yesno