@flowplatform/ui NPM

Flow UI

View Storybook

Getting started

Install package

yarn add [PACKAGE_NAME_HERE]

Add Theme Provider

import {FlowThemeProvider} from [PACKAGE_NAME_HERE]

const App = () => <FlowThemeProvider>{/* ... */}</FlowThemeProvider>

You can read more about smashing theme provider to learn how to customize theme.

Basic usage

This is a simple example that uses @smashing/form and Flow components to create simple validated form.

import {FlowSelectMenu} from [PACKAGE_NAME_HERE]
import {useForm} from '@smashing/form'

const MyForm = () => {
  const validationSchema = yup.object({
    fruit: yup
      .string()
      .transform(val => (val === 'Banana' ? '' : val))
      .required('No banana!')
  })

  const {Form} = useForm({
    initialValues: {
      fruit: 'Apple'
    },
    validationSchema,
    validateOnChange: true
  })

  return (
    <section>
      <p>Select "Banana" to trigger the error</p>
      <Form>
        <FlowSelectMenu
          options={options}
          name="fruit"
          label="This is a fruit field"
        />
      </Form>
    </section>
  )
}

Components

Core

Alert - Component used to give feedback to the user about an action or state.
Avatar - Component used to represent users.
Button - Common button component
Dialog - Component is used to show content on top of an overlay.
FormField - Component used for to add label, description, hint and error handling to input.
Menu - Multiple components that help create menus.
Popover - Component displays floating content in relation to a target.
Select - Simple select component being an overlay to a default system one.
TextInput - Text input component used in forms.
Tooltip - Component used to describe icon buttons.