UI

Installation

yarn add @uxf/core @uxf/ui

Colors

1. first, import figma-colors.css into components.css (or wherever) and/or define your own colors

    @import url("@uxf/ui/css/figma-colors.css");

2. in tailwind.config.js extend COLORS

/*const { figmaColors } = require("@uxf/ui/figma-colors");*/

const tailwindConfig = {
    theme: {
        extend: {
            colors:
                ...figmaColors,
                ...

Note: primary color is replaced with brand color (i.e. primary_surface_default -> brand_surface_default)

Selectable components

type OptionId = string | number;
type Option = { id: OptionId, label: string }

Select

value: OptionId
options: Array<Option>

Open documentation

MultiSelect

value: Array<Option>
options: Array<Option>

Open documentation

Combobox

value: Option
options: Array<Option>
loadOptions: (term: string) => Promise<Array<Option>>

Open documentation

MultiCombobox

value: Array<Option>
options: Array<Option>
loadOptions: (term: string) => Promise<Array<Option>>

Open documentation