UI Components

danger

This SDK is a Work In Progress! All features are subject to change.

We support multiple UI components built in JSX, some of which support nesting, to enable the creation of rich user interfaces. The UI components are assigned to slots by sending the ui:slot:set event.

Box

Box container, supports multiple sizes, styling and alignment options. It's used mostly to embed other components that don't have their own layout options (fields, texts, images, etc..)

Example

import type { NubeSDK } from "@tiendanube/nube-sdk-types";
import { Box, Txt } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Box width={100} height={200}>
      <Txt>Hello!!</Txt>
    </Box>
  );
}

export function App(nube: NubeSDK) {
  nube.send("ui:slot:set", () => ({
    ui: {
      slots: {
        after_line_items: <MyComponent />,
      },
    },
  }));
}

Check

Check allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.

Example

import type { NubeSDK } from "@tiendanube/nube-sdk-types";
import { Box, Check } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Box>
      <Check
        id="my-checkbox"
        label="Checkbox"
        name="checkbox"
        onChange={(e) => {
          console.log(`User name: ${e.value}`);
        }}
      />
    </Box>
  );
}

export function App(nube: NubeSDK) {
  nube.send("ui:slot:set", () => ({
    ui: {
      slots: {
        after_line_items: <MyComponent />,
      },
    },
  }));
}

Col

Column container, layouts children in a column, supports multiple sizes, styling and alignment options.

Example

import { Col, Txt } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Col width={100} height={200}>
      <Txt>Hello 1</Txt>
      <Txt>Hello 2</Txt>
    </Col>
  );
}

Row

Row container, layouts children in a row, supports multiple sizes, styling and alignment options.

Example

import { Row, Txt } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Row width={100} height={200}>
      <Txt>Hello!!</Txt>
    </Row>
  );
}

Txt

Text component, support multiple styles. It needs to be embedded inside a box to control anything related to layout.

Example

import { Box, Txt } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Box>
      <Txt color="red" background="blue">Hello!!</Txt>
    </Box>
  );
}

Button

Button supports multiple styles and click event. It should be embedded inside a container to control layout.

Button Props

Prop	Type	Default	Description
id	string	—	Unique identifier for the Button.
children	string	—	Text displayed on the Button.
onClick	(event) => void	—	Function called when the Button is clicked.
variant	string	"primary"	Defines the style variation of the Button (e.g., primary, secondary).
disabled	boolean	false	Disables the Button when true.

Example

import { Button } from "@tiendanube/nube-sdk-jsx";

export function Component() {
  return (
    <Button
      onClick={() => {
        console.log("Button clicked!");
      }}
      variant="primary"
    >
      Hello World!
    </Button>
  );
}

Field

Text input field, supports multiple styles and change events / focus events. It needs to be embedded inside a box to control anything related to layout.

Example

import { Box, Field } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Box>
      <Field
        id="myField"
        label="Field"
        name="field"
        onChange={(e) => {
          console.log(`value: ${e.value}`);
        }}
      />
    </Box>
  );
}

TxtArea

Multi-line text input for extended content.

Example

import { Box, TxtArea } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Box>
      <TxtArea
        id="my-textarea"
        maxLength={300}
        row={3}
        label="TxtArea"
        name="txtarea"
        onChange={(e) => {
          console.log(`value: ${e.value}`);
        }}
      />
    </Box>
  );
}

Img

Displays an image. It needs to be embedded inside a box to control anything related to layout.

Example

import { Col, Img } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Col width={100} height={200}>
      <Img
        src="https://app-insti-cdn.nuvemshop.com.br/site/dist/images/widgets/closing-cta/image-3.webp"
        alt="Nuvemshop Logo"
      />
    </Col>
  );
}

Optionally, the Img component can receive alternative sources loaded by media query.

Example

export function Logo() {
  return (
    <Img
      src="https://hostname/default.png"
      alt="Hello"
      sources={[
        {
          src: "https://hostname/desktop.png",
          media: "(min-width: 769px)",
        },
        {
          src: "https://hostname/mobile.png",
          media: "(max-width: 768px)",
        },
      ]}
    />
  );
}