Design Components

(24 nL)
👍Tip 2 nL

Design System Components

When building components, the NEAR VM provides a complete set of Radix primitives to simplify UI development.

Radix UI

Using embedded Radix primitives on the NEAR VM is simple and straight-forward. You don’t need to import any files:

return (
    <Label.Root className="LabelRoot">
      Hello World!
    </Label.Root>
);

:::caution Limitations

Currently, NEAR VM impose some limitations on the Radix UI framework:

  • Form component is not available.
  • You can’t use .Portal definitions.
  • Using CSS is different. You’ll have to use a styled.div wrapper.

:::

Using CSS

Here is an example on how to use CSS through the styled.div wrapper:

const Wrapper = styled.div`
  .SwitchRoot {
    ...
  }
  .SwitchThumb {
    ...
  }
`;

return (
  <Wrapper>
    <Switch.Root className="SwitchRoot">
      <Switch.Thumb className="SwitchThumb" />
    </Switch.Root>
  </Wrapper>
);

Using styled-components

You can use styled-components in combination with Radix UI primitives. Here’s an example:

const SwitchRoot = styled("Switch.Root")`
  all: unset;
  display: block;
  width: 42px;
  height: 25px;
  background-color: var(--blackA9);
  border-radius: 9999px;
  position: relative;
  box-shadow: 0 2px 10px var(--blackA7);

  &[data-state="checked"] {
    background-color: black;
  }
`;

const SwitchThumb = styled("Switch.Thumb")`
  all: unset;
  display: block;
  width: 21px;
  height: 21px;
  background-color: white;
  border-radius: 9999px;
  box-shadow: 0 2px 2px var(--blackA7);
  transition: transform 100ms;
  transform: translateX(2px);
  will-change: transform;

  &[data-state="checked"] {
    transform: translateX(19px);
  }
`;

return (
  <SwitchRoot>
    <SwitchThumb />
  </SwitchRoot>
);

Forward references

The NEAR VM re-implements React’s forwardRef as ref="forwardedRef".

You can use ref="forwardedRef" to forward references through <Widget /> to support Radix’s asChild property:

<AlertDialog.Trigger asChild>
  <Widget
    src="near/widget/TestButton"
    props={{ label: "Click Me" }}
  />
</AlertDialog.Trigger>
const Button = styled.button`
  background: #f00;
`;

return (
  <Button type="button" ref="forwardedRef">
    {props.label}: Forwarded
  </Button>
);

UI is Near

UI is Near is community-built library offering a comprehensive collection of UI components providing a solid foundation for creating intuitive and visually appealing user interfaces for dApps, wallets or other Web3 solutions.

DIG components

These are the Decentralized Interface Guidelines (DIG) components available on the NEAR VM:

DIG.Accordion

An accordion built with the Radix primitive.

“`jsx
// Rendering the component with props
return (

My JSX context 1.

Here’s another paragraph.

>
),
},
{
value: “2”,
header: “Header 2”,
content: (

My JSX context 2.

Here’s another paragraph.

>
),
},
],
}}
/>);
“`

DIG.Avatar

This component renders an avatar.

“`jsx
const accountId = “root.near”;
const profile = props.profile || Social.get(`${accountId}/profile/**`, “final”);

// Rendering the component with props
return (

);
“`

DIG.Badge

This component renders a badge. Badges are not meant to be clickable. Refer to DIG.Button or DIG.Chip for clickable alternatives.

“`jsx
// Rendering the component with props
return (

);
“`

DIG.Button

A fully featured button component that can act as a <button> or <a> tag.

“`jsx
// Rendering the component with props
return ;
“`

DIG.Checkbox

A checkbox built with the Radix primitive.

“`jsx
// Rendering the component with props
return
“`

DIG.Chip

A fully featured chip component that can act as a <button> or <a> tag.

“`jsx
// Rendering the component with props
return ();
“`

DIG.Dialog

This Dialog component is built with the Radix primitive.

“`jsx
State.init({
dialogIsOpen: false,
});

function handleCancelFunction() {
console.log(“cancel”);
}

function handleConfirmFunction() {
console.log(“confirm”);
}

// Rendering the component with props
return (

State.update({ dialogIsOpen: true }),
}}
/>

State.update({ dialogIsOpen: value }),
}}
/>
>
);
“`

DIG.DropdownMenu

This dropdown menu is built with the Radix primitive.

“`jsx
// Rendering the component with props
return (
),
header: “Dropdown header”,
items: [
{
name: “Profile”,
iconLeft: “ph ph-user-circle”,
iconRight: “ph ph-user-focus”,
},
{
subHeader: “Sub header here”,
name: “Settings”,
},
],
}}
/>);
“`

DIG.Input

A text input component.

“`jsx
State.init({
myValue: “”,
});

// Rendering the component with props
return (
State.update({ myValue: e.target.value }),
value: state.myValue,
}}
/>
);
“`

DIG.InputSearch

An input component for typing a search query.

“`jsx
// Rendering the component with props
return (
console.log(query),
}}
/>
);
“`

DIG.InputSelect

A select input component built with the Radix primitive.

“`jsx
State.init({
myValue: “c”,
});

// Rendering the component with props
return (
{
State.update({ myValue: value });
},
},
}}
/>
);
“`

DIG.InputTags

An input component that handles adding and removing tags.

“`jsx
State.init({
myTags: [“food”, “watermelon”],
});

// Rendering the component with props
return (
State.update({ myTags: value }),
}}
/>
);
“`

DIG.InputTextarea

A textarea input component.

“`jsx
State.init({
myValue: “”,
});

// Rendering the component with props
return (
State.update({ myValue: e.target.value }),
value: state.myValue,
}}
/>
);
“`

DIG.Tabs

This tabs component is built with the Radix primitive.

“`jsx
// Rendering the component with props
return ();
“`

DIG.Theme

This component wraps all of NEAR Components so you don’t need to render it yourself.

DIG.Toast

This toast component is built with Radix primitive.

“`jsx
State.init({ showToast: false });

// Rendering the component with props
return (
State.update({ showToast: value }),
trigger: (
State.update({ showToast: true }),
}}
/>
),
action: (
State.update({ showToast: false }),
}}
/>
),
providerProps: { duration: 1000 },
}}
/>
);
“`

DIG.Tooltip

A tooltip built with the Radix primitive.

“`jsx
// Rendering the component with props
return (
),
}}
/>);
“`

Generate comment with AI 2 nL
Scroll to Top