@cuboapp/ui-vue

The Vue 3 flavour of the Cubo UI kit. Components built on the @cuboapp/styles design tokens, authored in TSX.

npm install @cuboapp/ui-vue @cuboapp/styles vue

import '@cuboapp/styles/css';
import '@cuboapp/ui-vue/css';
import { defineComponent, ref } from 'vue';
import { CuboText } from '@cuboapp/ui-vue';

export default defineComponent(() => {
  const value = ref('');
  return () => (
    <CuboText
      prefixIcon="user"
      placeholder="Username"
      value={value.value}
      onChange={(v) => (value.value = v)}
    />
  );
});

Exports: CuboText, CuboIcon, CuboSpinner (and the shared types CuboInputType, CuboTextValue, CuboSize, CuboState, IconName).

CuboText is generic over htmlType. In TSX, pass an explicit type argument to narrow the value type: <CuboText<'number'> … /> (the default is string). Custom prefix/suffix content goes through the prefix / suffix slots — in TSX pass them as children: {{ suffix: () => … }}. See the root README for the full API.