Quick Start

Prerequisite

This package is intended to be used within a Roblox-ts (@rbxts) project.

First you should setup a roblox-ts project using npm init roblox-ts (read more about roblox-ts)

Then install React Clean UI within your roblox-ts project.

Installation

npm install @rbxts/react-clean-ui

Development status

React Clean UI is currently under active development. APIs, component props, and installation details may change before the first stable public release.

You can also clone the repository into your project or install it directly from GitHub.

npm install github:Shadercloud/rbxts-react-clean-ui

React Installation

If this is a new project and you have not yet configured React, then open default.project.json in your project root.

Find this section:

"@rbxts": {
    "$path": "node_modules/@rbxts"
},

Then add the @rbxts-js path below it so that it looks like this:

"@rbxts": {
    "$path": "node_modules/@rbxts"
},
"@rbxts-js": {
    "$path": "node_modules/@rbxts-js"
},

Basic usage

Create a file /src/client/demo.client.tsx.

import React from "@rbxts/react";
import ReactRoblox from "@rbxts/react-roblox";
import {CleanUiProvider, DefaultTheme, Container, Box, VStack, HStack, FlexItem, Text, Button, Fieldset, Input, Select} from "@rbxts/react-clean-ui";

const playerGui = game.GetService("Players").LocalPlayer.WaitForChild("PlayerGui") as PlayerGui;

const screenGui = new Instance("ScreenGui");
screenGui.ResetOnSpawn = false;
screenGui.IgnoreGuiInset = true;
screenGui.Parent = playerGui;

const root = ReactRoblox.createRoot(screenGui);

root.render(
 <CleanUiProvider theme={DefaultTheme}>
   <Container width="90%" center>
    <Box>
     <VStack>
      <Container>
       <HStack>
        <FlexItem>
         <Text text="Basic Form" variant="title" />
        </FlexItem>
        <Button icon="times" />
       </HStack>
      </Container>
      <Fieldset>
       <Fieldset.Label>
        <Text text="Enter Name:" />
       </Fieldset.Label>
       <Fieldset.Control>
        <Input placeholder="John Doe" value="" />
       </Fieldset.Control>
      </Fieldset>
      <Fieldset>
       <Fieldset.Label>
        <Text text="Country:" />
       </Fieldset.Label>

       <Fieldset.Control>
        <Select>
         <Select.Option text="United Kingdom" />
         <Select.Option text="United States" />
         <Select.Option text="Canada" />
         <Select.Option text="Germany" />
         <Select.Option text="France" />
         <Select.Option text="Australia" />
         <Select.Option text="New Zealand" />
         <Select.Option text="Japan" />
         <Select.Option text="South Africa" />
        </Select>
       </Fieldset.Control>
      </Fieldset>
      <Container>
       <Button text="Submit Form" intent="info" icon="arrow-circle-right"></Button>
      </Container>
     </VStack>
    </Box>
   </Container>
 </CleanUiProvider>
);

More Examples

You can see examples under the Stories directory on Github.

Notes

<CleanUiProvider> wraps are number of providers as you can include all providers under a single component.