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>
);
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>
);
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.
Click here for properties and details.
DIG.Theme
โ
This component wraps all of BOS so you don't need to render it yourself.
You can use any of the CSS variables defined inside DIG.Theme
.