Flow UI

> View Storybook

Getting started

Install package

``sh
yarn add [PACKAGE_NAME_HERE]
`

Add Theme Provider

`tsx
import {FlowThemeProvider} from [PACKAGE_NAME_HERE]

const App = () => {/ ... /}
`

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.

`tsx
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 (


Select "Banana" to trigger the error

options={options}
name="fruit"
label="This is a fruit field"
/>


)
}
`

Components

$3

- 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.

$3

- Text - Inline text component.
- Strong - Bold variant of Text component.
- Paragraph - Component used for bigger chunks of texts.
- Heading - Component used for article and section titles.
- Label - Component used to describe form inputs.

$3

- Head - Manage page tag content.
- Title - Manage page