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 Wrapper