@rbxts/react-clean-ui 1.2.8 → 1.3.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 ShaderCloud
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -1,3 +1,113 @@
 # React Clean UI
 
-[Read the Docs here](https://shadercloud.github.io/rbxts-react-clean-ui/)
+An easy-to-use, theme-aware React component library for building polished Roblox interfaces with [`roblox-ts`](https://roblox-ts.com/) and [`@rbxts/react`](https://www.npmjs.com/package/@rbxts/react).
+
+Stop hand-rolling sizes, spacing, colours, and layout on every screen — compose your UI from reusable, styled components instead.
+
+[**📖 Read the full docs**](https://shadercloud.github.io/rbxts-react-clean-ui/) · [**📦 npm package**](https://www.npmjs.com/package/@rbxts/react-clean-ui)
+
+## Install
+
+```bash
+npm install @rbxts/react-clean-ui
+```
+
+## Preview
+
+| | | |
+|---|---|---|
+| ![Card](https://shadercloud.github.io/rbxts-react-clean-ui/images/card_preview.png) | ![Checkbox](https://shadercloud.github.io/rbxts-react-clean-ui/images/checkbox_preview.png) | ![Toast](https://shadercloud.github.io/rbxts-react-clean-ui/images/toast_preview.gif) |
+| ![Select](https://shadercloud.github.io/rbxts-react-clean-ui/images/select_preview.gif) | ![Menu](https://shadercloud.github.io/rbxts-react-clean-ui/images/menu_preview.gif) | ![Slider](https://shadercloud.github.io/rbxts-react-clean-ui/images/slider_preview.gif) |
+| ![Input](https://shadercloud.github.io/rbxts-react-clean-ui/images/input_preview.gif) | ![Tooltip](https://shadercloud.github.io/rbxts-react-clean-ui/images/tooltip_preview.gif) | ![Draggable](https://shadercloud.github.io/rbxts-react-clean-ui/images/draggable_preview.gif) |
+
+More components, including layouts, forms, charts, and navigation, are in the [docs](https://shadercloud.github.io/rbxts-react-clean-ui/).
+
+## Why React Clean UI?
+
+Roblox gives you powerful low-level UI instances, but every screen ends up repeating the same work: calculating sizes and positions, configuring layout and spacing, applying colours/typography/corners/shadows, and keeping it all visually consistent.
+
+React Clean UI moves that repeated work into reusable components, helpers, and theme definitions — you describe **what** the interface should contain, the library handles **how** it's presented.
+
+## Features
+
+- 🧩 **Composable components** — containers, stacks, boxes, buttons, text, fieldsets, inputs, selects, and more
+- 🎨 **Theme-driven design** — colours, spacing, typography, radii, and semantic intent colours (`primary`, `info`, `success`, `danger`) defined centrally; light/dark and custom themes supported
+- 📐 **Familiar sizing & spacing** — concise, CSS-like props translated into native Roblox `UDim`/`UDim2`
+- 📱 **Responsive layouts** — breakpoint-aware components for phone, tablet, desktop, and console
+- ⚛️ **Built for Roblox React** — renders ordinary Roblox GUI instances through `@rbxts/react`; plays nicely with hooks, contexts, Rojo, and UI Labs stories
+
+## Quick start
+
+First set up a roblox-ts project (`npm init roblox-ts`), then:
+
+```bash
+npm install @rbxts/react-clean-ui
+```
+
+```tsx
+// 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>
+            </Fieldset.Control>
+          </Fieldset>
+          <Container>
+            <Button text="Submit Form" intent="info" icon="arrow-circle-right" />
+          </Container>
+        </VStack>
+      </Box>
+    </Container>
+  </CleanUiProvider>
+);
+```
+
+See the [Quick Start docs](https://shadercloud.github.io/rbxts-react-clean-ui/quickstart) for the full walkthrough (including `default.project.json` setup), and the [`Stories`](./Stories) directory for live UI Labs examples you can open directly in Roblox Studio.
+
+## Project status
+
+React Clean UI is under active development and being built in public. APIs, component props, and installation details may still change before a first stable release. Feedback, issues, and contributions are welcome.
+
+## License
+
+[ISC](./LICENSE)

package/out/Components/Chart/Pie.luau

@@ -155,6 +155,7 @@ local function Pie(props)
 					AnchorPoint = Vector2.new(0.5, 0.5),
 					Position = position,
 					BackgroundColor3 = background,
+					BorderSizePixel = 0,
 				}
 				local _condition_1 = theme.components.charts.pie.labels.backgroundTransparency
 				if _condition_1 == nil then
@@ -195,6 +196,7 @@ local function Pie(props)
 					AnchorPoint = Vector2.new(0.5, 0.5),
 					Position = position,
 					BackgroundTransparency = 1,
+					BorderSizePixel = 0,
 				}, label.content)
 				table.insert(labels, _arg0_1)
 			end
@@ -229,10 +231,12 @@ local function Pie(props)
 	end
 	_attributes.key = _condition
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	_attributes.Size = UDim2.fromScale(1, 1)
 	return React.createElement("canvasgroup", _attributes, shadowPadding, React.createElement("frame", {
 		key = "HitArea",
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		Size = UDim2.fromScale(1, 1),
 		Event = {
 			MouseLeave = function()

package/out/Components/Input/Button.d.ts

@@ -20,6 +20,7 @@ export interface ButtonTextProps extends ScalableElementProps, IntentElementProp
     text: string;
     disabled?: boolean;
     styleOverride?: ButtonStyleOverride;
+    LayoutOrder?: number;
 }
 declare function ButtonText(props: ButtonTextProps): React.JSX.Element;
 export interface ButtonIconProps extends IconProps, IntentElementProps {

package/out/Components/Input/Button.luau

@@ -71,6 +71,7 @@ local function ButtonText(props)
 		end
 	end
 	_attributes.typography = TypographyHelper:getTypography(theme, _exp, _object)
+	_attributes.LayoutOrder = props.LayoutOrder
 	local _exp_1 = props.intent
 	local _exp_2 = if props.disabled then "disabled" else "default"
 	local _exp_3 = theme.components.button.intents
@@ -222,6 +223,7 @@ local Button = React.forwardRef(function(props, ref)
 	_attributes.AutoButtonColor = false
 	_attributes.LayoutOrder = props.LayoutOrder
 	_attributes.ZIndex = props.ZIndex
+	_attributes.BorderSizePixel = 0
 	_attributes.Image = backgroundImage.Image
 	_attributes.ImageColor3 = backgroundImage.ImageColor3
 	_attributes.ImageTransparency = backgroundImage.ImageTransparency
@@ -283,6 +285,7 @@ local Button = React.forwardRef(function(props, ref)
 		spacing = props.spacing,
 		Wraps = false,
 	}, props.icon ~= nil and React.createElement(ButtonIcon, {
+		LayoutOrder = 1,
 		scale = props.scale,
 		intent = props.intent,
 		disabled = props.disabled,
@@ -290,6 +293,7 @@ local Button = React.forwardRef(function(props, ref)
 		spinning = props.spinning,
 		styleOverride = props.styleOverride,
 	}), props.text ~= nil and React.createElement(ButtonText, {
+		LayoutOrder = 2,
 		text = props.text,
 		intent = props.intent,
 		disabled = props.disabled,

package/out/Components/Input/Checkbox.luau

@@ -67,6 +67,7 @@ local function Checkbox(props)
 	_attributes.BackgroundTransparency = _condition_2
 	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.checkbox.intents).backgroundColor
 	_attributes.AutoButtonColor = false
+	_attributes.BorderSizePixel = 0
 	_attributes.Image = backgroundImage.Image
 	_attributes.ImageColor3 = backgroundImage.ImageColor3
 	_attributes.ImageTransparency = backgroundImage.ImageTransparency

package/out/Components/Input/HoverButton.luau

@@ -35,7 +35,7 @@ local function HoverButton(propSet)
 	_attributes.BackgroundTransparency = props.BackgroundTransparency
 	_attributes.BorderColor3 = props.BorderColor3
 	_attributes.BorderMode = props.BorderMode
-	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.BorderSizePixel = if props.BorderSizePixel == nil then 0 else props.BorderSizePixel
 	_attributes.ClipsDescendants = props.ClipsDescendants
 	_attributes.LayoutOrder = props.LayoutOrder
 	_attributes.NextSelectionDown = props.NextSelectionDown

package/out/Components/Input/Input.luau

@@ -67,6 +67,7 @@ local function Input(props)
 	_attributes.LayoutOrder = props.LayoutOrder
 	_attributes.Visible = props.Visible
 	_attributes.ZIndex = props.ZIndex
+	_attributes.BorderSizePixel = 0
 	_attributes.Image = backgroundImage.Image
 	_attributes.ImageColor3 = backgroundImage.ImageColor3
 	_attributes.ImageTransparency = backgroundImage.ImageTransparency
@@ -123,7 +124,7 @@ local function Input(props)
 	_attributes_2.Archivable = props.Archivable
 	_attributes_2.BorderColor3 = props.BorderColor3
 	_attributes_2.BorderMode = props.BorderMode
-	_attributes_2.BorderSizePixel = props.BorderSizePixel
+	_attributes_2.BorderSizePixel = if props.BorderSizePixel == nil then 0 else props.BorderSizePixel
 	_attributes_2.ClipsDescendants = props.ClipsDescendants
 	_attributes_2.Rotation = props.Rotation
 	_attributes_2.Selectable = props.Selectable

package/out/Components/Input/Select.luau

@@ -71,6 +71,7 @@ local function SelectOption(props)
 	_attributes.Size = UDim2.new(1, 0, 0, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.Y
 	_attributes.BackgroundTransparency = 0
+	_attributes.BorderSizePixel = 0
 	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, "primary", if context.selected == props.index then "focus" elseif hover then "hover" else "default", theme.components.select.intents).backgroundColor
 	_attributes.AutoButtonColor = false
 	local _attributes_1 = table.clone(props)
@@ -202,6 +203,7 @@ local function SelectSearchInput(props)
 		Size = UDim2.fromScale(1, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 	}, _exp, React.createElement(Input, _attributes))
 end
 local function SelectGroupHeader(props)
@@ -486,6 +488,7 @@ local Select = React.forwardRef(function(props, ref)
 		local _attributes_3 = {
 			key = "SelectDropdown",
 			BackgroundTransparency = 0,
+			BorderSizePixel = 0,
 			BackgroundColor3 = theme.components.select.dropDownBackgroundColor,
 			AnchorPoint = Vector2.zero,
 		}
@@ -532,6 +535,7 @@ local Select = React.forwardRef(function(props, ref)
 		Size = UDim2.fromScale(1, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		Event = {
 			Activated = activateSelect,
 		},

package/out/Components/Input/Slider.luau

@@ -243,7 +243,7 @@ local Slider = React.forwardRef(function(props, ref)
 	_attributes.BackgroundTransparency = _condition_2
 	_attributes.BorderColor3 = props.BorderColor3
 	_attributes.BorderMode = props.BorderMode
-	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.BorderSizePixel = if props.BorderSizePixel == nil then 0 else props.BorderSizePixel
 	_attributes.ClipsDescendants = props.ClipsDescendants
 	_attributes.Interactable = props.Interactable
 	_attributes.LayoutOrder = props.LayoutOrder
@@ -273,6 +273,7 @@ local Slider = React.forwardRef(function(props, ref)
 		AnchorPoint = Vector2.new(0.5, 0.5),
 		BackgroundTransparency = theme.bar.backgroundTransparency,
 		BackgroundColor3 = theme.bar.backgroundColor,
+		BorderSizePixel = 0,
 	}, React.createElement("uistroke", {
 		key = "Stroke",
 		Thickness = theme.bar.borderThickness,
@@ -289,6 +290,7 @@ local Slider = React.forwardRef(function(props, ref)
 	local _uDim2 = UDim2.new(padding + padding, UDim.new(0, 0))
 	_attributes_1.Size = _exp_1 - _uDim2
 	_attributes_1.BackgroundTransparency = 1
+	_attributes_1.BorderSizePixel = 0
 	_attributes_1.Position = UDim2.fromScale(0.5, 0.5)
 	_attributes_1.AnchorPoint = Vector2.new(0.5, 0.5)
 	local _condition_3 = props.highlight ~= nil
@@ -297,6 +299,7 @@ local Slider = React.forwardRef(function(props, ref)
 			key = "Highlight",
 			BackgroundColor3 = theme.bar.highlight.backgroundColor,
 			BackgroundTransparency = theme.bar.highlight.backgroundTransparency,
+			BorderSizePixel = 0,
 		}
 		local _result
 		if props.highlight == "start" then

package/out/Components/Input/Switch.luau

@@ -95,6 +95,7 @@ local function Switch(props)
 	_attributes.AutoButtonColor = false
 	_attributes.Size = UDim2.new(trackWidth, trackHeight)
 	_attributes.ZIndex = props.ZIndex
+	_attributes.BorderSizePixel = 0
 	_attributes.BackgroundColor3 = trackBackgroundColor
 	local _result
 	if props.disabled then

package/out/Components/Interaction/Modal.luau

@@ -215,6 +215,7 @@ local function Modal(props)
 				AutoButtonColor = false,
 				AutomaticSize = panelAutomaticSize,
 				BackgroundTransparency = 1,
+				BorderSizePixel = 0,
 				ImageTransparency = 1,
 				Position = if props.draggable then UDim2.fromScale(0.5, 0.5) else nil,
 				Size = panelSize,
@@ -229,6 +230,7 @@ local function Modal(props)
 				Active = true,
 				BackgroundColor3 = theme.components.modal.backdrop.backgroundColor,
 				BackgroundTransparency = backdropTransparency,
+				BorderSizePixel = 0,
 				ZIndex = backdropZIndex,
 				Event = {
 					Activated = function()
@@ -241,6 +243,7 @@ local function Modal(props)
 				key = "ModalPanel",
 				Size = UDim2.fromScale(1, 1),
 				BackgroundTransparency = 1,
+				BorderSizePixel = 0,
 				GroupTransparency = panelTransparency,
 				ZIndex = 2,
 			}, not props.draggable and (React.createElement("uilistlayout", {

package/out/Components/Interaction/Toast.luau

@@ -122,6 +122,7 @@ local function Toast(_param)
 	_attributes.Size = UDim2.fromScale(0, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	_attributes.GroupTransparency = groupTransparency
 	local _condition_1 = children ~= nil and children
 	if not _condition_1 then

package/out/Components/Interaction/Tooltip.luau

@@ -115,6 +115,7 @@ local function TooltipPopup(props)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	_attributes.GroupTransparency = groupTransparency
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	local _exp_1 = React.createElement(Padding, {
 		resolvedPadding = resolvedPadding,
 	})
@@ -146,12 +147,14 @@ local function TooltipPopup(props)
 		Size = UDim2.fromOffset(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 	}, _exp_1, React.createElement("frame", {
 		key = "Content",
 		Size = UDim2.fromOffset(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundColor3 = intent.backgroundColor,
 		BackgroundTransparency = intent.backgroundTransparency,
+		BorderSizePixel = 0,
 	}, _exp_2, _exp_3, _exp_4, _exp_5, if type(_content) == "string" then React.createElement(Text, {
 		name = "TooltipText",
 		text = props.content,

package/out/Components/Layout/Accordion.luau

@@ -255,6 +255,7 @@ local function RenderedAccordionItem(props)
 	})), mounted and (React.createElement("frame", {
 		key = "ContentClip",
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		ClipsDescendants = true,
 		Size = height:map(function(value)
 			local _exp = UDim2.fromScale(1, 0)
@@ -265,6 +266,7 @@ local function RenderedAccordionItem(props)
 		key = "Content",
 		BackgroundColor3 = theme.components.accordion.content.backgroundColor,
 		BackgroundTransparency = theme.components.accordion.content.backgroundTransparency,
+		BorderSizePixel = 0,
 		Size = UDim2.fromScale(1, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
 		Change = {

package/out/Components/Layout/BreakpointProvider.luau

@@ -53,6 +53,7 @@ local BreakpointProvider = React.forwardRef(function(props, ref)
 	_attributes.LayoutOrder = props.LayoutOrder
 	_attributes.Size = UDim2.fromScale(1, 1)
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	_attributes.Change = {
 		AbsoluteSize = function(instance)
 			return resolve(instance.AbsoluteSize.X)

package/out/Components/Layout/Column.luau

@@ -38,6 +38,7 @@ local Column = React.forwardRef(function(props, ref)
 	_attributes.Size = UDim2.new(widthScale, widthOffset, 0, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.Y
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	return React.createElement("frame", _attributes, props.children)
 end)
 return {

package/out/Components/Layout/Container.luau

@@ -34,7 +34,7 @@ local Container = React.forwardRef(function(props, ref)
 	_attributes.BackgroundTransparency = _condition_1
 	_attributes.BorderColor3 = props.BorderColor3
 	_attributes.BorderMode = props.BorderMode
-	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.BorderSizePixel = if props.BorderSizePixel == nil then 0 else props.BorderSizePixel
 	_attributes.ClipsDescendants = props.ClipsDescendants
 	_attributes.Interactable = props.Interactable
 	_attributes.LayoutOrder = props.LayoutOrder
@@ -93,6 +93,7 @@ local Container = React.forwardRef(function(props, ref)
 		key = if props.name ~= nil then `{props.name}CenterWrapper` else "ContainerCenterWrapper",
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		ZIndex = props.ZIndex,
 		LayoutOrder = props.LayoutOrder,
 	}, React.createElement("uilistlayout", {

package/out/Components/Layout/Draggable.luau

@@ -81,6 +81,7 @@ local function Placeholder(props)
 	local theme = React.useContext(CleanThemeContext)
 	local _attributes = {
 		key = "DraggablePlaceholder",
+		BorderSizePixel = 0,
 	}
 	for _k, _v in props do
 		_attributes[_k] = _v

package/out/Components/Layout/Fieldset.luau

@@ -19,6 +19,7 @@ local function FieldsetLabel(props)
 		key = "FieldsetLabelButton",
 		Size = UDim2.fromOffset(0, 0),
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		AutomaticSize = Enum.AutomaticSize.XY,
 		Event = {
 			Activated = function()

package/out/Components/Layout/Grid.luau

@@ -41,6 +41,7 @@ local function GridCell(props)
 		Size = UDim2.new(props.width, UDim.new(0, if props.locked then props.height else 0)),
 		AutomaticSize = if props.locked then Enum.AutomaticSize.None else Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		ClipsDescendants = true,
 		Change = if props.locked then nil else {
 			AbsoluteSize = reportMeasurement,
@@ -131,6 +132,7 @@ local Grid = React.forwardRef(function(props, ref)
 	_attributes.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
 	_attributes.AutomaticSize = Enum.AutomaticSize.Y
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	_attributes.Change = {
 		AbsoluteSize = function(instance)
 			local nextWidth = instance.AbsoluteSize.X

package/out/Components/Layout/Group.d.ts

@@ -13,10 +13,10 @@ interface GroupElementProps {
     children?: React.ReactNode;
     name?: string;
 }
-declare function GroupElement(props: GroupElementProps): boolean | ReadonlyMap<React.Key, React.ReactNode> | {
+declare function GroupElement(props: GroupElementProps): boolean | React.JSX.Element | ReadonlyMap<React.Key, React.ReactNode> | {
     readonly [key: string]: React.ReactNode;
     readonly [key: number]: React.ReactNode;
-} | readonly React.ReactNode[] | React.JSX.Element | undefined;
+} | readonly React.ReactNode[] | undefined;
 interface GroupProps {
     children?: React.ReactNode;
     BackgroundTransparency?: number;

package/out/Components/Layout/Group.luau

@@ -83,6 +83,7 @@ local function GroupElement(props)
 	end
 	_attributes.key = _condition_4
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	_attributes.Change = {
 		AbsoluteSize = function(instance)

package/out/Components/Layout/Pagination.luau

@@ -147,10 +147,17 @@ local function PaginationItemVisual(props)
 		_result = _result_2
 	end
 	local colors = ColorHelper:getIntentColors(theme, "primary", _result, theme.components.pagination.item.intents)
-	local _exp = React.createElement(Corners, {
+	local borderThickness = theme.components.pagination.item.borderThickness
+	local _exp = borderThickness > 0 and (React.createElement("uistroke", {
+		key = "Stroke",
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		Thickness = borderThickness,
+		Color = colors.borderColor,
+	}))
+	local _exp_1 = React.createElement(Corners, {
 		radius = theme.components.pagination.item.cornerRadius,
 	})
-	local _exp_1 = React.createElement(Padding, {
+	local _exp_2 = React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.pagination.item.spacing, theme.components.pagination.item.padding),
 	})
 	local _attributes = {}
@@ -159,7 +166,7 @@ local function PaginationItemVisual(props)
 		_condition = theme.components.pagination.item.boxShadow
 	end
 	_attributes.value = _condition
-	return React.createElement(React.Fragment, nil, _exp, _exp_1, React.createElement(BoxShadow, _attributes), if props.text ~= nil then (React.createElement(Text, {
+	return React.createElement(React.Fragment, nil, _exp, _exp_1, _exp_2, React.createElement(BoxShadow, _attributes), if props.text ~= nil then (React.createElement(Text, {
 		name = "PaginationItemText",
 		text = props.text,
 		TextColor3 = colors.textColor,
@@ -202,8 +209,7 @@ local function PaginationButton(props)
 			AutomaticSize = Enum.AutomaticSize.XY,
 			BackgroundColor3 = if props.disabled then state.disabledColors.backgroundColor else state.defaultColors.backgroundColor,
 			BackgroundTransparency = if props.disabled then state.disabledColors.backgroundTransparency else state.defaultColors.backgroundTransparency,
-			BorderSizePixel = theme.components.pagination.item.borderThickness,
-			BorderColor3 = if props.disabled then state.disabledColors.borderColor else state.defaultColors.borderColor,
+			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Image = state.defaultImage.Image,
 			ImageColor3 = state.defaultImage.ImageColor3,
@@ -223,7 +229,6 @@ local function PaginationButton(props)
 		hover = if props.disabled then nil else {
 			BackgroundColor3 = state.hoverColors.backgroundColor,
 			BackgroundTransparency = state.hoverColors.backgroundTransparency,
-			BorderColor3 = state.hoverColors.borderColor,
 			Image = state.hoverImage.Image,
 			ImageColor3 = state.hoverImage.ImageColor3,
 			ImageTransparency = state.hoverImage.ImageTransparency,
@@ -235,7 +240,6 @@ local function PaginationButton(props)
 		focus = {
 			BackgroundColor3 = state.focusColors.backgroundColor,
 			BackgroundTransparency = state.focusColors.backgroundTransparency,
-			BorderColor3 = state.focusColors.borderColor,
 			Image = state.focusImage.Image,
 			ImageColor3 = state.focusImage.ImageColor3,
 			ImageTransparency = state.focusImage.ImageTransparency,

package/out/Components/Layout/Row.luau

@@ -23,6 +23,7 @@ local Row = React.forwardRef(function(props, ref)
 	_attributes.Size = UDim2.fromScale(1, 1)
 	_attributes.AutomaticSize = Enum.AutomaticSize.Y
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	_attributes.Change = {
 		AbsoluteSize = function(instance)
 			local nextWidth = instance.AbsoluteSize.X

package/out/Components/Layout/Scroller.luau

@@ -54,6 +54,7 @@ local function Scroller(props)
 		Size = UDim2.new(1, if isScrolling then -thickness - spacing else 0, 0, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 	}, props.children))
 end
 return {

package/out/Components/Layout/Table.luau

@@ -204,6 +204,7 @@ local function TableCellContent(props)
 		Size = UDim2.fromOffset(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		Change = {
 			AbsoluteSize = reportMeasurement,
 		},

package/out/Components/Surface/Card.luau

@@ -460,6 +460,7 @@ local Card = React.forwardRef(function(props, ref)
 		_attributes_1.key = _condition_1
 		_attributes_1.ref = overlayWrapperRef
 		_attributes_1.BackgroundTransparency = 1
+		_attributes_1.BorderSizePixel = 0
 		_attributes_1.ClipsDescendants = false
 		_attributes_1.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
 		_attributes_1.AutomaticSize = SizeHelper:GetAutoSize(props)

package/out/Components/Surface/Icon.luau

@@ -27,6 +27,7 @@ local function SpinningIcon(props)
 	end
 	_attributes.key = _condition_1
 	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
 	_attributes.Size = UDim2.fromOffset(0, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	return React.createElement("frame", _attributes, React.createElement(Icon, {
@@ -81,7 +82,7 @@ function Icon(props)
 	_attributes.BackgroundColor3 = props.BackgroundColor3
 	_attributes.BorderColor3 = props.BorderColor3
 	_attributes.BorderMode = props.BorderMode
-	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.BorderSizePixel = if props.BorderSizePixel == nil then 0 else props.BorderSizePixel
 	_attributes.ClipsDescendants = props.ClipsDescendants
 	_attributes.Selectable = props.Selectable
 	_attributes.SelectionImageObject = props.SelectionImageObject

package/out/Components/Surface/ProgressBar.luau

@@ -166,6 +166,7 @@ local ProgressBar = React.forwardRef(function(props, ref)
 		local _attributes_2 = {
 			key = "Stripe",
 			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
 		}
 		local _condition_8 = resolvedStripeImage.ImageTransparency
 		if _condition_8 == nil then
@@ -195,6 +196,7 @@ local ProgressBar = React.forwardRef(function(props, ref)
 	end
 	_attributes_2.key = _condition_8
 	_attributes_2.BackgroundTransparency = 1
+	_attributes_2.BorderSizePixel = 0
 	_attributes_2.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 0))
 	_attributes_2.AutomaticSize = Enum.AutomaticSize.Y
 	_attributes_2.Position = SizeHelper:GetPosition(props)
@@ -207,6 +209,7 @@ local ProgressBar = React.forwardRef(function(props, ref)
 	}, React.createElement("frame", {
 		key = "ProgressBarHeader",
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		Size = UDim2.fromScale(1, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
 	}, React.createElement(HStack, {

package/out/Components/Typography/Text.luau

@@ -31,6 +31,7 @@ local Text = React.forwardRef(function(props, ref)
 		_attributes.AutomaticSize = Enum.AutomaticSize.XY
 		_attributes.AnchorPoint = props.AnchorPoint
 		_attributes.BackgroundTransparency = 1
+		_attributes.BorderSizePixel = 0
 		_attributes.Position = props.Position
 		_attributes.ZIndex = props.ZIndex
 		_attributes.LayoutOrder = props.LayoutOrder
@@ -53,6 +54,7 @@ local Text = React.forwardRef(function(props, ref)
 				Size = UDim2.fromScale(0, 0),
 				AutomaticSize = Enum.AutomaticSize.XY,
 				BackgroundTransparency = 1,
+				BorderSizePixel = 0,
 				TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor,
 				Text = character,
 			}
@@ -127,7 +129,7 @@ local Text = React.forwardRef(function(props, ref)
 	_attributes.BackgroundColor3 = props.BackgroundColor3
 	_attributes.BorderColor3 = props.BorderColor3
 	_attributes.BorderMode = props.BorderMode
-	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.BorderSizePixel = if props.BorderSizePixel == nil then 0 else props.BorderSizePixel
 	_attributes.ClipsDescendants = props.ClipsDescendants
 	_attributes.Selectable = props.Selectable
 	_attributes.SelectionImageObject = props.SelectionImageObject

package/out/Providers/overlay.provider.luau

@@ -17,6 +17,7 @@ local function OverlayProvider(props)
 		end,
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
 		ZIndex = 100000,
 		Active = false,
 	}))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "description": "A clean UI library for Roblox TypeScript projects",
   "main": "out/init.lua",
   "scripts": {