diff --git a/.moonwave/static/climbOfChaos.png b/.moonwave/static/climbOfChaos.png
new file mode 100644
index 0000000..b2946d3
Binary files /dev/null and b/.moonwave/static/climbOfChaos.png differ
diff --git a/.moonwave/static/lonekaMenu.png b/.moonwave/static/lonekaMenu.png
new file mode 100644
index 0000000..386b369
Binary files /dev/null and b/.moonwave/static/lonekaMenu.png differ
diff --git a/.moonwave/static/scribel.png b/.moonwave/static/scribel.png
new file mode 100644
index 0000000..1da7ebc
Binary files /dev/null and b/.moonwave/static/scribel.png differ
diff --git a/docs/in-production.md b/docs/in-production.md
index e23f5cf..0f432c7 100644
--- a/docs/in-production.md
+++ b/docs/in-production.md
@@ -2,14 +2,21 @@
sidebar_position: 6
---
-# Use In Production
+import scribel from '/scribel.png';
+import climbOfChaos from '/climbOfChaos.png';
+import lonekaMenu from '/lonekaMenu.png';
+
+# Production Usage
These projects use OnyxUI to power their user experience:
-- [Scribel](https://www.roblox.com/games/18609236852)
-- [Climb of Chaos](https://www.roblox.com/games/16882394262)
-- [Kitty Dash](https://www.roblox.com/games/14958801951)
+* ## [Loneka](https://www.roblox.com/groups/15494708)
+ * *
+* ## [Scribel](https://www.roblox.com/games/18609236852)
+ *
+* ## [Climb of Chaos](https://www.roblox.com/games/16882394262)
+ *
:::tip List your project
-If you'd like your game or resource featured here, open an issue or pull request!
+If you'd like your game or resource featured here, open an issue or pull request! If it's pretty, I want it listed!
:::
\ No newline at end of file
diff --git a/docs/intro.md b/docs/intro.md
index d6be5e3..a596f48 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -19,7 +19,7 @@ sidebar_position: 1
## Project structure
-OnyxUI is structured as a collection of modules, separated by folders. This is unconventional, but necessary for exposing types so you can properly build off of OnyxUI. Here's a basic usage sample below:
+OnyxUI is structured as a collection of modules. This is unconventional, but necessary for exposing types so you can properly build off of OnyxUI. Here's a basic usage sample below:
```lua
local OnyxUI = require(path.to.OnyxUI)
diff --git a/docs/styling-props.md b/docs/styling-props.md
index 3c35e6a..39fc35e 100644
--- a/docs/styling-props.md
+++ b/docs/styling-props.md
@@ -10,4 +10,4 @@ For a full list of supported styling props, see the [`Base`](/api/Base) componen
## Use in custom components
-To support styling props in your own components, make use of the [`CombineProps`](/api/CombineProps) utility to pass props through automatically.
\ No newline at end of file
+To support styling props in your own components, make use of the [`CombineProps`](/api/Util#CombineProps) utility to pass props through automatically.
\ No newline at end of file
diff --git a/docs/utils.md b/docs/util.md
similarity index 79%
rename from docs/utils.md
rename to docs/util.md
index ae58bab..21b2f2b 100644
--- a/docs/utils.md
+++ b/docs/util.md
@@ -11,8 +11,11 @@ Important utilities for UI development. These are also used by OnyxUI itself!
Want to ensure your component props are Fusion `Value`s? This makes it a one-line operation.
```lua
+local Util = require(OnyxUI.Util)
+
return function(Props)
local MyProp = Util.EnsureValue(Props.MyProp, "string", "Default")
+end
```
## [CombineProps](/api/Util#CombineProps)
@@ -20,6 +23,8 @@ return function(Props)
Let's say you have a "CustomButton" component, and you want it to support `Size`, `Position`, and other arbitrary properties. Manually implementing all that boilerplate in the component itself is tedious. So let's have `CombineProps` do the passthrough for us:
```lua
+local Util = require(OnyxUI.Util)
+
return function(Props)
return BaseButton(Util.CombineProps(Props, {
BackgroundTransparency = 0,
@@ -34,4 +39,14 @@ end
## [Colors](/api/Util#Colors)
-Color shorthands imported from [TailwindCSS's color palette](https://tailwindcss.com/docs/customizing-colors#default-color-palette). So you don't have to worry about color picking anymore.
\ No newline at end of file
+Color shorthands imported from [TailwindCSS's color palette](https://tailwindcss.com/docs/customizing-colors#default-color-palette). So you don't have to worry about color picking anymore.
+
+```lua
+local Util = require(OnyxUI.Util)
+
+return function(Props)
+ return Button {
+ Color = Util.Colors.Red["500"], -- Shade "500" of Colors.Red
+ }
+end
+```
\ No newline at end of file