UI Components
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..)
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.
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.
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.
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.
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 . |
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.
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.
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.
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.
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)",
},
]}
/>
);
}