Design Components

To Share and +4 nLEARNs

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>
);

:::tip Using Wrapper

Example widget using 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>
);

:::tip Using styled components

Example widget using styled components to style Radix UI.

::

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>
);

DIG components

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

DIG.Button

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

::info DIG.Button properties
Click here for properties and details.

::

DIG.Theme

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

::tip
You can use any of the CSS variables defined inside DIG.Theme.

::
Generate comment with AI 2 nL
Scroll to Top
Report a bug👀