Skip to main content

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

Dialog.jsx
<AlertDialog.Trigger asChild>
<Widget
src="near/widget/TestButton"
props={{ label: "Click Me" }}
/>
</AlertDialog.Trigger>
TestButton.jsx
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.

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.