Basic usage

Installation#

YouEye provides a single component approach as an all-purpose UI building block. It is an implementation detail and not a runtime.

Currently, only styled-components are supported, but the plan is to extend support for multiple solutions, such as Svelte, Vue JS and Native Web Components.

Please see the available implementation's details about installation.

Configuration#

Please see the CCSS documentation about the exact usage of these properties.

Import the ccss instance you need to configure.

import { ccss } from 'chosen-implementation'
ccss.setOptions(...).setProps(...)

The Ui component#

Once you imported the Ui component from the selected package, you can apply CSS using properties/attributes.

import Ui from 'chosen-implementation'
const Component = () => <Ui display="flex" />

HTML tags#

Use the polymorphic as prop.

@you-eye/styled supports property based components: <Ui.section />

<Ui as="section" display="flex" />
import Ui from 'chosen-implementation'

For reusable component cases the preferred way to create a wrapper.

Live Editor
Result
Last updated on by Victor Vincent