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>
);
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.
You can find the documentation, available components, and code examples following this this link.
DIG componentsโ
These are the Decentralized Interface Guidelines (DIG) components available on the NEAR VM:
- DIG.Accordion
- DIG.Avatar
- DIG.Badge
- DIG.Button
- DIG.Checkbox
- DIG.Chip
- DIG.Dialog
- DIG.DropdownMenu
- DIG.Input
- DIG.InputSearch
- DIG.InputSelect
- DIG.InputTags
- DIG.InputTextarea
- DIG.Tabs
- DIG.Theme
- DIG.Toast
- DIG.Tooltip
If you want to see working demos of these components, check the DIG Overview page.
DIG.Accordion
โ
An accordion built with the Radix primitive.
Click here for properties and details.
DIG.Avatar
โ
This component renders an avatar.
Click here for properties and details.
DIG.Badge
โ
This component renders a badge. Badges are not meant to be clickable. Refer to DIG.Button or DIG.Chip for clickable alternatives.
Click here for properties and details.
DIG.Button
โ
A fully featured button component that can act as a <button>
or <a>
tag.
DIG.Checkbox
โ
A checkbox built with the Radix primitive.
Click here for properties and details.
DIG.Chip
โ
A fully featured chip component that can act as a <button>
or <a>
tag.
Click here for properties and details.
DIG.Dialog
โ
This Dialog component is built with the Radix primitive.
Click here for properties and details.
DIG.DropdownMenu
โ
This dropdown menu is built with the Radix primitive.
Click here for properties and details.
DIG.Input
โ
A text input component.
Click here for properties and details.
DIG.InputSearch
โ
An input component for typing a search query.
Click here for properties and details.
DIG.InputSelect
โ
A select input component built with the Radix primitive.
Click here for properties and details.
DIG.InputTags
โ
An input component that handles adding and removing tags.
Click here for properties and details.
DIG.InputTextarea
โ
A textarea input component.
Click here for properties and details.
DIG.Tabs
โ
This tabs component is built with the Radix primitive.
Click here for properties and details.
DIG.Theme
โ
This component wraps all of NEAR Components so you don't need to render it yourself.
You can use any of the CSS variables defined inside DIG.Theme
.
DIG.Toast
โ
This toast component is built with Radix primitive.
Click here for properties and details.
DIG.Tooltip
โ
A tooltip built with the Radix primitive.
Click here for properties and details.