From 7092e69d0eb1e4a4477444532117af9eab9736ed Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Tue, 1 Oct 2024 23:04:39 +0200
Subject: [PATCH] Add a new `@studiocms/ui` package (#296)

* Initial commit for `@studiocms/ui`

* Add new components & UI playground

- Adjust button, divider, input styles
- Added "Center" component, UI playground
- Moved all CSS files into a global CSS file with imports
- Added the font to the playground & UI library

* Add .editorconfig, update biome.json

* Add textboxes & checkboxes, ID gen function & more

- Added the utils folder to the package's exports
- Format the TODO's in the README
- Buttons can now be disabled
- Added a textarea component
- Added a checkbox component
- Added a function to generate random names & IDs if not provided
- Added a default gap size to the row component
- Added an icon component to easily grab icons in a type-safe manner
- Added new components to playground

* Linted files & added completed components to readme

* Add cards, radio inputs, toggles, toasts, warning color

- Added a new Card component.
- Added a radio group component.
- Added a toggle component.
- Added a Toaster component and a toast function to create toasts.
- Added a new "warning" colorway to all components that support colored variants.

* Add modals, new button variant, change CSS vars

- Added a Modal component.
- Added a new, "flat" button variant.
- All color variables now come in hsl format and need to be wrapped in hsl(). This allows for easier opacity management
- Some fixes in regards to textarea sizing on small devices

* Forgot to fucking lint again :skull:

Windows decided now would be a good idea to change 190 files on it's own so yeah

* Add a select component, fix various bugs

- Added a new select component.
- Some changes to input & textarea transitions
- Modals now show overflow to allow for selects to be used
- Fixed radio inputs not actually being disabled

* Add dropdown & user components

- Added a dropdown component.
- Added a user component.
- Moved all colorways into a shared type.
- Removed the transparent backgrounds from select elements for better visibility.
- Adjusted the shadows for select dropdowns & toasts.

* Can windows please stop formatting my files in fucked up ways I swear to god

* Add sidebar, double sidebar, root layout component

- Added new sidebar & double sidebar components.
- Added a new RootLayout component.

* Add right click trigger to dropdowns

- Added right click (and both mouse buttons) triggers to dropdowns
- Added option to register buttons for opening and closing single sidebar individually

* Update package.json

* Update DropdownTests.astro

* Lint :skull:

* Update & dedupe packages

* Update package.json

* update deployment action

* Update package.json

* Update package.json

* Add changeset

* Update README.md

* Add is:global to styles to eliminate race condition

- Added is:global to all component css style tags because css is being a cascading bitch

* Remove experimental directRenderScript

* Fix dropdown options not filling parent element

* Adjust modal and dropdown paddings

* Changes to folder structure & accessibility fixes

- Moved all components into their own folders and moved all CSS to CSS files. This should help eliminate the race condition pointed out by @hkbertoson in #296 .
- All buttons *should* now follow the web accessibility guidelines for colors and should pass WCAG Level AAA.

* Add pseudo-docs to README, option to disable radios

- Wrote pseudo-docs for the README file of the UI library.
- It's now possible to pass a class to the User component's container.
- Radio options can not be disabled individually.
- Improved the helper for the single sidebar a bit.

* Change icons for dropdowns to slots

* Update README.md

* Update README.md

* Update Modal.css

- Fixed the modal backdrop animation taking a whole second to complete

* Improve double sidebar helper API

* Update packages/studiocms_ui/README.md

Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>

* Fix navbar toggle for single sidebar not showing

* Remove unused BaseHead component

Seriously this is a UI lib why did I think putting this here would benefit the UI lib.

* Revert "Remove unused BaseHead component"

This reverts commit 308d332d50a4d879011270d6676220b1b86fc291.

---------

Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>
---
 .changeset/config.json                        |   5 +-
 .changeset/pre.json                           |   2 +
 .changeset/rotten-dancers-trade.md            |   5 +
 .moon/workspace.yml                           |   2 +
 package.json                                  |   3 +
 packages/studiocms/tsconfig.json              |  70 ++-
 packages/studiocms_assets/tsconfig.json       |   8 +-
 packages/studiocms_auth/tsconfig.json         |  30 +-
 .../studiocms_betaresources/tsconfig.json     |  22 +-
 packages/studiocms_blog/tsconfig.json         |  24 +-
 packages/studiocms_core/tsconfig.json         |  16 +-
 packages/studiocms_dashboard/tsconfig.json    |  34 +-
 packages/studiocms_frontend/tsconfig.json     |  22 +-
 packages/studiocms_imagehandler/tsconfig.json |  16 +-
 packages/studiocms_renderers/tsconfig.json    |  16 +-
 packages/studiocms_robotstxt/tsconfig.json    |   8 +-
 packages/studiocms_ui/.gitignore              |   1 +
 packages/studiocms_ui/README.md               | 564 ++++++++++++++++++
 packages/studiocms_ui/moon.yml                |   7 +
 packages/studiocms_ui/package.json            |  48 ++
 packages/studiocms_ui/src/components.ts       |  22 +
 .../src/components/BaseHead.astro             |  22 +
 .../src/components/Button/Button.astro        |  45 ++
 .../src/components/Button/Button.css          | 292 +++++++++
 .../src/components/Card/Card.astro            |  25 +
 .../studiocms_ui/src/components/Card/Card.css |  37 ++
 .../src/components/Center/Center.astro        |   7 +
 .../src/components/Center/Center.css          |  10 +
 .../src/components/Checkbox/Checkbox.astro    |  63 ++
 .../src/components/Checkbox/Checkbox.css      | 117 ++++
 .../src/components/Divider/Divider.astro      |   9 +
 .../src/components/Divider/Divider.css        |  25 +
 .../src/components/Dropdown/Dropdown.astro    |  47 ++
 .../src/components/Dropdown/Dropdown.css      | 183 ++++++
 .../src/components/Dropdown/dropdown.ts       | 159 +++++
 .../src/components/Input/Input.astro          |  43 ++
 .../src/components/Input/Input.css            |  46 ++
 .../src/components/Modal/Modal.astro          |  54 ++
 .../src/components/Modal/Modal.css            | 109 ++++
 .../src/components/Modal/modal.ts             | 125 ++++
 .../components/RadioGroup/RadioGroup.astro    |  74 +++
 .../src/components/RadioGroup/RadioGroup.css  | 100 ++++
 .../studiocms_ui/src/components/Row/Row.astro |  14 +
 .../studiocms_ui/src/components/Row/Row.css   |  22 +
 .../src/components/Select/Select.astro        | 179 ++++++
 .../src/components/Select/Select.css          | 113 ++++
 .../src/components/Sidebar/Double.astro       |  11 +
 .../src/components/Sidebar/Double.css         | 142 +++++
 .../src/components/Sidebar/Single.astro       |   6 +
 .../src/components/Sidebar/Single.css         |  38 ++
 .../src/components/Sidebar/helpers.ts         | 120 ++++
 .../src/components/Textarea/Textarea.astro    |  49 ++
 .../src/components/Textarea/Textarea.css      |  53 ++
 .../src/components/Toast/Toaster.astro        | 155 +++++
 .../src/components/Toast/Toaster.css          | 160 +++++
 .../src/components/Toast/toast.ts             |  11 +
 .../src/components/Toggle/Toggle.astro        |  51 ++
 .../src/components/Toggle/Toggle.css          |  95 +++
 .../src/components/User/User.astro            |  28 +
 .../studiocms_ui/src/components/User/User.css |  40 ++
 packages/studiocms_ui/src/components/index.ts |  23 +
 packages/studiocms_ui/src/css/colors.css      | 106 ++++
 packages/studiocms_ui/src/css/global.css      |   4 +
 packages/studiocms_ui/src/css/resets.css      |  56 ++
 packages/studiocms_ui/src/css/sizes.css       |   0
 packages/studiocms_ui/src/css/spacings.css    |   0
 packages/studiocms_ui/src/env.d.ts            |  17 +
 .../studiocms_ui/src/icons/Checkmark.astro    |  13 +
 .../src/icons/ChevronUpDown.astro             |  13 +
 packages/studiocms_ui/src/icons/User.astro    |  13 +
 packages/studiocms_ui/src/icons/X-Mark.astro  |  13 +
 packages/studiocms_ui/src/layouts.ts          |   1 +
 .../studiocms_ui/src/layouts/RootLayout.astro |  34 ++
 packages/studiocms_ui/src/layouts/index.ts    |   2 +
 packages/studiocms_ui/src/types/index.ts      |  16 +
 packages/studiocms_ui/src/utils/Icon.astro    |  27 +
 packages/studiocms_ui/src/utils/colors.ts     |   1 +
 packages/studiocms_ui/src/utils/generateID.ts |   5 +
 packages/studiocms_ui/src/utils/headers.ts    | 190 ++++++
 .../studiocms_ui/src/utils/iconStrings.ts     |  29 +
 packages/studiocms_ui/tsconfig.json           |  27 +
 playgrounds/ui/.gitignore                     |  26 +
 playgrounds/ui/.vscode/extensions.json        |   4 +
 playgrounds/ui/.vscode/launch.json            |  11 +
 playgrounds/ui/README.md                      |  16 +
 playgrounds/ui/astro.config.mts               |   7 +
 playgrounds/ui/moon.yml                       |  30 +
 playgrounds/ui/package.json                   |  23 +
 playgrounds/ui/public/favicon.svg             |  41 ++
 playgrounds/ui/public/studiocms.svg           |   5 +
 .../ui/src/components/ButtonTests.astro       | 225 +++++++
 playgrounds/ui/src/components/CardTests.astro |  29 +
 .../ui/src/components/CheckboxTests.astro     |  77 +++
 .../ui/src/components/DropdownTests.astro     | 116 ++++
 .../ui/src/components/ModalTests.astro        |  70 +++
 .../ui/src/components/RadioGroupTests.astro   |  77 +++
 .../ui/src/components/SelectTests.astro       |  50 ++
 .../ui/src/components/ToastTests.astro        |  66 ++
 .../ui/src/components/ToggleTests.astro       |  77 +++
 playgrounds/ui/src/env.d.ts                   |   4 +
 playgrounds/ui/src/icons/ArrowLeft.astro      |  13 +
 playgrounds/ui/src/icons/Hamburger.astro      |  13 +
 playgrounds/ui/src/icons/Moon.astro           |  13 +
 playgrounds/ui/src/icons/Sun.astro            |  13 +
 .../ui/src/ideas/folder-system-client-side.ts |  24 +
 .../ui/src/layouts/DoubleSidebarLayout.astro  |  89 +++
 .../ui/src/layouts/SidebarLayout.astro        |  44 ++
 playgrounds/ui/src/pages/double-sidebar.astro |  39 ++
 playgrounds/ui/src/pages/index.astro          | 181 ++++++
 playgrounds/ui/src/pages/sidebar.astro        |  34 ++
 playgrounds/ui/src/utils/Icon.astro           |  29 +
 playgrounds/ui/tsconfig.json                  |  26 +
 pnpm-lock.yaml                                | 299 +++-------
 tsconfig.json                                 |  47 +-
 www/docs/tsconfig.json                        |   3 +-
 www/web/tsconfig.json                         |   5 +-
 116 files changed, 5986 insertions(+), 234 deletions(-)
 create mode 100644 .changeset/rotten-dancers-trade.md
 create mode 100644 packages/studiocms_ui/.gitignore
 create mode 100644 packages/studiocms_ui/README.md
 create mode 100644 packages/studiocms_ui/moon.yml
 create mode 100644 packages/studiocms_ui/package.json
 create mode 100644 packages/studiocms_ui/src/components.ts
 create mode 100644 packages/studiocms_ui/src/components/BaseHead.astro
 create mode 100644 packages/studiocms_ui/src/components/Button/Button.astro
 create mode 100644 packages/studiocms_ui/src/components/Button/Button.css
 create mode 100644 packages/studiocms_ui/src/components/Card/Card.astro
 create mode 100644 packages/studiocms_ui/src/components/Card/Card.css
 create mode 100644 packages/studiocms_ui/src/components/Center/Center.astro
 create mode 100644 packages/studiocms_ui/src/components/Center/Center.css
 create mode 100644 packages/studiocms_ui/src/components/Checkbox/Checkbox.astro
 create mode 100644 packages/studiocms_ui/src/components/Checkbox/Checkbox.css
 create mode 100644 packages/studiocms_ui/src/components/Divider/Divider.astro
 create mode 100644 packages/studiocms_ui/src/components/Divider/Divider.css
 create mode 100644 packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
 create mode 100644 packages/studiocms_ui/src/components/Dropdown/Dropdown.css
 create mode 100644 packages/studiocms_ui/src/components/Dropdown/dropdown.ts
 create mode 100644 packages/studiocms_ui/src/components/Input/Input.astro
 create mode 100644 packages/studiocms_ui/src/components/Input/Input.css
 create mode 100644 packages/studiocms_ui/src/components/Modal/Modal.astro
 create mode 100644 packages/studiocms_ui/src/components/Modal/Modal.css
 create mode 100644 packages/studiocms_ui/src/components/Modal/modal.ts
 create mode 100644 packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro
 create mode 100644 packages/studiocms_ui/src/components/RadioGroup/RadioGroup.css
 create mode 100644 packages/studiocms_ui/src/components/Row/Row.astro
 create mode 100644 packages/studiocms_ui/src/components/Row/Row.css
 create mode 100644 packages/studiocms_ui/src/components/Select/Select.astro
 create mode 100644 packages/studiocms_ui/src/components/Select/Select.css
 create mode 100644 packages/studiocms_ui/src/components/Sidebar/Double.astro
 create mode 100644 packages/studiocms_ui/src/components/Sidebar/Double.css
 create mode 100644 packages/studiocms_ui/src/components/Sidebar/Single.astro
 create mode 100644 packages/studiocms_ui/src/components/Sidebar/Single.css
 create mode 100644 packages/studiocms_ui/src/components/Sidebar/helpers.ts
 create mode 100644 packages/studiocms_ui/src/components/Textarea/Textarea.astro
 create mode 100644 packages/studiocms_ui/src/components/Textarea/Textarea.css
 create mode 100644 packages/studiocms_ui/src/components/Toast/Toaster.astro
 create mode 100644 packages/studiocms_ui/src/components/Toast/Toaster.css
 create mode 100644 packages/studiocms_ui/src/components/Toast/toast.ts
 create mode 100644 packages/studiocms_ui/src/components/Toggle/Toggle.astro
 create mode 100644 packages/studiocms_ui/src/components/Toggle/Toggle.css
 create mode 100644 packages/studiocms_ui/src/components/User/User.astro
 create mode 100644 packages/studiocms_ui/src/components/User/User.css
 create mode 100644 packages/studiocms_ui/src/components/index.ts
 create mode 100644 packages/studiocms_ui/src/css/colors.css
 create mode 100644 packages/studiocms_ui/src/css/global.css
 create mode 100644 packages/studiocms_ui/src/css/resets.css
 create mode 100644 packages/studiocms_ui/src/css/sizes.css
 create mode 100644 packages/studiocms_ui/src/css/spacings.css
 create mode 100644 packages/studiocms_ui/src/env.d.ts
 create mode 100644 packages/studiocms_ui/src/icons/Checkmark.astro
 create mode 100644 packages/studiocms_ui/src/icons/ChevronUpDown.astro
 create mode 100644 packages/studiocms_ui/src/icons/User.astro
 create mode 100644 packages/studiocms_ui/src/icons/X-Mark.astro
 create mode 100644 packages/studiocms_ui/src/layouts.ts
 create mode 100644 packages/studiocms_ui/src/layouts/RootLayout.astro
 create mode 100644 packages/studiocms_ui/src/layouts/index.ts
 create mode 100644 packages/studiocms_ui/src/types/index.ts
 create mode 100644 packages/studiocms_ui/src/utils/Icon.astro
 create mode 100644 packages/studiocms_ui/src/utils/colors.ts
 create mode 100644 packages/studiocms_ui/src/utils/generateID.ts
 create mode 100644 packages/studiocms_ui/src/utils/headers.ts
 create mode 100644 packages/studiocms_ui/src/utils/iconStrings.ts
 create mode 100644 packages/studiocms_ui/tsconfig.json
 create mode 100644 playgrounds/ui/.gitignore
 create mode 100644 playgrounds/ui/.vscode/extensions.json
 create mode 100644 playgrounds/ui/.vscode/launch.json
 create mode 100644 playgrounds/ui/README.md
 create mode 100644 playgrounds/ui/astro.config.mts
 create mode 100644 playgrounds/ui/moon.yml
 create mode 100644 playgrounds/ui/package.json
 create mode 100644 playgrounds/ui/public/favicon.svg
 create mode 100644 playgrounds/ui/public/studiocms.svg
 create mode 100644 playgrounds/ui/src/components/ButtonTests.astro
 create mode 100644 playgrounds/ui/src/components/CardTests.astro
 create mode 100644 playgrounds/ui/src/components/CheckboxTests.astro
 create mode 100644 playgrounds/ui/src/components/DropdownTests.astro
 create mode 100644 playgrounds/ui/src/components/ModalTests.astro
 create mode 100644 playgrounds/ui/src/components/RadioGroupTests.astro
 create mode 100644 playgrounds/ui/src/components/SelectTests.astro
 create mode 100644 playgrounds/ui/src/components/ToastTests.astro
 create mode 100644 playgrounds/ui/src/components/ToggleTests.astro
 create mode 100644 playgrounds/ui/src/env.d.ts
 create mode 100644 playgrounds/ui/src/icons/ArrowLeft.astro
 create mode 100644 playgrounds/ui/src/icons/Hamburger.astro
 create mode 100644 playgrounds/ui/src/icons/Moon.astro
 create mode 100644 playgrounds/ui/src/icons/Sun.astro
 create mode 100644 playgrounds/ui/src/ideas/folder-system-client-side.ts
 create mode 100644 playgrounds/ui/src/layouts/DoubleSidebarLayout.astro
 create mode 100644 playgrounds/ui/src/layouts/SidebarLayout.astro
 create mode 100644 playgrounds/ui/src/pages/double-sidebar.astro
 create mode 100644 playgrounds/ui/src/pages/index.astro
 create mode 100644 playgrounds/ui/src/pages/sidebar.astro
 create mode 100644 playgrounds/ui/src/utils/Icon.astro
 create mode 100644 playgrounds/ui/tsconfig.json

diff --git a/.changeset/config.json b/.changeset/config.json
index 7148a21da..a5b44a41e 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -13,12 +13,13 @@
       "@studiocms/frontend",
       "@studiocms/imagehandler",
       "@studiocms/renderers",
-      "@studiocms/robotstxt"
+      "@studiocms/robotstxt",
+      "@studiocms/ui"
     ]
   ],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["web", "docs", "node-playground"]
+  "ignore": ["web", "docs", "node-playground", "ui-playground"]
 }
diff --git a/.changeset/pre.json b/.changeset/pre.json
index 971b9530a..f58d87d23 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -13,7 +13,9 @@
     "@studiocms/renderers": "0.1.0-beta.4",
     "@studiocms/robotstxt": "0.1.0-beta.4",
     "@studiocms/blog": "0.1.0-beta.1",
+    "@studiocms/ui": "0.1.0-beta.7",
     "node-playground": "0.0.1",
+    "ui-playground": "0.0.1",
     "docs": "0.0.1",
     "web": "0.0.1"
   },
diff --git a/.changeset/rotten-dancers-trade.md b/.changeset/rotten-dancers-trade.md
new file mode 100644
index 000000000..960cc7f00
--- /dev/null
+++ b/.changeset/rotten-dancers-trade.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Added a new UI library for the dashboard rework
diff --git a/.moon/workspace.yml b/.moon/workspace.yml
index c896abda6..3c3d1cadd 100644
--- a/.moon/workspace.yml
+++ b/.moon/workspace.yml
@@ -15,9 +15,11 @@ projects:
   studiocms_imagehandler: 'packages/studiocms_imagehandler'
   studiocms_renderers: 'packages/studiocms_renderers'
   studiocms_robotstxt: 'packages/studiocms_robotstxt'
+  studiocms_ui: 'packages/studiocms_ui'
 
   # Playgrounds
   playground: 'playgrounds/node'
+  ui-playground: 'playgrounds/ui'
   # cloudflare-playground: 'playgrounds/cloudflare' - Removed for now till we start experimenting with Cloudflare again.
 
   # Web Sites & Docs
diff --git a/package.json b/package.json
index df2d8cd46..cf11e2335 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
     "playground:login": "pnpm --filter node-playground db:login",
     "playground:link": "pnpm --filter node-playground db:link",
     "playground:push": "pnpm --filter node-playground db:push",
+    "ui:dev": "pnpm --filter ui-playground dev",
+    "ui:build": "pnpm --filter ui-playground build",
+    "ui:preview": "pnpm --filter ui-playground preview",
     "build": "pnpm --filter node-playground build",
     "lint": "biome check .",
     "lint:fix": "biome check --write .",
diff --git a/packages/studiocms/tsconfig.json b/packages/studiocms/tsconfig.json
index 121fd8f5d..73fb2bc44 100644
--- a/packages/studiocms/tsconfig.json
+++ b/packages/studiocms/tsconfig.json
@@ -8,13 +8,79 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/assets": ["../studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["../studiocms_assets/src/*"],
+      "@studiocms/auth": ["../studiocms_auth/src/index.ts"],
+      "@studiocms/auth/*": ["../studiocms_auth/src/*"],
+      "@studiocms/betaresources": ["../studiocms_betaresources/src/index.ts"],
+      "@studiocms/betaresources/*": ["../studiocms_betaresources/src/*"],
+      "@studiocms/blog": ["../studiocms_blog/index.ts"],
+      "@studiocms/blog/*": ["../studiocms_blog/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/dashboard": ["../studiocms_dashboard/src/index.ts"],
+      "@studiocms/dashboard/*": ["../studiocms_dashboard/src/*"],
+      "@studiocms/frontend": ["../studiocms_frontend/src/index.ts"],
+      "@studiocms/frontend/*": ["../studiocms_frontend/src/*"],
+      "@studiocms/imagehandler": ["../studiocms_imagehandler/src/index.ts"],
+      "@studiocms/imagehandler/*": ["../studiocms_imagehandler/src/*"],
+      "@studiocms/renderers": ["../studiocms_renderers/src/index.ts"],
+      "@studiocms/renderers/*": ["../studiocms_renderers/src/*"],
+      "@studiocms/robotstxt": ["../studiocms_robotstxt/src/index.ts"],
+      "@studiocms/robotstxt/*": ["../studiocms_robotstxt/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_assets"
+    },
+    {
+      "path": "../studiocms_auth"
+    },
+    {
+      "path": "../studiocms_betaresources"
+    },
+    {
+      "path": "../studiocms_blog"
+    },
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_dashboard"
+    },
+    {
+      "path": "../studiocms_frontend"
+    },
+    {
+      "path": "../studiocms_imagehandler"
+    },
+    {
+      "path": "../studiocms_renderers"
+    },
+    {
+      "path": "../studiocms_robotstxt"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_assets/**/*",
+    "../studiocms_auth/**/*",
+    "../studiocms_betaresources/**/*",
+    "../studiocms_blog/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_dashboard/**/*",
+    "../studiocms_frontend/**/*",
+    "../studiocms_imagehandler/**/*",
+    "../studiocms_renderers/**/*",
+    "../studiocms_robotstxt/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_assets/tsconfig.json b/packages/studiocms_assets/tsconfig.json
index 735e1558c..c2c3dc4d8 100644
--- a/packages/studiocms_assets/tsconfig.json
+++ b/packages/studiocms_assets/tsconfig.json
@@ -16,5 +16,11 @@
       "path": "../../playgrounds/node"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_auth/tsconfig.json b/packages/studiocms_auth/tsconfig.json
index 293461caa..eef2ee650 100644
--- a/packages/studiocms_auth/tsconfig.json
+++ b/packages/studiocms_auth/tsconfig.json
@@ -2,19 +2,43 @@
   "extends": "astro/tsconfigs/strictest",
   "files": [],
   "compilerOptions": {
-    "outDir": "../../.moon/cache/types/packages/studiocms_renderers",
+    "outDir": "../../.moon/cache/types/packages/studiocms_auth",
     "composite": true,
     "noEmit": false,
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/assets": ["../studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["../studiocms_assets/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/dashboard": ["../studiocms_dashboard/src/index.ts"],
+      "@studiocms/dashboard/*": ["../studiocms_dashboard/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_assets"
+    },
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_dashboard"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_assets/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_dashboard/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_betaresources/tsconfig.json b/packages/studiocms_betaresources/tsconfig.json
index fb6bf44b9..54435a1f1 100644
--- a/packages/studiocms_betaresources/tsconfig.json
+++ b/packages/studiocms_betaresources/tsconfig.json
@@ -8,13 +8,31 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/assets": ["../studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["../studiocms_assets/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_assets"
+    },
+    {
+      "path": "../studiocms_core"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_assets/**/*",
+    "../studiocms_core/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_blog/tsconfig.json b/packages/studiocms_blog/tsconfig.json
index 4530d9b26..13aee4d58 100644
--- a/packages/studiocms_blog/tsconfig.json
+++ b/packages/studiocms_blog/tsconfig.json
@@ -6,7 +6,27 @@
     "composite": true,
     "noEmit": false,
     "emitDeclarationOnly": true,
-    "allowImportingTsExtensions": false
+    "allowImportingTsExtensions": false,
+    "paths": {
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/frontend": ["../studiocms_frontend/src/index.ts"],
+      "@studiocms/frontend/*": ["../studiocms_frontend/src/*"]
+    }
   },
-  "include": ["../../playgrounds/node/.astro/**/*", "./**/*", "./**/*.json"]
+  "include": [
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_frontend/**/*",
+    "./**/*",
+    "./**/*.json"
+  ],
+  "references": [
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_frontend"
+    }
+  ]
 }
diff --git a/packages/studiocms_core/tsconfig.json b/packages/studiocms_core/tsconfig.json
index dd8ad4811..19d1e8e7c 100644
--- a/packages/studiocms_core/tsconfig.json
+++ b/packages/studiocms_core/tsconfig.json
@@ -8,13 +8,25 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/robotstxt": ["../studiocms_robotstxt/src/index.ts"],
+      "@studiocms/robotstxt/*": ["../studiocms_robotstxt/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_robotstxt"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_robotstxt/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_dashboard/tsconfig.json b/packages/studiocms_dashboard/tsconfig.json
index fa748cf2f..a98360473 100644
--- a/packages/studiocms_dashboard/tsconfig.json
+++ b/packages/studiocms_dashboard/tsconfig.json
@@ -8,13 +8,43 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/assets": ["../studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["../studiocms_assets/src/*"],
+      "@studiocms/betaresources": ["../studiocms_betaresources/src/index.ts"],
+      "@studiocms/betaresources/*": ["../studiocms_betaresources/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/renderers": ["../studiocms_renderers/src/index.ts"],
+      "@studiocms/renderers/*": ["../studiocms_renderers/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_assets"
+    },
+    {
+      "path": "../studiocms_betaresources"
+    },
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_renderers"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_assets/**/*",
+    "../studiocms_betaresources/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_renderers/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_frontend/tsconfig.json b/packages/studiocms_frontend/tsconfig.json
index 507f44c2f..124e2e005 100644
--- a/packages/studiocms_frontend/tsconfig.json
+++ b/packages/studiocms_frontend/tsconfig.json
@@ -8,13 +8,31 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/renderers": ["../studiocms_renderers/src/index.ts"],
+      "@studiocms/renderers/*": ["../studiocms_renderers/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_renderers"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_renderers/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_imagehandler/tsconfig.json b/packages/studiocms_imagehandler/tsconfig.json
index b058bec2a..740b2031f 100644
--- a/packages/studiocms_imagehandler/tsconfig.json
+++ b/packages/studiocms_imagehandler/tsconfig.json
@@ -8,13 +8,25 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_core"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_core/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_renderers/tsconfig.json b/packages/studiocms_renderers/tsconfig.json
index 293461caa..d8530b08e 100644
--- a/packages/studiocms_renderers/tsconfig.json
+++ b/packages/studiocms_renderers/tsconfig.json
@@ -8,13 +8,25 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_core"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_core/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_robotstxt/tsconfig.json b/packages/studiocms_robotstxt/tsconfig.json
index 28200ffd8..803f32d0a 100644
--- a/packages/studiocms_robotstxt/tsconfig.json
+++ b/packages/studiocms_robotstxt/tsconfig.json
@@ -16,5 +16,11 @@
       "path": "../../playgrounds/node"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }
diff --git a/packages/studiocms_ui/.gitignore b/packages/studiocms_ui/.gitignore
new file mode 100644
index 000000000..b512c09d4
--- /dev/null
+++ b/packages/studiocms_ui/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/packages/studiocms_ui/README.md b/packages/studiocms_ui/README.md
new file mode 100644
index 000000000..1b265edb5
--- /dev/null
+++ b/packages/studiocms_ui/README.md
@@ -0,0 +1,564 @@
+# @studiocms/ui
+
+This is the UI library that we use to build StudioCMS.
+
+All of these components can be tested [here](https://ui-testing.studiocms.xyz).
+
+## Components & how to use them
+All components are exported from `@studiocms/ui/components`.
+
+### Button
+A simple button component. Use it like this:
+
+```html
+<Button>Hello World!</Button>
+```
+
+You can pass the following props:
+```ts
+type Props = {
+  as?: As; // What the button should be rendered as. Set to "a" for an anchor tag, etc.
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean; // Make the button take up full width
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  variant?: 'solid' | 'outlined' | 'flat';
+  class?: string;
+  disabled?: boolean;
+  // Note: you can pass all other HTML attributes and they will be applied.
+};
+```
+
+### Card
+A simple card component with support for a header and footer. Use it like this:
+```html
+<Card>
+  <div slot="header">Header Content</div>
+  <div>Body Content</div> <!-- No slot definition needed for the body! -->
+  <div slot="footer">Footer Content</div>
+</Card>
+```
+
+You can pass the following props:
+```ts
+type Props = {
+  as?: As;
+  class?: string;
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+};
+```
+
+### Center
+A component that automatically centers all of it's content. Use it like this:
+```html
+<Center>Content in here will be centered!</Center>
+```
+
+### Checkbox
+A checkbox component. Use it like this:
+```html
+<Checkbox
+  label="Label"
+/>
+```
+
+You can pass the following props:
+```ts
+type Props = {
+  label: string;
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  name?: string; // If you want to use this in forms. If unset, a name will be auto-generated.
+  isRequired?: boolean;
+};
+```
+
+### Divider
+A simple divider. Use it like this:
+```html
+<Divider>Divider Label</Divider>
+```
+
+### Dropdown
+A dropdown component. Use it like this:
+```html
+<Dropdown
+  options={[
+    { label: 'Option 1', value: 'opt-1' },
+    { label: 'Option 2', value: 'opt-2' },
+  ]}
+  id='dropdown'
+>
+   <div slot="icon-start"><!-- Icon goes here --></div>
+  <div>Your Trigger goes here!</div>
+   <div slot="icon-end"><!-- Icon goes here --></div>
+</Dropdown>
+```
+**This component needs a helper to function.** Add it in a script tag:
+```html
+<script>
+  import { DropdownHelper } from "@studiocms/ui/components";
+
+  const dropdown1 = new DropdownHelper('dropdown-1');
+  dropdown1.registerClickCallback((value) => {
+    // "value" will be what you put in the options.
+    // When an option is clicked, it will supply its value here
+    console.log(value);
+  });
+</script>
+```
+You can pass the following props:
+```ts
+type Option = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+};
+
+type Props = {
+  id: string;
+  options: Option[];
+  disabled?: boolean;
+  align?: 'start' | 'center' | 'end';
+  triggerOn?: 'left' | 'right' | 'both';
+};
+```
+
+### Input
+A text input. Use it like this:
+```html
+<Input />
+```
+You can pass the following props:
+```ts
+type Props = {
+  label?: string;
+  type?: 'text' | 'password';
+  placeholder?: string;
+  isRequired?: boolean;
+  name?: string;
+  disabled?: boolean;
+  defaultValue?: string;
+  class?: string;
+};
+```
+
+### Modal
+A modal component with form support. Use it like this:
+```html
+<Modal id="modal">
+  <!-- This component has a header slot! Use it like this: -->
+  <h2 slot="header">Header content</h2>
+  <div>Modal content</div>
+</Modal>
+<Button id="modal-trigger">Open Modal</Button>
+```
+**This component needs a helper to function.** Add it in a script tag:
+```html
+<script>
+  import { ModalHelper } from "@studiocms/ui/components";
+
+  const modal = new ModalHelper('modal');
+  modal.bindTrigger('modal-trigger');
+</script>
+```
+You can make the modal a form and also display "confirm" and "cancel" buttons individually:
+```html
+<Modal id="modal" isForm buttons={['confirm', 'cancel']}>
+  <h2 slot="header">Header content</h2>
+  <div>Modal content</div>
+</Modal>
+<Button id="modal-trigger">Open Modal</Button>
+```
+*Note: The order in which you supply the buttons does not change the buttons order in the modal.*
+
+After adding a button, you can register a callback that will be fired when a button is clicked. If you made the modal a form, this will also give you a way to access the form data:
+```html
+<script>
+  import { ModalHelper } from "@studiocms/ui/components";
+
+  const modal = new ModalHelper('modal');
+  modal.bindTrigger('modal-trigger');
+  
+  // The cancel callback will not be supplied the formData, even if you made the modal a form.
+  modal.registerCancelCallback(() => {
+    // Your cancellation logic
+  });
+
+  // formData will be undefined unless you set the isForm prop!
+  modal.registerConfirmCallback((formData) => {
+    // Your confirmation logic
+  });
+</script>
+```
+You can pass the following props:
+```ts
+type Props = {
+  id: string;
+  size?: 'sm' | 'md' | 'lg';
+  dismissable?: boolean;
+  buttons?: ('confirm' | 'cancel')[];
+  isForm?: boolean;
+};
+```
+
+### RadioGroup
+A radio group. Use it like this:
+```html
+<RadioGroup
+  label="Label"
+  options={[
+    { label: "Option 1", value: "opt-1" },
+    { label: "Option 2", value: "opt-2" },
+    { label: "Option 3", value: "opt-3" }
+  ]}
+/>
+```
+You can pass the following props:
+```ts
+type Option = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+type Props = {
+  label: string;
+  options: Option[];
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  defaultValue?: string; // Needs to be the value of an option!
+  disabled?: boolean;
+  name?: string;
+  isRequired?: boolean;
+  horizontal?: boolean;
+  class?: string;
+};
+```
+
+### Row
+A simple row component, essentially a flex div to wrap stuff in. Use it like this:
+```html
+<Row>
+  <Button>These two will be...</Button>
+  <Button>in a row!</Button>
+</Row>
+```
+You can pass the following props:
+```ts
+type Props = {
+  alignCenter?: boolean;
+  gapSize?: 'sm' | 'md' | 'lg';
+};
+```
+
+### Select
+A select component. Use it like this:
+```html
+<Select
+  label='Select'
+  options={[
+    { label: "Option 1", value: "opt-1" },
+    { label: "Option 2", value: "opt-2" },
+    { label: "Option 3", value: "opt-3" },
+  ]}
+/>
+```
+You can pass the following props:
+```ts
+type Option = {
+	label: string;
+	value: string;
+	disabled?: boolean;
+};
+
+type Props = {
+	label?: string;
+	defaultValue?: string;
+	class?: string;
+	name?: string;
+	isRequired?: boolean;
+	options: Option[];
+	disabled?: boolean;
+	fullWidth?: boolean;
+};
+```
+
+### Sidebar
+The sidebar comes in two flavors: single and double. **Each requires a helper and functions slightly differently.** We recommend you use these in a layout. If you do, make sure to make the sidebar's parent a flex-div with `flex-direction: row` and set it to `height: 100vh` or `height: 100dvh`. The sidebar might not work correctly otherwise.
+
+#### Single Sidebar
+The layout of your page should look similar to this:
+```html
+<main>
+  <Sidebar>
+    Sidebar Content (anchor tags etc.)
+  </Sidebar>
+  <div class="content">
+    <!-- 
+      This will be the trigger for your sidebar. 
+      You can use whatever you want here, like an icon.
+      We recommend placing this in the upper left corner of the screen.
+    -->
+    <Button id='sidebar-toggle'>
+      Sidebar toggle.
+    </Button>
+    
+    <slot /> <!-- The slot for your content -->
+  </div>
+</main>
+<style>
+  .main {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+  }
+</style>
+<script>
+  import { SingleSidebarHelper } from "@studiocms/ui/components";
+
+  // Use the ID of your trigger here!
+  new SingleSidebarHelper('sidebar-toggle');
+</script>
+```
+
+We recommend you use the same button to both show and hide the sidebar, and that you hide it on devides with a screen size larger than `840px`.
+
+If needed, it is possible to register elements to open / close the sidebar manually:
+```html
+<script>
+  import { SingleSidebarHelper } from "@studiocms/ui/components";
+
+  const sidebar = new SingleSidebarHelper();
+
+  // Use the IDs of the respective elements here:
+  sidebar.hideSidebarOnClick('another-elements-id');
+  sidebar.showSidebarOnClick('another-elements-id');
+</script>
+```
+You can even just use the barebones function calls if you need to close the sidebar programatically:
+```html
+<script>
+  import { SingleSidebarHelper } from "@studiocms/ui/components";
+
+  const sidebar = new SingleSidebarHelper();
+  
+  sidebar.hideSidebar();
+  sidebar.showSidebar();
+</script>
+```
+
+#### Double Sidebar
+When using the double sidebar, the layout of your page should look similar to this:
+```html
+<main class="main">
+  <DoubleSidebar>
+    <div slot="outer" class="outer">
+      <Button id='to-inner'>
+        To Inner Sidebar
+      </Button>
+    </div>
+    <div slot="inner">
+      <Button id='to-outer'>
+        To Outer Sidebar
+      </Button>
+      <Button id='to-content'>
+        To Content
+      </Button>
+    </div>
+  </DoubleSidebar>
+  <div class="content">
+    <Button id='sidebar-toggle'>
+      Sidebar toggle.
+    </Button>
+    <slot />
+  </div>
+</main>
+<style>
+  .main {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+</style>
+<script>
+  import { DoubleSidebarHelper } from "@studiocms/ui/components";
+
+  // The helper. Pass in the initial sidebar trigger id and the 
+  // id for the button to switch from inner to outer sidebar on
+  // mobile devices.
+  const dbsb = new DoubleSidebarHelper('sidebar-toggle', 'to-outer');
+
+  // The id for the element to show the inner sidebar when clicked. 
+  // Should be used when the user is currently on the outer sidebar 
+  // and needs to switch to the inner.
+  dbsb.showInnerOnClick('to-inner');
+
+  // The id for the element to show the content on click. Should
+  // be used from the inner sidebar when the user wants to see the
+  // page content.
+  dbsb.showContentOnClick('to-content');
+</script>
+```
+The double sidebar, like the single sidebar, supports individual function calls to show and hide the outer or inner navbars programatically:
+
+```html
+<script>
+  import { DoubleSidebarHelper } from "@studiocms/ui/components";
+
+  const sidebar = new DoubleSidebarHelper('sidebar-toggle', 'to-outer');
+
+  sidebar.hideSidebar();
+  sidebar.showInnerSidebar();
+  sidebar.showOuterSidebar();
+</script>
+```
+*Note: The API (especially for the double sidebar) is highly likely to change to make it easier to use.*
+
+### Textarea
+A simple textarea component. Use it like this:
+```html
+<Textarea />
+```
+You can pass the following props:
+```ts
+type Props = {
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  fullWidth?: boolean;
+  resize?: boolean;
+  name?: string;
+  disabled?: boolean;
+  defaultValue?: string;
+};
+```
+
+### Toast
+A component and helper for toasts. Use the component like this *(we recommend placing it in a layout)*:
+```html
+<Toaster />
+```
+You can pass the following props to the `<Toaster />` component:
+```ts
+type Props = {
+	position?:
+		| 'top-left'
+		| 'top-right'
+		| 'top-center'
+		| 'bottom-left'
+		| 'bottom-right'
+		| 'bottom-center';
+	class?: string;
+	duration?: number;
+	expand?: boolean;
+	closeButton?: boolean;
+	offset?: number;
+	gap?: number;
+};
+```
+**This component needs a helper to function.** You can create toasts from a script tag:
+```html
+<script>
+  import { toast } from '@studiocms/ui/components';
+
+  toast({
+    title: "Toast Title",
+    type: 'info',
+  });
+</script>
+```
+Only a title and a type are required to create a toast. However, you can pass the following options to customize it a little more:
+```ts
+type Props = {
+  title: string;
+  type: 'success' | 'warning' | 'danger' | 'info';
+  description?: string;
+  duration?: number;
+  closeButton?: boolean;
+  persistent?: boolean; // When set to true, you MUST set "closeButton" to true as well.
+};
+```
+
+### Toggle
+A toggle component, essentially a checkbox with different design. Use it like this:
+```html
+<Toggle label='Label' />
+```
+You can pass the following props:
+```ts
+type Props = {
+  label: string;
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  name?: string;
+  isRequired?: boolean;
+};
+```
+
+### User
+A helper to display a user. Use it like this:
+```html
+<User 
+  name="Louis Escher"
+  description='UI/UX & Developer'
+/>
+```
+Optionally, you can pass an avatar to be shown instead of the default placeholder, and also pass a class name for the container:
+```html
+<User 
+  name='Louis Escher'
+  description='UI/UX & Developer'
+  avatar='https://avatars.githubusercontent.com/u/66965600?v=4'
+  class="mt-4" 
+/>
+```
+
+## Planned
+
+### Based on popover API
+- Tooltips based on popover & anchor positioning API (not supported at time of writing, needs a custom solution)
+- Date Picker
+
+### Loading Stuff
+- Skeleton
+- Spinners
+
+### Other Stuff
+- Image dropzone
+
+### Otter Stuff
+- Markdown editor (WYSIWYG (thanks Otter <3))
+
+### Maybe's
+- Implement tailwind's prose
+- Maybe starlight props.css
diff --git a/packages/studiocms_ui/moon.yml b/packages/studiocms_ui/moon.yml
new file mode 100644
index 000000000..82a86acae
--- /dev/null
+++ b/packages/studiocms_ui/moon.yml
@@ -0,0 +1,7 @@
+language: 'typescript'
+tags: ['astro', 'typescript']
+
+project: 
+  name: 'studiocms_ui'
+  description: 'The UI library for StudioCMS'
+  maintainers: ['louisescher']
\ No newline at end of file
diff --git a/packages/studiocms_ui/package.json b/packages/studiocms_ui/package.json
new file mode 100644
index 000000000..5f52f76b3
--- /dev/null
+++ b/packages/studiocms_ui/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@studiocms/ui",
+  "version": "0.1.0-beta.7",
+  "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/astrolicious/studiocms.git"
+  },
+  "author": {
+    "name": "Louis Escher",
+    "url": "https://studiocms.xyz"
+  },
+  "contributors": [
+    "louisescher"
+  ],
+  "keywords": [
+    "astro-studiocms",
+    "cms",
+    "studiocms"
+  ],
+  "homepage": "https://studiocms.xyz",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "files": [
+    "src"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./components": "./src/components.ts",
+    "./layouts": "./src/layouts.ts",
+    "./css/*": "./src/css/*",
+    "./utils/*": "./src/utils/*",
+    "./types": "./src/types/index.ts"
+  },
+  "dependencies": {
+    "@fontsource-variable/onest": "5.1.0"
+  },
+  "peerDependencies": {
+    "astro": "catalog:min"
+  },
+  "devDependencies": {
+    "vite": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/packages/studiocms_ui/src/components.ts b/packages/studiocms_ui/src/components.ts
new file mode 100644
index 000000000..809610bb3
--- /dev/null
+++ b/packages/studiocms_ui/src/components.ts
@@ -0,0 +1,22 @@
+export { Button } from './components/index';
+export { Divider } from './components/index';
+export { Input } from './components/index';
+export { Row } from './components/index';
+export { Center } from './components/index';
+export { Textarea } from './components/index';
+export { Checkbox } from './components/index';
+export { Toggle } from './components/index';
+export { RadioGroup } from './components/index';
+export { Toaster, toast } from './components/index';
+export { Card } from './components/index';
+export { Modal, ModalHelper } from './components/index';
+export { Select } from './components/index';
+export { Dropdown, DropdownHelper } from './components/index';
+export { User } from './components/index';
+
+export {
+	Sidebar,
+	DoubleSidebar,
+	SingleSidebarHelper,
+	DoubleSidebarHelper,
+} from './components/index';
diff --git a/packages/studiocms_ui/src/components/BaseHead.astro b/packages/studiocms_ui/src/components/BaseHead.astro
new file mode 100644
index 000000000..f737ab1e3
--- /dev/null
+++ b/packages/studiocms_ui/src/components/BaseHead.astro
@@ -0,0 +1,22 @@
+---
+import { type HeadConfig, createHead, headDefaults } from '../utils/headers';
+
+export interface Props {
+	title: string;
+	description: string;
+	headers?: HeadConfig | undefined;
+	image?: string | undefined;
+}
+
+const { title, description, image, headers: userHeaders } = Astro.props;
+
+const canonicalURL = Astro.site ? new URL(Astro.url.pathname, Astro.site) : undefined;
+
+// TODO: Make this more customizable or move out of UI and into dashboard
+const defaultHeaders = headDefaults(title, description, Astro, image, canonicalURL);
+
+const head = createHead(defaultHeaders, userHeaders || []);
+---
+{head.map(({ tag: Tag, attrs, content }) => ( 
+  <Tag {...attrs} set:html={content} />
+))}
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Button/Button.astro b/packages/studiocms_ui/src/components/Button/Button.astro
new file mode 100644
index 000000000..b69107409
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Button/Button.astro
@@ -0,0 +1,45 @@
+---
+import './Button.css';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { StudioCMSColorway } from '../../utils/colors';
+
+type Props<As extends HTMLTag = 'button'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	as?: As;
+	size?: 'sm' | 'md' | 'lg';
+	fullWidth?: boolean;
+	color?: StudioCMSColorway;
+	variant?: 'solid' | 'outlined' | 'flat';
+	class?: string;
+	disabled?: boolean;
+};
+
+const {
+	size = 'md',
+	fullWidth = false,
+	color = 'default',
+	variant = 'default',
+	as: As = 'button',
+	class: className,
+	disabled = false,
+	...props
+} = Astro.props;
+---
+
+<As
+  class="button"
+  class:list={[
+    fullWidth && "full",
+    disabled && "disabled",
+    className,
+    size,
+    color,
+    variant,
+  ]}
+  disabled={disabled}
+  {...props}
+>
+  <slot name="start-content" />
+  <slot />
+  <slot name="end-content" />
+</As>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Button/Button.css b/packages/studiocms_ui/src/components/Button/Button.css
new file mode 100644
index 000000000..1a6eff49d
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Button/Button.css
@@ -0,0 +1,292 @@
+/* Default Styles */
+.button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	text-align: center;
+
+	position: relative;
+
+	/* TODO: Move gaps & radii to spacings.css */
+	gap: 0.5rem;
+
+	outline: none;
+	border: none;
+
+	font-weight: 400;
+
+	border-radius: 0.5rem;
+
+	transition: all 0.15s ease;
+
+	cursor: pointer;
+
+	/* Default colorway */
+
+	background-color: hsl(var(--default-base));
+	border-color: hsl(var(--border));
+	color: hsl(var(--text-muted));
+
+	min-width: fit-content;
+
+	will-change: transform;
+
+	text-decoration: none;
+}
+
+.button.disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.button.outlined {
+	border-width: 1px;
+	border-style: solid;
+}
+
+.button:hover {
+	background-color: hsl(var(--default-hover));
+}
+
+.button:active {
+	background-color: hsl(var(--default-active));
+	transform: scale(0.95);
+}
+
+.button.flat {
+	background: hsla(var(--default-flat));
+}
+
+.button.flat:hover {
+	background: hsla(var(--default-flat-hover));
+}
+
+.button.flat:active {
+	background: hsla(var(--default-flat-active));
+}
+
+/* Sizes */
+.button.sm {
+	height: 32px;
+	padding: 0.5rem 0.75rem;
+
+	font-size: 0.825em;
+}
+
+.button.md {
+	height: 40px;
+	padding: 0.5rem 0.75rem;
+
+	font-size: 0.875em;
+}
+
+.button.lg {
+	height: 48px;
+	padding: 0.75rem 1rem;
+
+	font-size: 1em;
+}
+
+/* Primary Colorway */
+.button.primary {
+	background-color: hsl(var(--primary-base));
+	border-color: hsl(var(--primary-base));
+	color: hsl(var(--text-inverted));
+}
+
+.button.primary:hover {
+	background-color: hsl(var(--primary-hover));
+}
+
+.button.primary:active {
+	background-color: hsl(var(--primary-active));
+}
+
+.button.primary.outlined {
+	background-color: hsl(var(--default-base));
+	color: hsl(var(--text-normal));
+}
+
+.button.primary.outlined:hover {
+	background-color: hsl(var(--default-hover));
+}
+
+.button.primary.outlined:active {
+	background-color: hsl(var(--default-active));
+}
+
+.button.primary.flat {
+	background-color: hsla(var(--primary-flat));
+	color: hsl(259, 96%, 79%);
+}
+
+.button.primary.flat:hover {
+	background-color: hsla(var(--primary-flat-hover));
+}
+
+.button.primary.flat:active {
+	background-color: hsla(var(--primary-flat-active));
+}
+
+/* Success Colorway */
+.button.success {
+	background-color: hsl(var(--success-base));
+	border-color: hsl(var(--success-base));
+	color: hsl(var(--text-dark));
+}
+
+.button.success:hover {
+	background-color: hsl(var(--success-hover));
+}
+
+.button.success:active {
+	background-color: hsl(var(--success-active));
+}
+
+.button.success.outlined {
+	background-color: hsl(var(--default-base));
+	color: hsl(var(--text-normal));
+}
+
+.button.success.outlined:hover {
+	background-color: hsl(var(--default-hover));
+}
+
+.button.success.outlined:active {
+	background-color: hsl(var(--default-active));
+}
+
+.button.success.flat {
+	background-color: hsla(var(--success-flat));
+	color: hsl(var(--success-base));
+}
+
+.button.success.flat:hover {
+	background-color: hsla(var(--success-flat-hover));
+}
+
+.button.success.flat:active {
+	background-color: hsla(var(--success-flat-active));
+}
+
+/* Warning Colorway */
+.button.warning {
+	background-color: hsl(var(--warning-base));
+	border-color: hsl(var(--warning-base));
+	color: hsl(var(--text-dark));
+}
+
+.button.warning:hover {
+	background-color: hsl(var(--warning-hover));
+}
+
+.button.warning:active {
+	background-color: hsl(var(--warning-active));
+}
+
+.button.warning.outlined {
+	background-color: hsl(var(--default-base));
+	color: hsl(var(--text-normal));
+}
+
+.button.warning.outlined:hover {
+	background-color: hsl(var(--default-hover));
+}
+
+.button.warning.outlined:active {
+	background-color: hsl(var(--default-active));
+}
+
+.button.warning.flat {
+	background-color: hsla(var(--warning-flat));
+	color: hsl(var(--warning-base));
+}
+
+.button.warning.flat:hover {
+	background-color: hsla(var(--warning-flat-hover));
+}
+
+.button.warning.flat:active {
+	background-color: hsla(var(--warning-flat-active));
+}
+
+/* Danger Colorway */
+.button.danger {
+	background-color: hsl(var(--danger-base));
+	border-color: hsl(var(--danger-base));
+	color: hsl(var(--text-light));
+}
+
+.button.danger:hover {
+	background-color: hsl(var(--danger-hover));
+}
+
+.button.danger:active {
+	background-color: hsl(var(--danger-active));
+}
+
+.button.danger.outlined {
+	background-color: hsl(var(--default-base));
+	color: hsl(var(--text-normal));
+}
+
+.button.danger.outlined:hover {
+	background-color: hsl(var(--default-hover));
+}
+
+.button.danger.outlined:active {
+	background-color: hsl(var(--default-active));
+}
+
+.button.danger.flat {
+	background-color: hsla(var(--danger-flat));
+	color: hsl(337, 92%, 71%);
+}
+
+.button.danger.flat:hover {
+	background-color: hsla(var(--danger-flat-hover));
+}
+
+.button.danger.flat:active {
+	background-color: hsla(var(--danger-flat-active));
+}
+
+.button.full {
+	width: 100%;
+}
+
+[data-theme="light"] {
+	.button.primary.flat {
+		color: hsl(259, 84%, 45%);
+	}
+
+	.button.success.flat {
+		background-color: hsl(var(--success-base), 0.2);
+		color: hsl(143, 59%, 20%);
+	}
+
+	.button.success.flat:hover {
+		background-color: hsla(var(--success-flat-hover));
+	}
+
+	.button.success.flat:active {
+		background-color: hsla(var(--success-flat-active));
+	}
+
+	.button.warning.flat {
+		background-color: hsla(var(--warning-base), 0.2);
+		color: hsl(48, 78%, 20%);
+	}
+
+	.button.warning.flat:hover {
+		background-color: hsla(var(--warning-base), 0.25);
+	}
+
+	.button.warning.flat:active {
+		background-color: hsla(var(--warning-base), 0.4);
+	}
+
+	.button.danger.flat {
+		color: hsl(339, 97%, 29%);
+	}
+}
diff --git a/packages/studiocms_ui/src/components/Card/Card.astro b/packages/studiocms_ui/src/components/Card/Card.astro
new file mode 100644
index 000000000..83fb87b4a
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Card/Card.astro
@@ -0,0 +1,25 @@
+---
+import './Card.css';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+
+type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	as?: As;
+	class?: string;
+	fullWidth?: boolean;
+	fullHeight?: boolean;
+};
+
+const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = Astro.props;
+---
+<As class="card" {...props} class:list={[fullWidth && "full-w", fullHeight && "full-h", className]}>
+  <div class="card-header">
+    <slot name="header" />
+  </div>
+  <div class="card-body">
+    <slot />
+  </div>
+  <div class="card-footer">
+    <slot name="footer" />
+  </div>
+</As>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Card/Card.css b/packages/studiocms_ui/src/components/Card/Card.css
new file mode 100644
index 000000000..110bbe87c
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Card/Card.css
@@ -0,0 +1,37 @@
+.card {
+	border: 1px solid hsl(var(--border));
+	background-color: hsl(var(--background-base));
+	border-radius: .5rem;
+	width: fit-content;
+	height: fit-content;
+}
+
+.card.full-w {
+	width: 100%;
+}
+
+.card.full-h {
+	height: 100%;
+}
+
+.card-header:has(*) {
+	padding: 1rem 1rem 0rem 1rem;
+	* {
+		margin: 0;
+	}
+}
+
+.card-body {
+	padding: 1rem;
+}
+
+.card-footer:has(*) {
+	border-top: 1px solid hsl(var(--border));
+	padding: 1rem;
+}
+
+@media screen and (max-width: 840px) {
+	.card {
+		width: 100%;
+	}
+}
diff --git a/packages/studiocms_ui/src/components/Center/Center.astro b/packages/studiocms_ui/src/components/Center/Center.astro
new file mode 100644
index 000000000..8f4564cd7
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Center/Center.astro
@@ -0,0 +1,7 @@
+---
+import './Center.css';
+---
+<!-- This was made for Jumper, to keep him happy <3 -->
+<div class="center">
+  <slot />
+</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Center/Center.css b/packages/studiocms_ui/src/components/Center/Center.css
new file mode 100644
index 000000000..df55d5ec0
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Center/Center.css
@@ -0,0 +1,10 @@
+.center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: 100%;
+
+	text-align: center;
+}
diff --git a/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro b/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro
new file mode 100644
index 000000000..5c28ae08e
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro
@@ -0,0 +1,63 @@
+---
+import './Checkbox.css';
+
+import Icon from '../../utils/Icon.astro';
+import type { StudioCMSColorway } from '../../utils/colors';
+import { generateID } from '../../utils/generateID';
+
+type Props = {
+	label: string;
+	size?: 'sm' | 'md' | 'lg';
+	color?: StudioCMSColorway;
+	defaultChecked?: boolean;
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+};
+
+const {
+	size = 'md',
+	color = 'default',
+	defaultChecked,
+	disabled,
+	name = generateID('checkbox'),
+	label,
+	isRequired,
+} = Astro.props;
+
+const iconSizes = {
+	sm: 14,
+	md: 16,
+	lg: 24,
+};
+---
+<label 
+  class="checkmark-label"
+  for={name}
+  class:list={[
+    disabled && "disabled",
+    color,
+    size,
+  ]}
+>
+  <div class="checkmark-container">
+    <Icon
+      name='checkmark'
+      class={'checkmark'}
+      width={iconSizes[size]}
+      height={iconSizes[size]}
+    />
+    <input
+      type="checkbox"
+      name={name}
+      id={name}
+      checked={defaultChecked}
+      disabled={disabled}
+      required={isRequired}
+      class="checkbox"
+    />
+  </div>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+</label>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Checkbox/Checkbox.css b/packages/studiocms_ui/src/components/Checkbox/Checkbox.css
new file mode 100644
index 000000000..64e3dbe42
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Checkbox/Checkbox.css
@@ -0,0 +1,117 @@
+.checkmark-label {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: .5rem;
+	position: relative;
+	margin: .25rem 0;
+}
+
+.checkmark-label.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+	color: hsl(var(--text-muted));
+}
+
+.checkmark-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: hsl(var(--default-base));
+	border: 2px solid hsl(var(--default-base));
+	border-radius: .5rem;
+	cursor: pointer;
+	transition: all .15s ease;
+}
+
+.checkmark-label:hover .checkmark-container {
+	background-color: hsl(var(--default-hover));
+}
+
+.checkmark-label:active .checkmark-container {
+	background-color: hsl(var(--default-active));
+	scale: 0.9;
+}
+
+.checkmark-label.sm {
+	font-size: .875em;
+}
+
+.checkmark-label.sm .checkmark-container {
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+.checkmark-label.md .checkmark-container {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.checkmark-label.lg {
+	font-size: 1.125em;
+}
+
+.checkmark-label.lg .checkmark-container {
+	width: 1.75rem;
+	height: 1.75rem;
+}
+
+.primary .checkmark-container:has(.checkbox:checked) {
+	border-color: hsl(var(--primary-base));
+	background-color: hsl(var(--primary-base));
+}
+
+.success .checkmark-container:has(.checkbox:checked) {
+	border-color: hsl(var(--success-base));
+	background-color: hsl(var(--success-base));
+}
+
+.warning .checkmark-container:has(.checkbox:checked) {
+	border-color: hsl(var(--warning-base));
+	background-color: hsl(var(--warning-base));
+}
+
+.danger .checkmark-container:has(.checkbox:checked) {
+	border-color: hsl(var(--danger-base));
+	background-color: hsl(var(--danger-base));
+}
+
+.req-star {
+	color: hsl(var(--danger-base));
+	font-weight: 700;
+}
+
+.checkbox {
+	width: 0;
+	height: 0;
+	visibility: hidden;
+	opacity: 0;
+	margin: 0;
+}
+
+.checkmark polyline {
+	transition: all .15s ease;
+	color: hsl(var(--text-normal));
+}
+
+.primary .checkmark polyline {
+	color: hsl(var(--text-inverted));
+}
+
+.success .checkmark polyline {
+	color: hsl(var(--text-dark));
+}
+
+.warning .checkmark polyline {
+	color: hsl(var(--text-dark));
+}
+
+.danger .checkmark polyline {
+	color: hsl(var(--text-light));
+}
+
+.checkmark-container:has(.checkbox:checked) {
+	.checkmark polyline {
+		stroke-dashoffset: 44;
+	}
+}
diff --git a/packages/studiocms_ui/src/components/Divider/Divider.astro b/packages/studiocms_ui/src/components/Divider/Divider.astro
new file mode 100644
index 000000000..215f711ab
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Divider/Divider.astro
@@ -0,0 +1,9 @@
+---
+import './Divider.css';
+---
+<div class="divide-container">
+  <div class="line" />
+  <div class="content">
+    <slot />
+  </div>
+</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Divider/Divider.css b/packages/studiocms_ui/src/components/Divider/Divider.css
new file mode 100644
index 000000000..921a114b7
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Divider/Divider.css
@@ -0,0 +1,25 @@
+.divide-container {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+}
+
+.line {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+	height: 1px;
+	background-color: hsl(var(--border));
+	z-index: 1;
+}
+
+.content {
+	background-color: hsl(var(--background-base));
+	padding: .25rem .5rem;
+	z-index: 2;
+	color: hsl(var(--text-muted));
+}
diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
new file mode 100644
index 000000000..96e6525a9
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
@@ -0,0 +1,47 @@
+---
+import './Dropdown.css';
+
+import type { StudioCMSColorway } from '../../utils/colors';
+
+type Option = {
+	label: string;
+	value: string;
+	disabled?: boolean;
+	color?: StudioCMSColorway;
+};
+
+type Props = {
+	options: Option[];
+	disabled?: boolean;
+	id: string;
+	align?: 'start' | 'center' | 'end';
+	triggerOn?: 'left' | 'right' | 'both';
+};
+
+const { options, disabled = false, align = 'center', id, triggerOn = 'left' } = Astro.props;
+---
+<div 
+  class="dropdown-container"
+  class:list={[disabled && 'disabled']}
+  data-align={align}
+  id={`${id}-container`}
+  data-trigger={triggerOn}
+>
+  <div class="dropdown-toggle" id={`${id}-toggle-btn`}>
+    <slot />
+  </div>
+  <ul class="dropdown" class:list={[align]} role="listbox" id={`${id}-dropdown`}>
+    {options.map((x) => (
+      <li
+        class="dropdown-option"
+        role="option"
+        data-value={x.value}
+        class:list={[x.disabled && "disabled", x.color]}
+      >
+        <slot name="icon-start" />
+        <span>{x.label}</span>
+        <slot name="icon-end" />
+      </li>
+    ))}
+  </ul>
+</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.css b/packages/studiocms_ui/src/components/Dropdown/Dropdown.css
new file mode 100644
index 000000000..8266b15c0
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Dropdown/Dropdown.css
@@ -0,0 +1,183 @@
+.dropdown-toggle {
+	width: fit-content;
+}
+
+.dropdown-container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+}
+
+.dropdown {
+	position: absolute;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	flex-direction: column;
+	border-radius: .5rem;
+	background-color: hsl(var(--background-step-2));
+	overflow: hidden;
+	top: calc(100% + .25rem);
+	left: 0;
+	z-index: 90;
+	min-width: 200px;
+	max-width: min-content;
+
+	height: 0;
+	border: none;
+	pointer-events: none;
+
+	animation: pop-down .15s ease forwards;
+
+	box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+}
+
+.icon {
+	width: 20px;
+	height: 20px;
+	min-width: 20px;
+}
+
+@keyframes pop-up {
+	0% {
+		scale: 0.9;
+		opacity: 0;
+	}
+
+	100% {
+		scale: 1;
+		opacity: 1;
+	}
+}
+
+@keyframes pop-down {
+	0% {
+		scale: 1;
+		height: auto;
+		border: initial;
+		pointer-events: all;
+		top: auto;
+		bottom: auto;
+		border: 1px solid hsl(var(--border));
+		opacity: 1;
+	}
+
+	99.9999% {
+		scale: 0.9;
+		height: auto;
+		border: initial;
+		pointer-events: all;
+		bottom: initial;
+		top: auto;
+		bottom: auto;
+		border: 1px solid hsl(var(--border));
+		opacity: 0;
+	}
+
+	100% {
+		height: 0;
+		border: none;
+		pointer-events: none;
+	}
+}
+
+.dropdown.active {
+	display: flex;
+	border: 1px solid hsl(var(--border));
+	height: auto;
+	pointer-events: all;
+
+	animation: pop-up .15s ease forwards;
+}
+
+.dropdown.below {
+	top: calc(100% + .25rem) !important;
+	bottom: auto;
+
+	transform-origin: top center;
+}
+
+.dropdown.below.start {
+	transform-origin: top left;
+}
+
+.dropdown.below.end {
+	transform-origin: top right;
+}
+
+.dropdown.above {
+	top: auto;
+	bottom: calc(100% + .25rem) !important;
+	transform-origin: bottom center;
+}
+
+.dropdown.above.start {
+	transform-origin: bottom left;
+}
+
+.dropdown.above.end {
+	transform-origin: bottom right;
+}
+
+.dropdown-option {
+	padding: .75rem;
+	cursor: pointer;
+	font-size: .975em;
+	transition: all .15s ease;
+	display: flex;
+	flex-direction: row;
+	gap: .5rem;
+	align-items: center;
+	width: 100%;
+	white-space: normal;
+}
+
+.dropdown-option:hover {
+	background-color: hsl(var(--background-step-3));
+}
+
+.dropdown-option.primary {
+	color: hsl(var(--primary-base));
+}
+
+.dropdown-option.primary:hover {
+	background-color: hsl(var(--primary-base));
+	color: hsl(var(--text-inverted));
+}
+
+.dropdown-option.success {
+	color: hsl(var(--success-base));
+}
+
+.dropdown-option.success:hover {
+	background-color: hsl(var(--success-base));
+	color: hsl(var(--text-dark));
+}
+
+.dropdown-option.warning {
+	color: hsl(var(--warning-base));
+}
+
+.dropdown-option.warning:hover {
+	background-color: hsl(var(--warning-base));
+	color: hsl(var(--text-dark));
+}
+
+.dropdown-option.danger {
+	color: hsl(var(--danger-base));
+}
+
+.dropdown-option.danger:hover {
+	background-color: hsl(var(--danger-base));
+	color: hsl(var(--text-light));
+}
+
+.dropdown-option.disabled {
+	pointer-events: none;
+	color: hsl(var(--text-muted));
+}
+
+.dropdown-option.end {
+	justify-content: space-between;
+}
diff --git a/packages/studiocms_ui/src/components/Dropdown/dropdown.ts b/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
new file mode 100644
index 000000000..854d95f17
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
@@ -0,0 +1,159 @@
+class DropdownHelper {
+	container: HTMLDivElement;
+	toggle: HTMLDivElement;
+	dropdown: HTMLUListElement;
+
+	alignment: 'start' | 'center' | 'end';
+	triggerOn: 'left' | 'right' | 'both';
+	active = false;
+
+	constructor(id: string) {
+		this.container = document.getElementById(`${id}-container`) as HTMLDivElement;
+
+		if (!this.container) {
+			throw new Error(`Unable to find dropdown with ID ${id}.`);
+		}
+
+		this.alignment = this.container.dataset.align as 'start' | 'center' | 'end';
+		this.triggerOn = this.container.dataset.trigger as 'left' | 'right' | 'both';
+
+		this.toggle = document.getElementById(`${id}-toggle-btn`) as HTMLDivElement;
+		this.dropdown = document.getElementById(`${id}-dropdown`) as HTMLUListElement;
+
+		if (this.triggerOn === 'left') {
+			this.toggle.addEventListener('click', this.toggleDropdown);
+		} else if (this.triggerOn === 'both') {
+			this.toggle.addEventListener('click', this.toggleDropdown);
+			this.toggle.addEventListener('contextmenu', (e) => {
+				e.preventDefault();
+				this.toggleDropdown();
+			});
+		} else {
+			this.toggle.addEventListener('contextmenu', (e) => {
+				e.preventDefault();
+				this.toggleDropdown();
+			});
+		}
+
+		window.addEventListener('scroll', this.hideDropdown);
+
+		this.hideOnClickOutside(this.container);
+
+		this.initialOptClickRegistration();
+	}
+
+	public registerClickCallback = (func: (value: string) => void) => {
+		const dropdownOpts = this.dropdown.querySelectorAll('li');
+
+		for (const opt of dropdownOpts) {
+			opt.removeEventListener('click', this.hideDropdown);
+
+			opt.addEventListener('click', () => {
+				func(opt.dataset.value || '');
+				this.hideDropdown();
+			});
+		}
+	};
+
+	private initialOptClickRegistration = () => {
+		const dropdownOpts = this.dropdown.querySelectorAll('li');
+
+		for (const opt of dropdownOpts) {
+			opt.addEventListener('click', this.hideDropdown);
+		}
+	};
+
+	public toggleDropdown = () => {
+		if (this.active) {
+			this.hideDropdown();
+			return;
+		}
+
+		const isMobile = window.matchMedia('screen and (max-width: 840px)').matches;
+
+		// TODO: Figure out dropdowns on mobile: 100% of parent
+		// On desktop: max-width: min-content;
+		const {
+			bottom,
+			left,
+			right,
+			width: parentWidth,
+			x,
+			y,
+			height,
+		} = this.toggle.getBoundingClientRect();
+		const { width: dropdownWidth } = this.dropdown.getBoundingClientRect();
+
+		const optionHeight = 44;
+		const totalBorderSize = 2;
+		const margin = 4;
+
+		const dropdownHeight = this.dropdown.children.length * optionHeight + totalBorderSize + margin;
+
+		const CustomRect = {
+			top: bottom + margin,
+			left,
+			right,
+			bottom: bottom + margin + dropdownHeight,
+			width: isMobile ? parentWidth : dropdownWidth, // Account for scaling of animation
+			height: dropdownHeight,
+			x,
+			y: y + height + margin,
+		};
+
+		this.active = true;
+
+		if (isMobile) {
+			console.log('match');
+			this.dropdown.style.maxWidth = `${parentWidth}px`;
+			this.dropdown.style.minWidth = 'unset';
+			this.dropdown.style.width = `${parentWidth}px`;
+			this.dropdown.style.left = `calc(${parentWidth / 2}px - ${CustomRect.width / 2}px)`;
+		} else {
+			if (this.alignment === 'end') {
+				this.dropdown.style.left = `calc(${parentWidth}px - ${CustomRect.width}px)`;
+			}
+
+			if (this.alignment === 'center') {
+				this.dropdown.style.left = `calc(${parentWidth / 2}px - ${CustomRect.width / 2}px)`;
+			}
+		}
+
+		if (
+			CustomRect.top >= 0 &&
+			CustomRect.left >= 0 &&
+			CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+			CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)
+		) {
+			this.dropdown.classList.add('active', 'below');
+		} else {
+			this.dropdown.classList.add('active', 'above');
+		}
+	};
+
+	public hideDropdown = () => {
+		this.dropdown.classList.remove('active');
+		this.active = false;
+
+		setTimeout(() => this.dropdown.classList.remove('above', 'below'), 200);
+	};
+
+	private hideOnClickOutside = (element: HTMLElement) => {
+		const outsideClickListener = (event: MouseEvent) => {
+			if (!event.target) return;
+
+			if (!element.contains(event.target as Node) && isVisible(element) && this.active === true) {
+				// or use: event.target.closest(selector) === null
+				this.hideDropdown();
+			}
+		};
+
+		document.addEventListener('click', outsideClickListener);
+	};
+}
+
+export { DropdownHelper };
+
+// source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
+const isVisible = (elem: HTMLElement) =>
+	!!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
diff --git a/packages/studiocms_ui/src/components/Input/Input.astro b/packages/studiocms_ui/src/components/Input/Input.astro
new file mode 100644
index 000000000..77cde2284
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Input/Input.astro
@@ -0,0 +1,43 @@
+---
+import './Input.css';
+
+import { generateID } from '../../utils/generateID';
+
+type Props = {
+	label?: string;
+	type?: 'text' | 'password';
+	placeholder?: string;
+	isRequired?: boolean;
+	name?: string;
+	disabled?: boolean;
+	defaultValue?: string;
+	class?: string;
+};
+
+const {
+	label,
+	placeholder,
+	name = generateID('input'),
+	type = 'text',
+	defaultValue,
+	isRequired = false,
+	disabled = false,
+	class: className,
+} = Astro.props;
+---
+
+<label for={name} class="input-label" class:list={[disabled && "disabled", className]}>
+  <span class="label">
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <input
+    placeholder={placeholder}
+    name={name}
+    id={name}
+    type={type}
+    class="input"
+    required={isRequired}
+    disabled={disabled}
+    value={defaultValue}
+  />
+</label>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Input/Input.css b/packages/studiocms_ui/src/components/Input/Input.css
new file mode 100644
index 000000000..7549c986c
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Input/Input.css
@@ -0,0 +1,46 @@
+.input-label {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+	margin-top: .5rem;
+}
+
+.input-label.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+	color: hsl(var(--text-muted));
+}
+
+.label {
+	font-size: 14px;
+}
+
+.input {
+	padding: .65rem 1rem;
+	border-radius: 8px;
+	border: 1px solid hsl(var(--border));
+	background: hsl(var(--background-step-2));
+	color: hsl(var(--text-normal));
+	transition: all .15s ease;
+}
+
+.input:hover {
+	background: hsl(var(--background-step-3));
+}
+
+.input:active,
+.input:focus {
+	border: 1px solid hsl(var(--primary-base));
+	outline: none;
+	background: hsl(var(--background-step-2));
+}
+
+.disabled .input:active {
+	border: 1px solid hsl(var(--border));
+}
+
+.req-star {
+	color: hsl(var(--danger-base));
+	font-weight: 700;
+}
diff --git a/packages/studiocms_ui/src/components/Modal/Modal.astro b/packages/studiocms_ui/src/components/Modal/Modal.astro
new file mode 100644
index 000000000..256fdb61a
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Modal/Modal.astro
@@ -0,0 +1,54 @@
+---
+import './Modal.css';
+
+import Icon from '../../utils/Icon.astro';
+import Button from '../Button/Button.astro';
+
+type ModalButton = 'cancel' | 'confirm';
+
+type Props = {
+	id: string;
+	size?: 'sm' | 'md' | 'lg';
+	dismissable?: boolean;
+	buttons?: ModalButton[];
+	isForm?: boolean;
+};
+
+const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = Astro.props;
+---
+<!-- Should: Be centered on mobile, scroll happens inside, blur bg -->
+<dialog
+  popover
+  id={id}
+  data-dismissable={`${dismissable}`}
+  data-buttons={buttons.join(";")}
+  class="modal"
+  class:list={[size]}
+  data-form={`${isForm}`}
+>
+  <div class="modal-header">
+    <slot name="header" />
+    {dismissable && (
+      <button class="x-mark-container" id={`${id}-btn-x`}>
+        <Icon name="x-mark" width={24} height={24} class={'dismiss-icon'} />
+      </button>
+    )}
+  </div>
+  <form id={`${id}-form-element`}>
+    <div class="modal-body">
+      <slot />
+    </div>
+    <div class="modal-footer">
+      {buttons.includes('cancel') && (
+        <Button id={`${id}-btn-cancel`} color='danger' variant='flat' type={isForm ? 'reset' : 'button'}>
+          Cancel
+        </Button>
+      )}
+      {buttons.includes('confirm') && (
+        <Button id={`${id}-btn-confirm`} type={'submit'} color='primary' variant='solid' type={isForm ? 'submit' : 'button'}>
+          Confirm
+        </Button>
+      )}
+    </div>
+  </form>
+</dialog>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Modal/Modal.css b/packages/studiocms_ui/src/components/Modal/Modal.css
new file mode 100644
index 000000000..2e616a3c8
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Modal/Modal.css
@@ -0,0 +1,109 @@
+.modal {
+	border: 1px solid hsl(var(--border));
+	border-radius: .5rem;
+	padding: 1.5rem;
+	box-shadow: 0px 6px 8px hsl(var(--shadow));
+	animation: hide .25s ease;
+	overflow: visible;
+}
+
+.modal.sm {
+	width: 384px;
+}
+
+.modal.md {
+	width: 448px;
+}
+
+.modal.lg {
+	width: 512px;
+}
+
+.modal[open] {
+	animation: show .25s ease-in-out;
+}
+
+html:has(.modal[open]),
+body:has(.modal[open]) {
+	overflow: hidden;
+}
+
+.modal[open]::backdrop {
+	background-color: rgba(0, 0, 0, 0.75);
+	animation: backdrop .3s ease-in-out forwards;
+}
+
+.modal-header:has(*) {
+	margin-bottom: 1rem;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	gap: 1rem;
+
+	* {
+		margin: 0;
+	}
+}
+
+.x-mark-container {
+	cursor: pointer;
+	height: 1.5rem;
+	width: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background-color .15s ease;
+	border-radius: .25rem;
+}
+
+.x-mark-container:hover {
+	background-color: hsl(var(--default-base));
+}
+
+.modal-footer {
+	display: none;
+}
+
+.modal-footer:has(*) {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	margin-top: 1rem;
+	justify-content: end;
+}
+
+@keyframes hide {
+	0% {
+		scale: 1;
+		opacity: 1;
+		display: block;
+	}
+	100% {
+		scale: 0.85;
+		opacity: 0;
+		display: none;
+	}
+}
+
+@keyframes show {
+	0% {
+		scale: 0.85;
+		opacity: 0;
+		display: none;
+	}
+	100% {
+		scale: 1;
+		opacity: 1;
+		display: block;
+	}
+}
+
+@keyframes backdrop {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
diff --git a/packages/studiocms_ui/src/components/Modal/modal.ts b/packages/studiocms_ui/src/components/Modal/modal.ts
new file mode 100644
index 000000000..5c575bc25
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Modal/modal.ts
@@ -0,0 +1,125 @@
+class ModalHelper {
+	public element: HTMLDialogElement;
+	public cancelButton: HTMLButtonElement | undefined;
+	public confirmButton: HTMLButtonElement | undefined;
+
+	private isForm = false;
+	private modalForm: HTMLFormElement;
+
+	constructor(id: string) {
+		const element = document.getElementById(id) as HTMLDialogElement;
+
+		if (!element) {
+			throw new Error(`No modal with ID ${id} found.`);
+		}
+
+		this.element = element as HTMLDialogElement;
+		this.modalForm = document.getElementById(`${id}-form-element`) as HTMLFormElement;
+
+		const isDismissable = this.element.dataset.dismissable === 'true';
+		const isForm = this.element.dataset.form === 'true';
+
+		if (isDismissable) {
+			this.addDismissiveClickListener();
+		}
+
+		if (isForm) this.isForm = true;
+
+		this.addButtonListeners(id, isDismissable);
+	}
+
+	private addButtonListeners = (id: string, dismissable: boolean) => {
+		if (dismissable) {
+			const xMarkButton = document.getElementById(`${id}-btn-x`) as HTMLButtonElement;
+			xMarkButton.addEventListener('click', this.hide);
+		}
+
+		if (!this.element.dataset.buttons) return;
+
+		const usedButtons = this.element.dataset.buttons.split(';');
+
+		if (usedButtons.includes('cancel')) {
+			this.cancelButton = document.getElementById(`${id}-btn-cancel`) as HTMLButtonElement;
+			this.cancelButton.addEventListener('click', this.hide);
+		}
+
+		if (usedButtons.includes('confirm')) {
+			this.confirmButton = document.getElementById(`${id}-btn-confirm`) as HTMLButtonElement;
+			this.confirmButton.addEventListener('click', this.hide);
+		}
+	};
+
+	private addDismissiveClickListener = () => {
+		this.element.addEventListener('click', (e: MouseEvent) => {
+			if (!e.target) return;
+
+			const { left, right, top, bottom } = this.element.getBoundingClientRect();
+
+			const clickWithinModalBox =
+				e.clientX < right && e.clientX > left && e.clientY < bottom && e.clientY > top;
+
+			if (!clickWithinModalBox) {
+				this.element.close();
+			}
+		});
+	};
+
+	public show = () => {
+		this.element.showModal();
+	};
+
+	public hide = () => {
+		this.element.close();
+	};
+
+	public bindTrigger = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No element with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.show);
+	};
+
+	public registerCancelCallback = (func: () => void) => {
+		if (!this.cancelButton) {
+			throw new Error('Unable to register cancel callback without a cancel button.');
+		}
+
+		this.cancelButton.removeEventListener('click', this.hide);
+
+		this.cancelButton.addEventListener('click', () => {
+			func();
+			this.hide();
+		});
+	};
+
+	public registerConfirmCallback = (func: (data?: FormData | undefined) => void) => {
+		if (!this.confirmButton) {
+			throw new Error('Unable to register cancel callback without a confirmation button.');
+		}
+
+		this.confirmButton.removeEventListener('click', this.hide);
+
+		if (this.isForm) {
+			this.modalForm.addEventListener('submit', (e) => {
+				e.preventDefault();
+
+				const formData = new FormData(this.modalForm);
+
+				func(formData);
+				this.hide();
+
+				setTimeout(() => this.modalForm.reset(), 450);
+			});
+		} else {
+			this.confirmButton.addEventListener('click', () => {
+				func();
+				this.hide();
+			});
+		}
+	};
+}
+
+export { ModalHelper };
diff --git a/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro b/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro
new file mode 100644
index 000000000..61edc444f
--- /dev/null
+++ b/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro
@@ -0,0 +1,74 @@
+---
+import './RadioGroup.css';
+
+import type { StudioCMSColorway } from '../../utils/colors';
+import { generateID } from '../../utils/generateID';
+
+type Option = {
+	label: string;
+	value: string;
+	disabled?: boolean;
+};
+
+type Props = {
+	label: string;
+	color?: StudioCMSColorway;
+	defaultValue?: string;
+	options: Option[];
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+	horizontal?: boolean;
+	class?: string;
+};
+
+const {
+	label,
+	color,
+	defaultValue,
+	options,
+	disabled,
+	name = generateID('radio'),
+	isRequired,
+	horizontal,
+	class: className,
+} = Astro.props;
+---
+
+<div 
+  class="radio-container"
+  class:list={[
+    disabled && "disabled",
+    horizontal && "horizontal",
+    color,
+    className
+  ]}
+>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <div class="radio-inputs">
+    {options.map(({ label, value, disabled: individuallyDisabled }) => (
+      <label
+        for={value}
+        class="radio-label"
+        class:list={[ individuallyDisabled && "disabled" ]}
+      >
+        <div class="radio-box-container">
+          <div class="radio-box" />
+        </div>
+        <input 
+          class="radio-toggle" 
+          type="radio" 
+          value={value} 
+          id={value} 
+          name={name} 
+          checked={value === defaultValue} 
+          disabled={disabled || individuallyDisabled}
+          required={isRequired}
+        />
+        <span>{label}</span>
+      </label>
+    ))}
+  </div>
+</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.css b/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.css
new file mode 100644
index 000000000..55b1ea0ce
--- /dev/null
+++ b/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.css
@@ -0,0 +1,100 @@
+.radio-container {
+	display: flex;
+	flex-direction: column;
+	gap: .5rem;
+}
+
+.radio-container.disabled {
+	opacity: 0.5;
+	color: hsl(var(--text-muted));
+}
+
+.radio-label.disabled {
+	opacity: 0.5;
+	color: hsl(var(--text-muted));
+	pointer-events: none;
+}
+
+.req-star {
+	color: hsl(var(--danger-base));
+	font-weight: 700;
+}
+
+.radio-inputs {
+	display: flex;
+	flex-direction: column;
+	gap: .75rem;
+}
+
+.radio-container.horizontal .radio-inputs {
+	flex-direction: row;
+}
+
+.radio-label {
+	display: flex;
+	flex-direction: row;
+	gap: .5rem;
+	position: relative;
+}
+
+.radio-label:hover .radio-box {
+	outline-color: hsl(var(--default-hover));
+}
+
+.radio-container:not(.disabled) .radio-label:active .radio-box {
+	outline-color: hsl(var(--default-active));
+	scale: 0.9;
+}
+
+.radio-label:has(.radio-toggle:checked) .radio-box {
+	background-color: hsl(var(--text-normal));
+	outline-color: hsl(var(--text-normal));
+}
+
+.radio-container.primary .radio-label:has(.radio-toggle:checked) .radio-box {
+	background-color: hsl(var(--primary-base));
+	outline-color: hsl(var(--primary-base));
+}
+
+.radio-container.success .radio-label:has(.radio-toggle:checked) .radio-box {
+	background-color: hsl(var(--success-base));
+	outline-color: hsl(var(--success-base));
+}
+
+.radio-container.warning .radio-label:has(.radio-toggle:checked) .radio-box {
+	background-color: hsl(var(--warning-base));
+	outline-color: hsl(var(--warning-base));
+}
+
+.radio-container.danger .radio-label:has(.radio-toggle:checked) .radio-box {
+	background-color: hsl(var(--danger-base));
+	outline-color: hsl(var(--danger-base));
+}
+
+.radio-box-container {
+	width: 20px;
+	height: 20px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.radio-box {
+	width: 12px;
+	height: 12px;
+	border-radius: 20px;
+	outline: 1px solid hsl(var(--default-base));
+	outline-offset: 4px;
+	transition: all .15s ease;
+}
+
+.radio-toggle {
+	width: 0;
+	height: 0;
+	visibility: hidden;
+	opacity: 0;
+	margin: 0;
+	position: absolute;
+}
diff --git a/packages/studiocms_ui/src/components/Row/Row.astro b/packages/studiocms_ui/src/components/Row/Row.astro
new file mode 100644
index 000000000..8520ca904
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Row/Row.astro
@@ -0,0 +1,14 @@
+---
+import './Row.css';
+
+type Props = {
+	alignCenter?: boolean;
+	gapSize?: 'sm' | 'md' | 'lg';
+};
+
+const { alignCenter, gapSize = 'md' } = Astro.props;
+---
+
+<div class="row" class:list={[alignCenter && "align", gapSize]}>
+  <slot />
+</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Row/Row.css b/packages/studiocms_ui/src/components/Row/Row.css
new file mode 100644
index 000000000..151c9c2ec
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Row/Row.css
@@ -0,0 +1,22 @@
+.row {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	flex-wrap: wrap;
+}
+
+.row.align {
+	align-items: center;
+}
+
+.row.sm {
+	gap: .5rem;
+}
+
+.row.md {
+	gap: 1rem;
+}
+
+.row.lg {
+	gap: 2rem;
+}
diff --git a/packages/studiocms_ui/src/components/Select/Select.astro b/packages/studiocms_ui/src/components/Select/Select.astro
new file mode 100644
index 000000000..1de1c82a7
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Select/Select.astro
@@ -0,0 +1,179 @@
+---
+import './Select.css';
+
+import Icon from '../../utils/Icon.astro';
+import { generateID } from '../../utils/generateID';
+
+type Option = {
+	label: string;
+	value: string;
+	disabled?: boolean;
+};
+
+type Props = {
+	label?: string;
+	defaultValue?: string;
+	class?: string;
+	name?: string;
+	isRequired?: boolean;
+	options: Option[];
+	disabled?: boolean;
+	fullWidth?: boolean;
+};
+
+const {
+	label,
+	defaultValue,
+	class: className,
+	name = generateID('dropdown'),
+	isRequired,
+	options = [],
+	disabled,
+	fullWidth,
+} = Astro.props;
+---
+
+<div id={`${name}-container`} class="select-label" class:list={[disabled && "disabled", className, fullWidth && "full"]}>
+  <label class="label" for={`${name}-select-btn`}>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </label>
+  <button
+    class="select-button"
+    role="combobox"
+    id={`${name}-select-btn`}
+    type="button"
+  >
+    <span id={`${name}-value-span`}>{defaultValue ? options.find(x => x.value === defaultValue)?.label : "Select"}</span>
+    <Icon name='chevron-up-down' width={20} height={20} />
+  </button>
+  <ul class="select-dropdown" role="listbox" id={`${name}-dropdown`}>
+    {options.map((x, i) => (
+      <li 
+        class="select-option"
+        role="option"
+        value={x.value}
+        class:list={[defaultValue === x.value && `selected`, x.disabled && "disabled"]}
+        id={defaultValue === x.value ? `${name}-selected` : ''}
+        data-option-index={i}
+      >
+        {x.label}
+      </li>
+    ))}
+  </ul>
+  <select class="hidden-select" id={name} name={name} required={isRequired}>
+    <option 
+      value={''}
+    >
+      Select
+    </option>
+    {options.map((x) => (
+      <option 
+        value={x.value}
+        selected={defaultValue === x.value}
+        disabled={x.disabled}
+      >
+        {x.label}
+      </option>
+    ))}
+  </select>
+</div>
+<script is:inline define:vars={{ id: name, options }}>
+  const container = document.getElementById(`${id}-container`);
+  const hiddenSelect = document.getElementById(id);
+  const button = document.getElementById(`${id}-select-btn`);
+  const valueSpan = document.getElementById(`${id}-value-span`);
+  const dropdown = document.getElementById(`${id}-dropdown`);
+  const optionElements = container.querySelectorAll('li');
+
+  let active = false;
+
+  button.addEventListener('click', () => {
+    const { bottom, left, right, width, x, y, height } = button.getBoundingClientRect();
+
+    const optionHeight = 36;
+    const totalBorderSize = 2;
+    const margin = 4;
+    
+    const dropdownHeight = ((options.length * optionHeight) + totalBorderSize + margin);
+
+    const CustomRect = {
+      top: bottom + margin,
+      left,
+      right,
+      bottom: bottom + margin + dropdownHeight,
+      width,
+      height: dropdownHeight,
+      x,
+      y: y + height + margin,
+    };
+
+    if (active) {
+      dropdown.classList.remove('active', 'above');
+      active = false;
+      return;
+    }
+
+    active = true;
+
+    if (
+      CustomRect.top >= 0 &&
+      CustomRect.left >= 0 &&
+      CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
+      CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    ) {
+      dropdown.classList.add('active');
+    } else {
+      dropdown.classList.add('active', 'above');
+    }
+  });
+
+  optionElements.forEach((option) => {
+    option.addEventListener('click', (e) => {
+      e.stopImmediatePropagation();
+      if (option.id === `${id}-selected` || !id) return;
+
+      const currentlySelected = document.getElementById(`${id}-selected`);
+      
+      if (currentlySelected) {
+        currentlySelected.classList.remove('selected');
+        currentlySelected.id = '';
+      }
+
+      option.id = `${id}-selected`;
+      option.classList.add('selected');
+
+      const opt = options[parseInt(option.dataset.optionIndex)];
+      hiddenSelect.value = opt.value;
+      
+      valueSpan.textContent = opt.label;
+      dropdown.classList.remove('active', 'above');
+
+      active = false;
+    });
+  });
+
+  window.addEventListener('scroll', () => {
+    dropdown.classList.remove('active', 'above');
+    active = false;
+  });
+
+  hideOnClickOutside(container);
+
+  function hideOnClickOutside(element) {
+    const outsideClickListener = (event) => {
+      if (!element.contains(event.target) && isVisible(element) && active === true) { // or use: event.target.closest(selector) === null
+        dropdown.classList.remove('active', 'above');
+        active = false;
+      }
+    }
+
+    const removeClickListener = () => {
+      document.removeEventListener('click', outsideClickListener);
+    }
+
+    document.addEventListener('click', outsideClickListener);
+  }
+
+  // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 
+  const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+</script>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Select/Select.css b/packages/studiocms_ui/src/components/Select/Select.css
new file mode 100644
index 000000000..29177b51a
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Select/Select.css
@@ -0,0 +1,113 @@
+.select-label {
+	width: fit-content;
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+	min-width: 200px;
+	position: relative;
+}
+
+.select-label.full {
+	width: 100%;
+}
+
+.select-label.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+	color: hsl(var(--text-muted));
+}
+
+.label {
+	font-size: 14px;
+}
+
+.req-star {
+	color: hsl(var(--danger-base));
+	font-weight: 700;
+}
+
+.select-button {
+	padding: .65rem .75rem .65rem 1rem;
+	border-radius: 8px;
+	border: 1px solid hsl(var(--border));
+	background: hsl(var(--background-step-2));
+	color: hsl(var(--text-normal));
+	transition: all .15s ease;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	cursor: pointer;
+	gap: 1rem;
+}
+
+.select-button:hover {
+	background: hsl(var(--background-step-3));
+}
+
+.select-button.active,
+.select-button:active,
+.select-button:has(+ .select-dropdown.active) {
+	border: 1px solid hsl(var(--primary-base));
+	background: hsl(var(--background-step-2));
+}
+
+.select-dropdown {
+	position: absolute;
+	width: 100%;
+	border: 1px solid hsl(var(--border));
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	flex-direction: column;
+	border-radius: .5rem;
+	background-color: hsl(var(--background-step-2));
+	overflow: hidden;
+	top: calc(100% + .25rem);
+	left: 0;
+	display: none;
+	z-index: 90;
+	box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+}
+
+.select-dropdown.active {
+	display: flex;
+}
+
+.select-dropdown.above {
+	top: auto;
+	bottom: calc(100% - 18px + .25rem);
+}
+
+.select-option {
+	padding: .5rem;
+	cursor: pointer;
+	font-size: .975em;
+	transition: all .15s ease;
+}
+
+.select-option.disabled {
+	pointer-events: none;
+	color: hsl(var(--text-muted));
+}
+
+.select-option:hover {
+	background-color: hsl(var(--background-step-3));
+}
+
+.select-option.selected {
+	background-color: hsl(var(--primary-base));
+	color: hsl(var(--text-inverted));
+	cursor: default;
+}
+
+.hidden-select {
+	height: 0;
+	width: 0;
+	border: none;
+	outline: none;
+	position: absolute;
+	background-color: transparent;
+	pointer-events: none;
+	opacity: 0;
+}
diff --git a/packages/studiocms_ui/src/components/Sidebar/Double.astro b/packages/studiocms_ui/src/components/Sidebar/Double.astro
new file mode 100644
index 000000000..09a0c7fb1
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Sidebar/Double.astro
@@ -0,0 +1,11 @@
+---
+import './Double.css';
+---
+<div id="sidebars" class="active inner">
+  <div id="sidebar-outer">
+    <slot name="outer" />
+  </div>
+  <div id="sidebar-inner">
+    <slot name="inner" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Sidebar/Double.css b/packages/studiocms_ui/src/components/Sidebar/Double.css
new file mode 100644
index 000000000..4cf769ab9
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Sidebar/Double.css
@@ -0,0 +1,142 @@
+#sidebars {
+	--sidebars-container-width: calc((280px + 1px) * 2);
+	display: flex;
+	align-items: center;
+	width: var(--sidebars-container-width);
+	min-width: var(--sidebars-container-width);
+	overflow: hidden;
+	transition: all .3s ease;
+	z-index: 10;
+	height: 100%;
+}
+
+#sidebars.active {
+	transform: translateX(0%);
+}
+
+#sidebar-outer {
+	height: 100%;
+	min-width: 280px;
+	width: 280px;
+	background-color: hsl(var(--background-step-1));
+	border-right: 1px solid hsl(var(--border));
+	gap: 1rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	z-index: 10;
+	transition: all .3s ease;
+	padding: 1.5rem;
+}
+
+#sidebar-inner {
+	min-width: 280px;
+	width: 280px;
+	height: 100%;
+	background-color: hsl(var(--background-step-2));
+	border-right: 1px solid hsl(var(--border));
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	align-items: center;
+	justify-content: center;
+	z-index: 5;
+	position: relative;
+	transition: all .3s ease;
+}
+
+#navigate-to-outer-button {
+	display: none;
+	position: absolute;
+	top: 1rem;
+	left: 1rem;
+	padding: .25rem;
+	background-color: hsl(var(--background-step-3));
+	cursor: pointer;
+	border-radius: 8px;
+	align-items: center;
+	color: hsl(var(--text-normal));
+	outline: none;
+	border: none;
+	height: 32px;
+	width: 32px;
+}
+
+#show-navbar-button {
+	z-index: 2;
+}
+
+#swap-to-inner,
+#swap-to-content {
+	display: none;
+}
+
+@media screen and (max-width: 1200px) {
+	#sidebars {
+		--sidebars-container-width: calc(280px + 1px);
+	}
+
+	#swap-to-inner {
+		display: block;
+	}
+
+	#sidebars.inner {
+		#sidebar-outer,
+		#sidebar-inner {
+			transform: translateX(-100%);
+		}
+	}
+
+	#navigate-to-outer-button {
+		display: flex;
+	}
+}
+
+@media screen and (max-width: 840px) {
+	#sidebars {
+		transform: translateX(-100%);
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+	}
+
+	#sidebar-outer,
+	#sidebar-inner {
+		width: 100%;
+		flex: 0 0 100%;
+	}
+
+	#show-navbar-button {
+		display: flex;
+	}
+
+	#swap-to-content {
+		display: block;
+	}
+}
+
+#show-navbar-button {
+	display: none;
+	position: absolute;
+	top: 1rem;
+	left: 1rem;
+	padding: .25rem;
+	background-color: var(--background-step-3);
+	cursor: pointer;
+	border-radius: 8px;
+	align-items: center;
+	color: white;
+	outline: none;
+	border: none;
+	height: 32px;
+	width: 32px;
+}
+
+@media screen and (max-width: 840px) {
+	#show-navbar-button {
+		display: flex;
+	}
+}
diff --git a/packages/studiocms_ui/src/components/Sidebar/Single.astro b/packages/studiocms_ui/src/components/Sidebar/Single.astro
new file mode 100644
index 000000000..2883f679f
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Sidebar/Single.astro
@@ -0,0 +1,6 @@
+---
+import './Single.css';
+---
+<aside id="sidebar">
+  <slot />
+</aside>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Sidebar/Single.css b/packages/studiocms_ui/src/components/Sidebar/Single.css
new file mode 100644
index 000000000..8a8f49562
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Sidebar/Single.css
@@ -0,0 +1,38 @@
+#sidebar {
+	height: 100%;
+	min-width: 280px;
+	width: 280px;
+	background-color: hsl(var(--background-step-1));
+	border-right: 1px solid hsl(var(--border));
+	gap: 1rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 1.5rem;
+	z-index: 10;
+	transition: all .3s ease;
+}
+
+#sidebar.active {
+	transform: translateX(0%);
+}
+
+@media screen and (max-width: 840px) {
+	#sidebar {
+		transform: translateX(-100%);
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		border-right: none;
+	}
+
+	#show-navbar-button {
+		display: flex;
+	}
+
+	#swap-to-content {
+		display: block;
+	}
+}
diff --git a/packages/studiocms_ui/src/components/Sidebar/helpers.ts b/packages/studiocms_ui/src/components/Sidebar/helpers.ts
new file mode 100644
index 000000000..9a9878005
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Sidebar/helpers.ts
@@ -0,0 +1,120 @@
+class SingleSidebarHelper {
+	sidebar: HTMLElement;
+	navbarToggle?: HTMLElement | undefined;
+
+	constructor(toggleID?: string) {
+		const sidebarContainer = document.getElementById('sidebar');
+
+		if (!sidebarContainer) {
+			throw new Error(
+				`No item with ID 'sidebar' found. Please add the <Sidebar> component to this page.`
+			);
+		}
+
+		this.sidebar = sidebarContainer;
+
+		if (toggleID) {
+			const navToggle = document.getElementById(toggleID);
+
+			if (!navToggle) {
+				throw new Error(`No item with ID ${toggleID} found.`);
+			}
+
+			this.navbarToggle = navToggle;
+
+			this.navbarToggle.addEventListener('click', () => {
+				this.sidebar.classList.toggle('active');
+			});
+		}
+	}
+
+	public hideSidebarOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.hideSidebar);
+	};
+
+	public showSidebarOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.showSidebar);
+	};
+
+	public hideSidebar = () => {
+		this.sidebar.classList.remove('active');
+	};
+
+	public showSidebar = () => {
+		this.sidebar.classList.add('active');
+	};
+}
+
+class DoubleSidebarHelper {
+	sidebarsContainer: HTMLElement;
+
+	// TODO: Rework into similar to single sidebar
+	constructor() {
+		const sidebarsContainer = document.getElementById('sidebars');
+
+		if (!sidebarsContainer) {
+			throw new Error(
+				`No item with ID 'sidebars' found. Please add the <DoubleSidebar> component to this page.`
+			);
+		}
+
+		this.sidebarsContainer = sidebarsContainer;
+	}
+
+	public hideSidebarOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.hideSidebar);
+	};
+
+	public showOuterOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.showOuterSidebar);
+	};
+
+	public showInnerOnClick = (elementID: string) => {
+		const element = document.getElementById(elementID);
+
+		if (!element) {
+			throw new Error(`No item with ID ${elementID} found.`);
+		}
+
+		element.addEventListener('click', this.showInnerSidebar);
+	};
+
+	public showInnerSidebar = () => {
+		this.sidebarsContainer.classList.add('inner', 'active');
+	};
+
+	public showOuterSidebar = () => {
+		this.sidebarsContainer.classList.add('active');
+		this.sidebarsContainer.classList.remove('inner');
+	};
+
+	public hideSidebar = () => {
+		this.sidebarsContainer.classList.remove('inner', 'active');
+	};
+}
+
+export { SingleSidebarHelper, DoubleSidebarHelper };
diff --git a/packages/studiocms_ui/src/components/Textarea/Textarea.astro b/packages/studiocms_ui/src/components/Textarea/Textarea.astro
new file mode 100644
index 000000000..3acc73200
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Textarea/Textarea.astro
@@ -0,0 +1,49 @@
+---
+import './Textarea.css';
+
+import { generateID } from '../../utils/generateID';
+
+type Props = {
+	label?: string;
+	placeholder?: string;
+	isRequired?: boolean;
+	fullWidth?: boolean;
+	resize?: boolean;
+	name?: string;
+	disabled?: boolean;
+	defaultValue?: string;
+};
+
+const {
+	label,
+	placeholder,
+	isRequired,
+	fullWidth,
+	resize,
+	name = generateID('textarea'),
+	disabled,
+	defaultValue,
+} = Astro.props;
+---
+<label 
+  for={name} 
+  class="textarea-label"
+  class:list={[
+    fullWidth && "full",
+    resize && "resize",
+    disabled && "disabled",
+  ]}
+>
+  <span class="label">
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <textarea
+    placeholder={placeholder}
+    name={name}
+    id={name}
+    class="textarea"
+    required={isRequired}
+    disabled={disabled}
+    
+  >{defaultValue}</textarea>
+</label>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Textarea/Textarea.css b/packages/studiocms_ui/src/components/Textarea/Textarea.css
new file mode 100644
index 000000000..52ebf39b8
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Textarea/Textarea.css
@@ -0,0 +1,53 @@
+.textarea-label {
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+	margin-top: .5rem;
+	max-width: 80ch;
+}
+
+.textarea-label.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+	color: hsl(var(--text-muted));
+}
+
+.textarea-label.full {
+	width: 100%;
+	max-width: none;
+}
+
+.label {
+	font-size: 14px;
+}
+
+.textarea {
+	padding: .65rem 1rem;
+	border-radius: 8px;
+	border: 1px solid hsl(var(--border));
+	background: hsl(var(--background-step-2));
+	color: hsl(var(--text-normal));
+	transition: all .15s ease;
+	resize: none;
+	min-height: 12ch;
+}
+
+.textarea:hover {
+	background: hsl(var(--background-step-3));
+}
+
+.resize .textarea {
+	resize: both;
+}
+
+.textarea:active,
+.textarea:focus {
+	border: 1px solid hsl(var(--primary-base));
+	outline: none;
+	background: hsl(var(--background-step-2));
+}
+
+.req-star {
+	color: hsl(var(--danger-base));
+	font-weight: 700;
+}
diff --git a/packages/studiocms_ui/src/components/Toast/Toaster.astro b/packages/studiocms_ui/src/components/Toast/Toaster.astro
new file mode 100644
index 000000000..acddd29f7
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Toast/Toaster.astro
@@ -0,0 +1,155 @@
+---
+import './Toaster.css';
+
+type Props = {
+	position?:
+		| 'top-left'
+		| 'top-right'
+		| 'top-center'
+		| 'bottom-left'
+		| 'bottom-right'
+		| 'bottom-center';
+	class?: string;
+	duration?: number;
+	expand?: boolean;
+	closeButton?: boolean;
+	offset?: number;
+	gap?: number;
+};
+
+const {
+	position = 'top-center',
+	class: className,
+	duration = 4000,
+	expand = false,
+	closeButton = false,
+	offset = 32,
+	gap = 8,
+} = Astro.props;
+---
+<div 
+  id="toaster" 
+  class:list={[
+    expand && "expand",
+    closeButton && "closeable",
+    position,
+    className,
+  ]},
+  style={[
+  ].filter(Boolean).join("")}
+>
+  <div 
+    id="toast-drawer"
+    data-offset={offset}
+    data-gap={gap}
+    data-duration={duration}
+    style={[
+      `${position.includes("top-") ? 'top:' : 'bottom:'} ${offset}px;`,
+      position.includes("-left") && `left: ${offset}px`,
+      position.includes("-right") && `right: ${offset}px`,
+      position.includes("-center") && `left: 50%; transform: translateX(-50%);`,
+      `--gap: ${gap}px;`,
+      `padding-left: ${offset}px;`,
+      `padding-right: ${offset}px;`,
+    ].filter(Boolean).join("")}
+  />
+</div>
+<script>
+  import type { ToastProps } from '../../types';
+  import { generateID } from '../../utils/generateID';
+  import { getIconString, type ValidIconString } from '../../utils/iconStrings';
+
+  let activeToasts: string[] = [];
+
+  function removeToast(toastID: string) {
+    const toastEl = document.getElementById(toastID);
+
+    if (!toastEl) return;
+
+    activeToasts = activeToasts.filter(x => x !== toastID);
+    
+    toastEl.classList.add('closing');
+    
+    setTimeout(() => toastEl.remove(), 400);
+  }
+
+  function createToast(props: ToastProps) {
+    const toastParent = document.getElementById('toast-drawer')! as HTMLDivElement;
+    
+    const toastContainer = document.createElement('div');
+    const toastID = generateID('toast');
+    toastContainer.id = toastID;
+    toastContainer.classList.add('toast-container', props.type, `${props.closeButton && "closeable"}`);
+
+    const toastHeader = document.createElement('div');
+    toastHeader.classList.add('toast-header');
+
+    const toastHeaderLeftSide = document.createElement('div');
+    toastHeaderLeftSide.classList.add('toast-header-left-side')
+    
+    const toastTitle = document.createElement('span');
+    toastTitle.textContent = props.title;
+    toastTitle.classList.add('toast-title');
+
+    let iconString: ValidIconString;
+
+    if (props.type === 'success') {
+      iconString = 'check-circle';
+    } else if (props.type === 'danger') {
+      iconString = 'exclamation-circle';
+    } else if (props.type === 'warning') {
+      iconString = 'exclamation-triangle';
+    } else {
+      iconString = 'information-circle';
+    }
+
+    const toastIcon = getIconString(iconString, 'toast-icon', 24, 24);
+    toastHeaderLeftSide.innerHTML = toastIcon;
+
+    toastHeaderLeftSide.appendChild(toastTitle);
+    toastHeader.appendChild(toastHeaderLeftSide);
+    
+    if (props.closeButton) {
+      const closeIconContainer = document.createElement('button');
+      closeIconContainer.classList.add('close-icon-container')
+      closeIconContainer.addEventListener('click', () => removeToast(toastID));
+      closeIconContainer.innerHTML = getIconString('x-mark', 'close-icon', 24, 24);
+
+      toastHeader.appendChild(closeIconContainer);
+    }
+
+    toastContainer.appendChild(toastHeader);
+
+    if (props.description) {
+      const toastDesc = document.createElement('span');
+      toastDesc.textContent = props.description;
+      toastDesc.classList.add('toast-desc');
+
+      toastContainer.appendChild(toastDesc);
+    }
+
+    if (!props.persistent) {
+      const toastProgressBar = document.createElement('div');
+      toastProgressBar.classList.add('toast-progress-bar');
+      toastProgressBar.style.animationDuration = props.duration ? `${props.duration}ms` : `${toastParent.dataset.duration || 4000}ms`;
+
+      toastContainer.appendChild(toastProgressBar);
+    }
+
+    toastParent.appendChild(toastContainer);
+
+    activeToasts.push(toastID);
+
+    if (!props.persistent) {
+      setTimeout(
+        () => removeToast(toastID),
+        props.duration || (toastParent.dataset.duration ? parseInt(toastParent.dataset.duration) : 4000)
+      );
+    }
+  }
+
+  document.addEventListener('createtoast', (e: CustomEvent<ToastProps>) => {
+    e.stopImmediatePropagation();
+    createToast(e.detail);
+  });
+</script>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Toast/Toaster.css b/packages/studiocms_ui/src/components/Toast/Toaster.css
new file mode 100644
index 000000000..1a8b72963
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Toast/Toaster.css
@@ -0,0 +1,160 @@
+#toaster {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 100;
+	pointer-events: none;
+}
+
+#toast-drawer {
+	max-width: 420px;
+	width: 100%;
+	height: fit-content;
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+}
+
+#toaster.top-left #toast-drawer,
+#toaster.bottom-left #toast-drawer {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.toast-container {
+	pointer-events: all;
+	padding: 1rem;
+	border-radius: .5rem;
+	border: 1px solid hsl(var(--border));
+	background-color: hsl(var(--background-base));
+	box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+	display: flex;
+	flex-direction: column;
+	gap: .5rem;
+	position: relative;
+	overflow: hidden;
+	margin-bottom: var(--gap);
+	animation: toast-pop-in .25s ease forwards;
+}
+
+.toast-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.toast-header-left-side {
+	display: flex;
+	flex-direction: row;
+	gap: .5rem;
+	align-items: center;
+	font-weight: 500;
+	font-size: 1.125em;
+}
+
+.toast-header-left-side svg {
+	color: hsl(var(--primary-base));
+}
+
+.toast-container.success .toast-header-left-side svg {
+	color: hsl(var(--success-base));
+}
+
+.toast-container.warning .toast-header-left-side svg {
+	color: hsl(var(--warning-base));
+}
+
+.toast-container.danger .toast-header-left-side svg {
+	color: hsl(var(--danger-base));
+}
+
+.toast-progress-bar {
+	position: absolute;
+	height: 4px;
+	width: 100%;
+	bottom: 0;
+	left: 0%;
+	background-color: hsl(var(--primary-base));
+	animation: toast-progress forwards linear;
+}
+
+.toast-container.success .toast-progress-bar {
+	background-color: hsl(var(--success-base));
+}
+
+.toast-container.warning .toast-progress-bar {
+	background-color: hsl(var(--warning-base));
+}
+
+.toast-container.danger .toast-progress-bar {
+	background-color: hsl(var(--danger-base));
+}
+
+.close-icon-container {
+	cursor: pointer;
+	height: 1.5rem;
+	width: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background-color .15s ease;
+	border-radius: .25rem;
+}
+
+.close-icon-container:hover {
+	background-color: hsl(var(--default-base));
+}
+
+.toast-container.closing {
+	animation: toast-closing .25s ease forwards;
+}
+
+@keyframes toast-pop-in {
+	0% {
+		opacity: 0;
+		scale: 0.75;
+	}
+	100% {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes toast-closing {
+	0% {
+		opacity: 1;
+		scale: 1;
+		max-height: 500px;
+		margin-bottom: var(--gap);
+		padding: 1rem;
+		border: 1px solid hsl(var(--border));
+	}
+	62.5% {
+		scale: 0.75;
+		opacity: 0;
+		max-height: 500px;
+		margin-bottom: var(--gap);
+		padding: 1rem;
+		border: 1px solid hsl(var(--border));
+	}
+	100% {
+		scale: 0.75;
+		opacity: 0;
+		max-height: 0px;
+		margin-bottom: 0;
+		padding: 0;
+		border: 0px solid hsl(var(--border));
+	}
+}
+
+@keyframes toast-progress {
+	0% {
+		left: 0%;
+	}
+	100% {
+		left: -100%;
+	}
+}
diff --git a/packages/studiocms_ui/src/components/Toast/toast.ts b/packages/studiocms_ui/src/components/Toast/toast.ts
new file mode 100644
index 000000000..ca20402b3
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Toast/toast.ts
@@ -0,0 +1,11 @@
+import type { ToastProps } from '../../types';
+
+function toast(props: ToastProps) {
+	const createToast = new CustomEvent('createtoast', {
+		detail: props,
+	});
+
+	document.dispatchEvent(createToast);
+}
+
+export { toast };
diff --git a/packages/studiocms_ui/src/components/Toggle/Toggle.astro b/packages/studiocms_ui/src/components/Toggle/Toggle.astro
new file mode 100644
index 000000000..7f9928cb7
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Toggle/Toggle.astro
@@ -0,0 +1,51 @@
+---
+import './Toggle.css';
+
+import type { StudioCMSColorway } from '../../utils/colors';
+import { generateID } from '../../utils/generateID';
+
+type Props = {
+	label: string;
+	size?: 'sm' | 'md' | 'lg';
+	color?: StudioCMSColorway;
+	defaultChecked?: boolean;
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+};
+
+const {
+	size = 'md',
+	color = 'default',
+	defaultChecked,
+	disabled,
+	name = generateID('checkbox'),
+	label,
+	isRequired,
+} = Astro.props;
+---
+<label
+  class="toggle-label"
+  for={name}
+  class:list={[
+    disabled && "disabled",
+    color,
+    size,
+  ]}
+>
+  <div class="toggle-container">
+    <div class="toggle-switch" />
+    <input
+      type="checkbox"
+      name={name}
+      id={name}
+      checked={defaultChecked}
+      disabled={disabled}
+      required={isRequired}
+      class="checkbox"
+    />
+  </div>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+</label>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Toggle/Toggle.css b/packages/studiocms_ui/src/components/Toggle/Toggle.css
new file mode 100644
index 000000000..20b0c0412
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Toggle/Toggle.css
@@ -0,0 +1,95 @@
+.toggle-label {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: .5rem;
+	position: relative;
+	margin: .25rem 0;
+}
+
+.toggle-label.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+	color: hsl(var(--text-muted));
+}
+
+.toggle-label:active .toggle-switch {
+	transform: scale(0.85);
+}
+
+.toggle-container {
+	--toggle-height: 12px;
+	--toggle-width: 40px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	transition: all .15s ease;
+	background-color: hsl(var(--default-base));
+	width: var(--toggle-width);
+	height: var(--toggle-height);
+	border-radius: var(--toggle-height);
+}
+
+.toggle-switch {
+	--switch: calc(var(--toggle-height) * 1.75);
+	height: var(--switch);
+	width: var(--switch);
+	background-color: hsl(var(--text-muted));
+	border-radius: var(--toggle-height);
+	position: relative;
+	left: 0;
+	transition: all .15s ease;
+	will-change: transform;
+}
+
+.toggle-container:has(.checkbox:checked) .toggle-switch {
+	left: calc(100% - var(--switch));
+	background-color: hsl(var(--text-normal));
+}
+
+.toggle-label.sm .toggle-container {
+	--toggle-height: 10px;
+	--toggle-width: 32px;
+}
+
+.toggle-label.sm .toggle-switch {
+	--switch: calc(var(--toggle-height) * 1.65);
+}
+
+.toggle-label.lg .toggle-container {
+	--toggle-height: 16px;
+	--toggle-width: 48px;
+}
+
+.toggle-label.lg .toggle-switch {
+	--switch: calc(var(--toggle-height) * 1.65);
+}
+
+.toggle-label.primary .toggle-container:has(.checkbox:checked) {
+	background-color: hsl(var(--primary-base));
+}
+
+.toggle-label.success .toggle-container:has(.checkbox:checked) {
+	background-color: hsl(var(--success-base));
+}
+
+.toggle-label.warning .toggle-container:has(.checkbox:checked) {
+	background-color: hsl(var(--warning-base));
+}
+
+.toggle-label.danger .toggle-container:has(.checkbox:checked) {
+	background-color: hsl(var(--danger-base));
+}
+
+.req-star {
+	color: hsl(var(--danger-base));
+	font-weight: 700;
+}
+
+.checkbox {
+	width: 0;
+	height: 0;
+	visibility: hidden;
+	opacity: 0;
+	margin: 0;
+}
diff --git a/packages/studiocms_ui/src/components/User/User.astro b/packages/studiocms_ui/src/components/User/User.astro
new file mode 100644
index 000000000..edc520a6d
--- /dev/null
+++ b/packages/studiocms_ui/src/components/User/User.astro
@@ -0,0 +1,28 @@
+---
+import './User.css';
+
+import Icon from '../../utils/Icon.astro';
+
+type Props = {
+	name: string;
+	description: string;
+	avatar?: string;
+	class?: string;
+};
+
+const { name, description, avatar, class: className } = Astro.props;
+---
+<div class="user-container" class:list={[ className ]}>
+  <div class="avatar-container">
+    <!-- TODO: Astro Image or Unpic? -->
+    {avatar ? (
+      <img src={avatar} class="avatar-img" />
+    ) : (
+      <Icon name='user' width={32} height={32} />
+    )}
+  </div>
+  <div class="text-content">
+    <span class="name">{name}</span>
+    <span class="description">{description}</span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/User/User.css b/packages/studiocms_ui/src/components/User/User.css
new file mode 100644
index 000000000..ebbe4fa79
--- /dev/null
+++ b/packages/studiocms_ui/src/components/User/User.css
@@ -0,0 +1,40 @@
+.user-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 1rem;
+}
+
+.avatar-container {
+	width: 3rem;
+	height: 3rem;
+	background-color: hsl(var(--default-base));
+	border-radius: 3rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	border: 1px solid hsl(var(--border));
+}
+
+.avatar-img {
+	width: 100%;
+	height: auto;
+}
+
+.text-content {
+	display: flex;
+	flex-direction: column;
+	gap: .125rem;
+}
+
+.name {
+	font-size: 1em;
+	font-weight: 600;
+}
+
+.description {
+	font-size: .875em;
+	font-weight: 400;
+	color: hsl(var(--text-muted));
+}
diff --git a/packages/studiocms_ui/src/components/index.ts b/packages/studiocms_ui/src/components/index.ts
new file mode 100644
index 000000000..30aeb3808
--- /dev/null
+++ b/packages/studiocms_ui/src/components/index.ts
@@ -0,0 +1,23 @@
+export { default as Button } from './Button/Button.astro';
+export { default as Divider } from './Divider/Divider.astro';
+export { default as Input } from './Input/Input.astro';
+export { default as Row } from './Row/Row.astro';
+export { default as Center } from './Center/Center.astro';
+export { default as Textarea } from './Textarea/Textarea.astro';
+export { default as Checkbox } from './Checkbox/Checkbox.astro';
+export { default as Toggle } from './Toggle/Toggle.astro';
+export { default as RadioGroup } from './RadioGroup/RadioGroup.astro';
+export { default as Toaster } from './Toast/Toaster.astro';
+export { default as Card } from './Card/Card.astro';
+export { default as Modal } from './Modal/Modal.astro';
+export { default as Select } from './Select/Select.astro';
+export { default as Dropdown } from './Dropdown/Dropdown.astro';
+export { default as User } from './User/User.astro';
+
+export { default as Sidebar } from './Sidebar/Single.astro';
+export { default as DoubleSidebar } from './Sidebar/Double.astro';
+export { SingleSidebarHelper, DoubleSidebarHelper } from './Sidebar/helpers';
+
+export { toast } from './Toast/toast';
+export { ModalHelper } from './Modal/modal';
+export { DropdownHelper } from './Dropdown/dropdown';
diff --git a/packages/studiocms_ui/src/css/colors.css b/packages/studiocms_ui/src/css/colors.css
new file mode 100644
index 000000000..8b44c71f7
--- /dev/null
+++ b/packages/studiocms_ui/src/css/colors.css
@@ -0,0 +1,106 @@
+[data-theme="light"],
+[data-theme="light"] * {
+	color-scheme: light;
+}
+
+[data-theme="dark"],
+[data-theme="dark"] * {
+	color-scheme: dark;
+}
+
+:root {
+	/* Default Styles (Dark Mode) */
+	--background-base: 0, 0%, 6%;
+	--background-step-1: 0, 0%, 8%;
+	--background-step-2: 0, 0%, 10%;
+	--background-step-3: 0, 0%, 14%;
+
+	--text-normal: 0, 0%, 100%;
+	--text-muted: 0, 0%, 54%;
+	--text-inverted: 0, 0%, 0%;
+
+	--border: 240, 5%, 17%;
+
+	--shadow: 0, 0%, 0%;
+
+	--default-base: 0, 0%, 14%;
+	--default-hover: 0, 0%, 15%;
+	--default-active: 0, 0%, 19%;
+
+	--primary-base: 259, 83%, 73%;
+	--primary-hover: 259, 77%, 71%;
+	--primary-active: 259, 73%, 67%;
+
+	--success-base: 142, 71%, 46%;
+	--success-hover: 142, 72%, 52%;
+	--success-active: 142, 87%, 59%;
+
+	--warning-base: 48, 96%, 53%;
+	--warning-hover: 48, 97%, 61%;
+	--warning-active: 48, 100%, 71%;
+
+	--danger-base: 339, 97%, 31%;
+	--danger-hover: 337, 98%, 37%;
+	--danger-active: 337, 88%, 45%;
+
+	/* Non-specific variables */
+	--text-light: 0, 0%, 100%;
+	--text-dark: 0, 0%, 0%;
+
+	/* Flat colorways since they use variables */
+	--default-flat: var(--default-base), 0.5;
+	--default-flat-hover: var(--default-base), 0.75;
+	--default-flat-active: var(--default-base), 0.85;
+
+	--primary-flat: var(--primary-base), 0.1;
+	--primary-flat-hover: var(--primary-base), 0.25;
+	--primary-flat-active: var(--primary-base), 0.35;
+
+	--success-flat: var(--success-base), 0.1;
+	--success-flat-hover: var(--success-base), 0.25;
+	--success-flat-active: var(--success-base), 0.35;
+
+	--warning-flat: var(--warning-base), 0.1;
+	--warning-flat-hover: var(--warning-base), 0.25;
+	--warning-flat-active: var(--warning-base), 0.35;
+
+	--danger-flat: var(--danger-base), 0.1;
+	--danger-flat-hover: var(--danger-base), 0.25;
+	--danger-flat-active: var(--danger-base), 0.35;
+}
+
+[data-theme="light"] {
+	/* Light Mode Styles */
+	--background-base: 0, 0%, 97%;
+	--background-step-1: 0, 0%, 90%;
+	--background-step-2: 0, 0%, 85%;
+	--background-step-3: 0, 0%, 80%;
+
+	--text-normal: 0, 0%, 0%;
+	--text-muted: 0, 0%, 24%;
+	--text-inverted: 0, 0%, 100%;
+
+	--border: 263, 5%, 68%;
+
+	--shadow: 0, 0%, 65%;
+
+	--default-base: 0, 0%, 74%;
+	--default-hover: 0, 0%, 81%;
+	--default-active: 0, 0%, 91%;
+
+	--primary-base: 259, 85%, 61%;
+	--primary-hover: 259, 78%, 56%;
+	--primary-active: 259, 71%, 50%;
+
+	--success-base: 142, 59%, 47%;
+	--success-hover: 142, 62%, 56%;
+	--success-active: 142, 87%, 59%;
+
+	--warning-base: 48, 92%, 46%;
+	--warning-hover: 48, 88%, 43%;
+	--warning-active: 48, 85%, 40%;
+
+	--danger-base: 339, 97%, 31%;
+	--danger-hover: 337, 98%, 37%;
+	--danger-active: 337, 88%, 45%;
+}
diff --git a/packages/studiocms_ui/src/css/global.css b/packages/studiocms_ui/src/css/global.css
new file mode 100644
index 000000000..a3ab33444
--- /dev/null
+++ b/packages/studiocms_ui/src/css/global.css
@@ -0,0 +1,4 @@
+@import url("./colors.css");
+@import url("./sizes.css");
+@import url("./resets.css");
+@import url("./spacings.css");
diff --git a/packages/studiocms_ui/src/css/resets.css b/packages/studiocms_ui/src/css/resets.css
new file mode 100644
index 000000000..5d4ad9fa4
--- /dev/null
+++ b/packages/studiocms_ui/src/css/resets.css
@@ -0,0 +1,56 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box !important;
+}
+
+html {
+	color-scheme: dark;
+	accent-color: hsl(var(--primary-base));
+}
+
+html,
+body {
+	margin: 0;
+}
+
+html[data-theme="light"] {
+	color-scheme: light;
+}
+
+body {
+	font-family: "Onest Variable", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	color: hsl(var(--text-normal));
+	background-color: hsl(var(--background-base));
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+code {
+	overflow-wrap: anywhere;
+}
+
+/* TODO: Move to layout & add mono font */
+code {
+	font-family: var(--__sl-font-mono);
+}
+
+button {
+	border: none;
+	outline: none;
+	background: none;
+	padding: 0;
+}
diff --git a/packages/studiocms_ui/src/css/sizes.css b/packages/studiocms_ui/src/css/sizes.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/studiocms_ui/src/css/spacings.css b/packages/studiocms_ui/src/css/spacings.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/studiocms_ui/src/env.d.ts b/packages/studiocms_ui/src/env.d.ts
new file mode 100644
index 000000000..6812eb0f7
--- /dev/null
+++ b/packages/studiocms_ui/src/env.d.ts
@@ -0,0 +1,17 @@
+/// <reference path="../.astro/types.d.ts" />
+
+import type { ToastProps } from './types';
+
+interface CustomEventMap {
+	createtoast: CustomEvent<ToastProps>;
+}
+
+declare global {
+	interface Document {
+		addEventListener<K extends keyof CustomEventMap>(
+			type: K,
+			listener: (this: Document, ev: CustomEventMap[K]) => void
+		): void;
+		dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
+	}
+}
diff --git a/packages/studiocms_ui/src/icons/Checkmark.astro b/packages/studiocms_ui/src/icons/Checkmark.astro
new file mode 100644
index 000000000..ae5fe2720
--- /dev/null
+++ b/packages/studiocms_ui/src/icons/Checkmark.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg role="presentation" viewBox="0 0 17 18" width={width} height={height} {...props}>
+  <polyline fill="none" points="1 9 7 14 15 4" stroke="currentColor" stroke-dasharray="22" stroke-dashoffset="66" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
+</svg>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/icons/ChevronUpDown.astro b/packages/studiocms_ui/src/icons/ChevronUpDown.astro
new file mode 100644
index 000000000..39f111565
--- /dev/null
+++ b/packages/studiocms_ui/src/icons/ChevronUpDown.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width={width} height={height} {...props} stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+</svg>
diff --git a/packages/studiocms_ui/src/icons/User.astro b/packages/studiocms_ui/src/icons/User.astro
new file mode 100644
index 000000000..720880ff4
--- /dev/null
+++ b/packages/studiocms_ui/src/icons/User.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width={width} height={height} {...props}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+</svg>
diff --git a/packages/studiocms_ui/src/icons/X-Mark.astro b/packages/studiocms_ui/src/icons/X-Mark.astro
new file mode 100644
index 000000000..77f29518e
--- /dev/null
+++ b/packages/studiocms_ui/src/icons/X-Mark.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width={width} height={height} {...props}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/layouts.ts b/packages/studiocms_ui/src/layouts.ts
new file mode 100644
index 000000000..c4e666d29
--- /dev/null
+++ b/packages/studiocms_ui/src/layouts.ts
@@ -0,0 +1 @@
+export { RootLayout, type RootLayoutProps } from './layouts/index';
diff --git a/packages/studiocms_ui/src/layouts/RootLayout.astro b/packages/studiocms_ui/src/layouts/RootLayout.astro
new file mode 100644
index 000000000..e1d947ab8
--- /dev/null
+++ b/packages/studiocms_ui/src/layouts/RootLayout.astro
@@ -0,0 +1,34 @@
+---
+import '@fontsource-variable/onest/index.css';
+import '../css/global.css';
+import BaseHead from '../components/BaseHead.astro';
+import type { HeadConfig } from '../utils/headers';
+
+export type RootLayoutProps = {
+	title: string;
+	description: string;
+	image?: string | undefined;
+	headers?: HeadConfig | undefined;
+	lang?: string;
+	defaultTheme?: 'dark' | 'light';
+};
+
+type Props = RootLayoutProps;
+
+const { title, description, image, headers, lang = 'en', defaultTheme = 'dark' } = Astro.props;
+---
+
+<!doctype html>
+<html lang={lang} data-theme={defaultTheme}>
+  <head>
+    <BaseHead
+      {title}
+      {description}
+      {headers}
+      {image}
+    />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/layouts/index.ts b/packages/studiocms_ui/src/layouts/index.ts
new file mode 100644
index 000000000..168712b0a
--- /dev/null
+++ b/packages/studiocms_ui/src/layouts/index.ts
@@ -0,0 +1,2 @@
+export { default as RootLayout } from './RootLayout.astro';
+export { type RootLayoutProps } from './RootLayout.astro';
diff --git a/packages/studiocms_ui/src/types/index.ts b/packages/studiocms_ui/src/types/index.ts
new file mode 100644
index 000000000..e1c3d53d0
--- /dev/null
+++ b/packages/studiocms_ui/src/types/index.ts
@@ -0,0 +1,16 @@
+type PersistentToastProps = {
+	persistent: true;
+	closeButton: true;
+};
+
+type NormalToastProps = {
+	persistent?: false;
+	closeButton?: boolean;
+};
+
+export type ToastProps = (PersistentToastProps | NormalToastProps) & {
+	title: string;
+	description?: string;
+	type: 'success' | 'warning' | 'danger' | 'info';
+	duration?: number;
+};
diff --git a/packages/studiocms_ui/src/utils/Icon.astro b/packages/studiocms_ui/src/utils/Icon.astro
new file mode 100644
index 000000000..fa909b952
--- /dev/null
+++ b/packages/studiocms_ui/src/utils/Icon.astro
@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+type AstroComponent = (_props: Record<string, any>) => any;
+
+type UIIcons = 'checkmark' | 'x-mark' | 'chevron-up-down' | 'user';
+
+// Map of icon names to Astro components
+const Components: Record<UIIcons, AstroComponent> = {
+	checkmark: (await import('../icons/Checkmark.astro')).default,
+	'x-mark': (await import('../icons/X-Mark.astro')).default,
+	'chevron-up-down': (await import('../icons/ChevronUpDown.astro')).default,
+	user: (await import('../icons/User.astro')).default,
+};
+
+interface Props extends HTMLAttributes<'svg'> {
+	name: UIIcons;
+	width?: number;
+	height?: number;
+}
+
+const { name, width, height, ...props } = Astro.props;
+
+const Tag = Components[name];
+---
+<Tag width={width} height={height} {...props} />
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/utils/colors.ts b/packages/studiocms_ui/src/utils/colors.ts
new file mode 100644
index 000000000..bf7222a0d
--- /dev/null
+++ b/packages/studiocms_ui/src/utils/colors.ts
@@ -0,0 +1 @@
+export type StudioCMSColorway = 'default' | 'primary' | 'success' | 'warning' | 'danger';
diff --git a/packages/studiocms_ui/src/utils/generateID.ts b/packages/studiocms_ui/src/utils/generateID.ts
new file mode 100644
index 000000000..97ba2b129
--- /dev/null
+++ b/packages/studiocms_ui/src/utils/generateID.ts
@@ -0,0 +1,5 @@
+function generateID(prefix: string) {
+	return `${prefix}-${Math.random().toString(16).slice(2)}`;
+}
+
+export { generateID };
diff --git a/packages/studiocms_ui/src/utils/headers.ts b/packages/studiocms_ui/src/utils/headers.ts
new file mode 100644
index 000000000..66fde456d
--- /dev/null
+++ b/packages/studiocms_ui/src/utils/headers.ts
@@ -0,0 +1,190 @@
+import type { AstroGlobalPartial } from 'astro';
+import { z } from 'astro/zod';
+
+export const HeadConfigSchema = () =>
+	z
+		.array(
+			z.object({
+				/** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
+				tag: z.enum(['title', 'base', 'link', 'style', 'meta', 'script', 'noscript', 'template']),
+				/** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
+				attrs: z.record(z.union([z.string(), z.boolean(), z.undefined()])).default({}),
+				/** Content to place inside the tag (optional). */
+				content: z.string().default(''),
+			})
+		)
+		.default([]);
+
+/**
+ * Default Head Tags for use with createHead() helper
+ *
+ * @param title
+ * @param description
+ * @param lang
+ * @param Astro
+ * @param favicon
+ * @param ogImage
+ * @param canonical
+ * @returns
+ */
+export const headDefaults = (
+	title: string,
+	description: string,
+	Astro: AstroGlobalPartial,
+	ogImage: string | undefined,
+	canonical: URL | undefined
+) => {
+	const headDefaults: z.input<ReturnType<typeof HeadConfigSchema>> = [
+		{ tag: 'meta', attrs: { charset: 'utf-8' } },
+		{
+			tag: 'meta',
+			attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+		},
+		{ tag: 'title', content: `${title}` },
+		{ tag: 'meta', attrs: { name: 'title', content: title } },
+		{ tag: 'meta', attrs: { name: 'description', content: description } },
+		{ tag: 'link', attrs: { rel: 'canonical', href: canonical?.href } },
+		{ tag: 'meta', attrs: { name: 'generator', content: Astro.generator } },
+		// Favicon
+		{
+			tag: 'link',
+			attrs: { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' },
+		},
+		{
+			tag: 'link',
+			attrs: { rel: 'icon', href: '/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
+		},
+		{
+			tag: 'link',
+			attrs: { rel: 'icon', href: '/favicon-16x16.png', type: 'image/png', sizes: '16x16' },
+		},
+		{ tag: 'link', attrs: { rel: 'icon', href: '/favicon.png', type: 'image/png' } },
+		{ tag: 'link', attrs: { rel: 'manifest', href: '/site.webmanifest' } },
+		{ tag: 'link', attrs: { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' } },
+		{ tag: 'link', attrs: { rel: 'shortcut icon', href: '/favicon.ico' } },
+		{ tag: 'meta', attrs: { name: 'msapplication-TileColor', content: '#da532c' } },
+		{ tag: 'meta', attrs: { name: 'msapplication-config', content: '/browserconfig.xml' } },
+		{ tag: 'meta', attrs: { name: 'theme-color', content: '#aa87f4' } },
+		// OpenGraph Tags
+		{ tag: 'meta', attrs: { property: 'og:title', content: title } },
+		{ tag: 'meta', attrs: { property: 'og:type', content: 'website' } },
+		{ tag: 'meta', attrs: { property: 'og:url', content: canonical?.href } },
+		{ tag: 'meta', attrs: { property: 'og:description', content: description } },
+		{ tag: 'meta', attrs: { property: 'og:site_name', content: title } },
+		// Twitter Tags
+		{
+			tag: 'meta',
+			attrs: { name: 'twitter:card', content: 'summary_large_image' },
+		},
+		{ tag: 'meta', attrs: { name: 'twitter:url', content: canonical?.href } },
+		{ tag: 'meta', attrs: { name: 'twitter:title', content: title } },
+		{ tag: 'meta', attrs: { name: 'twitter:description', content: description } },
+	];
+
+	if (ogImage) {
+		headDefaults.push(
+			{ tag: 'meta', attrs: { property: 'og:image', content: ogImage } },
+			{ tag: 'meta', attrs: { name: 'twitter:image', content: ogImage } }
+		);
+	}
+
+	return headDefaults;
+};
+
+const HeadSchema = HeadConfigSchema();
+
+export type HeadUserConfig = z.input<ReturnType<typeof HeadConfigSchema>>;
+export type HeadConfig = z.output<ReturnType<typeof HeadConfigSchema>>;
+
+/**
+ * Test if a head config object contains a matching `<title>` or `<meta>` tag.
+ *
+ * For example, will return true if `head` already contains
+ * `<meta name="description" content="A">` and the passed `tag`
+ * is `<meta name="description" content="B">`. Tests against `name`,
+ * `property`, and `http-equiv` attributes for `<meta>` tags.
+ */
+function hasTag(head: HeadConfig, entry: HeadConfig[number]): boolean {
+	switch (entry.tag) {
+		case 'title':
+			return head.some(({ tag }) => tag === 'title');
+		case 'meta':
+			return hasOneOf(head, entry, ['name', 'property', 'http-equiv']);
+		default:
+			return false;
+	}
+}
+
+/**
+ * Test if a head config object contains a tag of the same type
+ * as `entry` and a matching attribute for one of the passed `keys`.
+ */
+function hasOneOf(head: HeadConfig, entry: HeadConfig[number], keys: string[]): boolean {
+	const attr = getAttr(keys, entry);
+	if (!attr) return false;
+	const [key, val] = attr;
+	return head.some(({ tag, attrs }) => tag === entry.tag && attrs[key] === val);
+}
+
+/** Find the first matching key–value pair in a head entry’s attributes. */
+function getAttr(
+	keys: string[],
+	entry: HeadConfig[number]
+): [key: string, value: string | boolean] | undefined {
+	let attr: [string, string | boolean] | undefined;
+	for (const key of keys) {
+		const val = entry.attrs[key];
+		if (val) {
+			attr = [key, val];
+			break;
+		}
+	}
+	return attr;
+}
+
+/** Merge two heads, overwriting entries in the first head that exist in the second. */
+function mergeHead(oldHead: HeadConfig, newHead: HeadConfig) {
+	return [...oldHead.filter((tag) => !hasTag(newHead, tag)), ...newHead];
+}
+
+/** Sort head tags to place important tags first and relegate “SEO” meta tags. */
+function sortHead(head: HeadConfig) {
+	return head.sort((a, b) => {
+		const aImportance = getImportance(a);
+		const bImportance = getImportance(b);
+		return aImportance > bImportance ? -1 : bImportance > aImportance ? 1 : 0;
+	});
+}
+
+/** Get the relative importance of a specific head tag. */
+function getImportance(entry: HeadConfig[number]) {
+	// 1. Important meta tags.
+	if (
+		entry.tag === 'meta' &&
+		('charset' in entry.attrs || 'http-equiv' in entry.attrs || entry.attrs.name === 'viewport')
+	) {
+		return 100;
+	}
+	// 2. Page title
+	if (entry.tag === 'title') return 90;
+	// 3. Anything that isn’t an SEO meta tag.
+	if (entry.tag !== 'meta') {
+		// The default favicon should be below any extra icons that the user may have set
+		// because if several icons are equally appropriate, the last one is used and we
+		// want to use the SVG icon when supported.
+		if (entry.tag === 'link' && 'rel' in entry.attrs && entry.attrs.rel === 'shortcut icon') {
+			return 70;
+		}
+		return 80;
+	}
+	// 4. SEO meta tags.
+	return 0;
+}
+/** Create a fully parsed, merged, and sorted head entry array from multiple sources. */
+export function createHead(defaultHeaders: HeadUserConfig, ...heads: HeadConfig[]) {
+	let head = HeadSchema.parse(defaultHeaders);
+	for (const next of heads) {
+		head = mergeHead(head, next);
+	}
+	return sortHead(head);
+}
diff --git a/packages/studiocms_ui/src/utils/iconStrings.ts b/packages/studiocms_ui/src/utils/iconStrings.ts
new file mode 100644
index 000000000..964aa6098
--- /dev/null
+++ b/packages/studiocms_ui/src/utils/iconStrings.ts
@@ -0,0 +1,29 @@
+type ValidIconString =
+	| 'check-circle'
+	| 'exclamation-triangle'
+	| 'exclamation-circle'
+	| 'information-circle'
+	| 'x-mark';
+
+const iconStrings: Record<ValidIconString, string> = {
+	'check-circle':
+		'<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>',
+	'exclamation-circle':
+		'<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>',
+	'information-circle':
+		'<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>',
+	'x-mark':
+		'<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%"  fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>',
+	'exclamation-triangle':
+		'<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>',
+};
+
+function getIconString(icon: ValidIconString, classes: string, width: number, height: number) {
+	return iconStrings[icon]
+		.replace('%class%', classes)
+		.replace('%width%', width.toString())
+		.replace('%height%', height.toString());
+}
+
+export { getIconString };
+export type { ValidIconString };
diff --git a/packages/studiocms_ui/tsconfig.json b/packages/studiocms_ui/tsconfig.json
new file mode 100644
index 000000000..5713c40de
--- /dev/null
+++ b/packages/studiocms_ui/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "extends": "astro/tsconfigs/strictest",
+  "files": [],
+  "compilerOptions": {
+    "outDir": "../../.moon/cache/types/packages/studiocms_ui",
+    "composite": true,
+    "noEmit": false,
+    "allowImportingTsExtensions": false,
+    "emitDeclarationOnly": false,
+    "paths": {
+      "ui-playground/*": ["../../playgrounds/ui/src/*"]
+    }
+  },
+  "references": [
+    {
+      "path": "../../playgrounds/ui"
+    }
+  ],
+  "include": [
+    "./package.json",
+    "../../playgrounds/ui/**/*",
+    "../../playgrounds/ui/.astro/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ],
+  "exclude": ["../../playgrounds/ui/dist/**"]
+}
diff --git a/playgrounds/ui/.gitignore b/playgrounds/ui/.gitignore
new file mode 100644
index 000000000..0d10748f9
--- /dev/null
+++ b/playgrounds/ui/.gitignore
@@ -0,0 +1,26 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+#VERCEL IS ANNOYING
+.vercel/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+.npmrc
\ No newline at end of file
diff --git a/playgrounds/ui/.vscode/extensions.json b/playgrounds/ui/.vscode/extensions.json
new file mode 100644
index 000000000..22a15055d
--- /dev/null
+++ b/playgrounds/ui/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
diff --git a/playgrounds/ui/.vscode/launch.json b/playgrounds/ui/.vscode/launch.json
new file mode 100644
index 000000000..d64220976
--- /dev/null
+++ b/playgrounds/ui/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
diff --git a/playgrounds/ui/README.md b/playgrounds/ui/README.md
new file mode 100644
index 000000000..1675d6167
--- /dev/null
+++ b/playgrounds/ui/README.md
@@ -0,0 +1,16 @@
+# Playground: Dev Environment
+
+This is the Dev testing environment and playground for the UI library.
+
+## This is a [Moonrepo](https://moonrepo.dev)
+
+Follow install instructions listed on Moonrepo's docs, and you'll be all set to go! Its even a super easy single line command you put in your terminal!
+
+To use the dev server the command is:
+
+**Moon**: `moon run ui-playground:dev`
+**pnpm**: `pnpm ui:dev`
+
+## Quick note about `src/ideas/*`
+In here are code snippets saved while discussing the implementation of certain functionality for the dashboard redesign. See
+[#294](https://github.com/astrolicious/studiocms/discussions/294).
\ No newline at end of file
diff --git a/playgrounds/ui/astro.config.mts b/playgrounds/ui/astro.config.mts
new file mode 100644
index 000000000..6397b7bdd
--- /dev/null
+++ b/playgrounds/ui/astro.config.mts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	site: 'https://ui-testing.studiocms.xyz',
+	output: 'static',
+});
diff --git a/playgrounds/ui/moon.yml b/playgrounds/ui/moon.yml
new file mode 100644
index 000000000..f5bb3231c
--- /dev/null
+++ b/playgrounds/ui/moon.yml
@@ -0,0 +1,30 @@
+tags: ['astro']
+
+toolchain:
+  typescript:
+    syncProjectReferences: false
+
+dependsOn:
+- studiocms_ui
+tasks:
+  astro:
+    command: astro
+    platform: node
+  dev:
+    command: 
+      - astro 
+      - dev
+    local: true
+    platform: node
+  start:
+    command: 
+      - astro 
+      - dev
+    local: true
+    platform: node
+  build:
+    command: 
+      - astro 
+      - build
+    local: true
+    platform: node
diff --git a/playgrounds/ui/package.json b/playgrounds/ui/package.json
new file mode 100644
index 000000000..a7001b658
--- /dev/null
+++ b/playgrounds/ui/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ui-playground",
+  "type": "module",
+  "version": "0.1.0-beta.6",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "typescript": "catalog:"
+  },
+  "dependencies": {
+    "@astrojs/node": "catalog:",
+    "astro": "catalog:",
+    "@studiocms/ui": "workspace:*",
+    "@fontsource-variable/onest": "5.1.0"
+  }
+}
diff --git a/playgrounds/ui/public/favicon.svg b/playgrounds/ui/public/favicon.svg
new file mode 100644
index 000000000..b83c7a83d
--- /dev/null
+++ b/playgrounds/ui/public/favicon.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       style="stroke:#fefefe;fill:#010101;stroke-width:1.50531;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.1;paint-order:stroke fill markers"
+       id="rect1"
+       width="17.419359"
+       height="17.419359"
+       x="1.5319526"
+       y="13.473811"
+       d="M 2.5319526,13.473811 H 17.951312 a 1,1 45 0 1 1,1 V 29.89317 a 1,1 135 0 1 -1,1 H 2.5319526 a 1,1 45 0 1 -1,-1 V 14.473811 a 1,1 135 0 1 1,-1 z" />
+    <path
+       style="stroke:#fefefe;fill:#010101;stroke-width:1.50531;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.1;paint-order:stroke fill markers"
+       id="rect2"
+       width="17.419359"
+       height="17.419359"
+       x="7.9729509"
+       y="7.4298182"
+       d="M 8.9729509,7.4298182 H 24.39231 a 1,1 45 0 1 1,1 l 0,15.4193588 a 1,1 135 0 1 -1,1 H 8.9729509 a 1,1 45 0 1 -1,-1 V 8.4298182 a 1,1 135 0 1 1,-1 z"
+       transform="translate(-0.93583643,0.02452421)" />
+    <path
+       style="stroke:#fefefe;fill:#010101;stroke-width:1.50531;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.1;paint-order:stroke fill markers"
+       id="rect3"
+       width="17.419359"
+       height="17.419359"
+       x="12.542276"
+       y="-18.854233"
+       transform="scale(1,-1)"
+       d="m 13.542276,-18.854233 h 15.41936 a 1,1 45 0 1 1,1 v 15.4193594 a 1,1 135 0 1 -1,1 h -15.41936 a 1,1 45 0 1 -1,-1 V -17.854233 a 1,1 135 0 1 1,-1 z" />
+  </g>
+</svg>
diff --git a/playgrounds/ui/public/studiocms.svg b/playgrounds/ui/public/studiocms.svg
new file mode 100644
index 000000000..cdd9a4d91
--- /dev/null
+++ b/playgrounds/ui/public/studiocms.svg
@@ -0,0 +1,5 @@
+<svg width="755" height="792" viewBox="0 0 755 792" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="295" width="460" height="466" rx="32" fill="white"/>
+  <path d="M272 434V166H180C162.327 166 148 180.327 148 198V597C148 614.673 162.327 629 180 629H577.5C595.173 629 609.5 614.673 609.5 597V490H328C297.072 490 272 464.928 272 434Z" fill="white"/>
+  <path d="M124 597V329H32C14.3269 329 0 343.327 0 361V760C0 777.673 14.3269 792 32 792H429.5C447.173 792 461.5 777.673 461.5 760V653H180C149.072 653 124 627.928 124 597Z" fill="white"/>
+</svg>
diff --git a/playgrounds/ui/src/components/ButtonTests.astro b/playgrounds/ui/src/components/ButtonTests.astro
new file mode 100644
index 000000000..f44ae38d0
--- /dev/null
+++ b/playgrounds/ui/src/components/ButtonTests.astro
@@ -0,0 +1,225 @@
+---
+import { Button, Row } from '@studiocms/ui/components';
+---
+
+<h2>Sizes</h2>
+<Row>
+  <Button 
+    size='sm'
+  >
+    <span>Small</span>
+  </Button>
+  <Button 
+    size='md'
+  >
+    <span>Medium (Default)</span>
+  </Button>
+  <Button 
+    size='lg'
+  >
+    <span>Large</span>
+  </Button>
+</Row>
+<h2>Colors</h2>
+<Row>
+  <Button
+    color='default'
+  >
+    <span>Default</span>
+  </Button>
+  <Button
+    color='primary'
+  >
+    <span>Primary</span>
+  </Button>
+  <Button
+    color='success'
+  >
+    <span>Success</span>
+  </Button>
+  <Button
+    color='warning'
+  >
+    <span>Warning</span>
+  </Button>
+  <Button 
+    color='danger'
+  >
+    <span>Danger</span>
+  </Button>
+</Row>
+<h2>Outlined</h2>
+<Row>
+  <Button
+    color='default'
+    variant='outlined'
+  >
+    <span>Default</span>
+  </Button>
+  <Button
+    color='primary'
+    variant='outlined'
+  >
+    <span>Primary</span>
+  </Button>
+  <Button
+    color='success'
+    variant='outlined'
+  >
+    <span>Success</span>
+  </Button>
+  <Button
+    color='warning'
+    variant='outlined'
+  >
+    <span>Warning</span>
+  </Button>
+  <Button 
+    color='danger'
+    variant='outlined'
+  >
+    <span>Danger</span>
+  </Button>
+</Row>
+<h2>Flat</h2>
+<Row>
+  <Button
+    color='default'
+    variant='flat'
+  >
+    <span>Default</span>
+  </Button>
+  <Button
+    color='primary'
+    variant='flat'
+  >
+    <span>Primary</span>
+  </Button>
+  <Button
+    color='success'
+    variant='flat'
+  >
+    <span>Success</span>
+  </Button>
+  <Button
+    color='warning'
+    variant='flat'
+  >
+    <span>Warning</span>
+  </Button>
+  <Button 
+    color='danger'
+    variant='flat'
+  >
+    <span>Danger</span>
+  </Button>
+</Row>
+<h2>Disabled (Solid)</h2>
+<Row>
+  <Button
+    color='default'
+    disabled
+  >
+    <span>Default</span>
+  </Button>
+  <Button
+    color='primary'
+    disabled
+  >
+    <span>Primary</span>
+  </Button>
+  <Button
+    color='success'
+    disabled
+  >
+    <span>Success</span>
+  </Button>
+  <Button
+    color='warning'
+    disabled
+  >
+    <span>Warning</span>
+  </Button>
+  <Button 
+    color='danger'
+    disabled
+  >
+    <span>Danger</span>
+  </Button>
+</Row>
+<h2>Disabled (Outlined)</h2>
+<Row>
+  <Button
+    color='default'
+    variant='outlined'
+    disabled
+  >
+    <span>Default</span>
+  </Button>
+  <Button
+    color='primary'
+    variant='outlined'
+    disabled
+  >
+    <span>Primary</span>
+  </Button>
+  <Button
+    color='success'
+    variant='outlined'
+    disabled
+  >
+    <span>Success</span>
+  </Button>
+  <Button
+    color='warning'
+    variant='outlined'
+    disabled
+  >
+    <span>Warning</span>
+  </Button>
+  <Button 
+    color='danger'
+    variant='outlined'
+    disabled
+  >
+    <span>Danger</span>
+  </Button>
+</Row>
+<h2>Disabled (Flat)</h2>
+<Row>
+  <Button
+    color='default'
+    variant='flat'
+    disabled
+  >
+    <span>Default</span>
+  </Button>
+  <Button
+    color='primary'
+    variant='flat'
+    disabled
+  >
+    <span>Primary</span>
+  </Button>
+  <Button
+    color='success'
+    variant='flat'
+    disabled
+  >
+    <span>Success</span>
+  </Button>
+  <Button
+    color='warning'
+    variant='flat'
+    disabled
+  >
+    <span>Warning</span>
+  </Button>
+  <Button 
+    color='danger'
+    variant='flat'
+    disabled
+  >
+    <span>Danger</span>
+  </Button>
+</Row>
\ No newline at end of file
diff --git a/playgrounds/ui/src/components/CardTests.astro b/playgrounds/ui/src/components/CardTests.astro
new file mode 100644
index 000000000..14460a999
--- /dev/null
+++ b/playgrounds/ui/src/components/CardTests.astro
@@ -0,0 +1,29 @@
+---
+import { Card, Row } from '@studiocms/ui/components';
+---
+<Row>
+  <Card>
+    <span slot="header">
+      <h2>Header</h2>
+    </span>
+    <span>Card with Header & Footer</span>
+    <span slot="footer">©️ 2024 StudioCMS</span>
+  </Card>
+  <Card fullHeight>
+    <span slot="header">
+      <h2>Header</h2>
+    </span>
+    <span>Card with Header & no Footer</span>
+  </Card>
+  <Card>
+    <span>Card with Footer & no Header</span>
+    <span slot="footer">©️ 2024 StudioCMS</span>
+  </Card>
+</Row>
+<Card class='mt' fullWidth>
+  <span slot="header">
+    <h2>Header</h2>
+  </span>
+  <span>Full-size Card</span>
+  <span slot="footer">©️ 2024 StudioCMS</span>
+</Card>
\ No newline at end of file
diff --git a/playgrounds/ui/src/components/CheckboxTests.astro b/playgrounds/ui/src/components/CheckboxTests.astro
new file mode 100644
index 000000000..a9510d004
--- /dev/null
+++ b/playgrounds/ui/src/components/CheckboxTests.astro
@@ -0,0 +1,77 @@
+---
+import { Checkbox, Row } from '@studiocms/ui/components';
+---
+<h2>Sizes</h2>
+<Row alignCenter>
+  <Checkbox
+    label='Small & Checked by default'
+    defaultChecked
+    size='sm'
+  />
+  <Checkbox
+    label='Normal & Required'
+    isRequired
+  />
+  <Checkbox
+    label='Large'
+    size='lg'
+  />
+</Row>
+<h2>Colors</h2>
+<Row alignCenter>
+  <Checkbox
+    label='Default'
+  />
+  <Checkbox
+    label='Primary'
+    color='primary'
+  />
+  <Checkbox
+    label='Success'
+    color='success'
+  />
+  <Checkbox
+    label='Warning'
+    color='warning'
+  />
+  <Checkbox
+    label='Danger'
+    color='danger'
+  />
+</Row>
+<h2>Disabled</h2>
+<Row alignCenter>
+  <Checkbox
+    label='Unchecked'
+    disabled
+  />
+  <Checkbox
+    label='Default'
+    disabled
+    defaultChecked
+  />
+  <Checkbox
+    label='Primary'
+    color='primary'
+    disabled
+    defaultChecked
+  />
+  <Checkbox
+    label='Success'
+    color='success'
+    disabled
+    defaultChecked
+  />
+  <Checkbox
+    label='Warning'
+    color='warning'
+    disabled
+    defaultChecked
+  />
+  <Checkbox
+    label='Danger'
+    color='danger'
+    disabled
+    defaultChecked
+  />
+</Row>
\ No newline at end of file
diff --git a/playgrounds/ui/src/components/DropdownTests.astro b/playgrounds/ui/src/components/DropdownTests.astro
new file mode 100644
index 000000000..3da625640
--- /dev/null
+++ b/playgrounds/ui/src/components/DropdownTests.astro
@@ -0,0 +1,116 @@
+---
+import { Button, Dropdown, Row } from '@studiocms/ui/components';
+---
+<Row>
+  <Dropdown
+    options={[
+      { label: 'Option 1', value: 'opt-1' },
+      { label: 'Option 2', value: 'opt-2' },
+    ]}
+    id="dropdown-1"
+    align='start'
+  >
+    <Button color='primary'>
+      Dropdown (left)
+    </Button>
+  </Dropdown>
+  <Dropdown
+    options={[
+      { label: 'Option 1', value: 'opt-1' },
+      { label: 'Option 2 (Disabled)', value: 'opt-2', disabled: true },
+    ]}
+    id="dropdown-2"
+    align='center'
+  >
+    <Button color='primary'>
+      Dropdown (center, 1 disabled)
+    </Button>
+  </Dropdown>
+  <Dropdown
+    options={[
+      { label: 'Option 1', value: 'opt-1' },
+      { label: 'Option 2 (Icon start)', value: 'opt-2-icon', icon: 'user', iconPosition: 'start' },
+      { label: 'Option 2 (Icon end)', value: 'opt-3-icon', icon: 'user', iconPosition: 'end' },
+    ]}
+    id="dropdown-3"
+    align='end'
+  >
+    <Button color='primary'>
+      Dropdown (right, icon)
+    </Button>
+  </Dropdown>
+  <Dropdown
+    options={[
+      { label: 'Default', value: 'default', color: 'default' },
+      { label: 'Primary', value: 'primary', color: 'primary' },
+      { label: 'Success', value: 'success', color: 'success' },
+      { label: 'Warning', value: 'warning', color: 'warning' },
+      { label: 'Danger', value: 'danger', color: 'danger' },
+    ]}
+    id="dropdown-4"
+    align='center'
+  >
+    <Button color='primary'>
+      Dropdown (colored)
+    </Button>
+  </Dropdown>
+  <Dropdown
+    options={[
+      { label: 'Default', value: 'default', color: 'default' },
+      { label: 'Primary', value: 'primary', color: 'primary' },
+    ]}
+    id="dropdown-5"
+    align='center'
+    triggerOn='right'
+  >
+    <Button color='primary'>
+      Dropdown (right click)
+    </Button>
+  </Dropdown>
+  <Dropdown
+    options={[
+      { label: 'Default', value: 'default', color: 'default' },
+      { label: 'Primary', value: 'primary', color: 'primary' },
+    ]}
+    id="dropdown-6"
+    align='center'
+    triggerOn='both'
+  >
+    <Button color='primary'>
+      Dropdown (right & left click)
+    </Button>
+  </Dropdown>
+</Row>
+<script>
+  import { DropdownHelper } from "@studiocms/ui/components";
+
+  const dropdown1 = new DropdownHelper('dropdown-1');
+  dropdown1.registerClickCallback((value) => {
+    console.log(value);
+  });
+
+  const dropdown2 = new DropdownHelper('dropdown-2');
+  dropdown2.registerClickCallback((value) => {
+    console.log(value);
+  });
+
+  const dropdown3 = new DropdownHelper('dropdown-3');
+  dropdown3.registerClickCallback((value) => {
+    console.log(value);
+  });
+
+  const dropdown4 = new DropdownHelper('dropdown-4');
+  dropdown4.registerClickCallback((value) => {
+    console.log(value);
+  });
+
+  const dropdown5 = new DropdownHelper('dropdown-5');
+  dropdown5.registerClickCallback((value) => {
+    console.log(value);
+  });
+
+  const dropdown6 = new DropdownHelper('dropdown-6');
+  dropdown6.registerClickCallback((value) => {
+    console.log(value);
+  });
+</script>
\ No newline at end of file
diff --git a/playgrounds/ui/src/components/ModalTests.astro b/playgrounds/ui/src/components/ModalTests.astro
new file mode 100644
index 000000000..163ce1731
--- /dev/null
+++ b/playgrounds/ui/src/components/ModalTests.astro
@@ -0,0 +1,70 @@
+---
+import { Button, Input, Modal, Row, Select } from '@studiocms/ui/components';
+---
+<Modal id="modal-1" buttons={['confirm', 'cancel']}>
+  <h2 slot="header">Medium Modal, both Buttons</h2>
+  <span>
+    Lorem ipsum dolor sit amet. Aut temporibus assumenda est tenetur animi non sunt architecto nam voluptatum nostrum ut possimus amet. 
+    Id facilis odio aut voluptatem asperiores qui suscipit blanditiis eum assumenda reprehenderit id ipsum facere! Ea natus rerum qui unde 
+    porro ut voluptatem maxime in dolor fuga.
+  </span>
+</Modal>
+<Modal size="sm" id="modal-2">
+  <h2 slot="header">Small Modal, no Buttons</h2>
+  <span>
+    Lorem ipsum dolor sit amet. Aut temporibus assumenda est tenetur animi non sunt architecto nam voluptatum nostrum ut possimus amet. 
+    Id facilis odio aut voluptatem asperiores qui suscipit blanditiis eum assumenda reprehenderit id ipsum facere! Ea natus rerum qui unde 
+    porro ut voluptatem maxime in dolor fuga.
+  </span>
+</Modal>
+<Modal size="lg" id="modal-3" buttons={['confirm']} dismissable={false}>
+  <h2 slot="header">Large, non-dismissable, 1 Button</h2>
+  <span>
+    Lorem ipsum dolor sit amet. Aut temporibus assumenda est tenetur animi non sunt architecto nam voluptatum nostrum ut possimus amet. 
+    Id facilis odio aut voluptatem asperiores qui suscipit blanditiis eum assumenda reprehenderit id ipsum facere! Ea natus rerum qui unde 
+    porro ut voluptatem maxime in dolor fuga.
+  </span>
+</Modal>
+<Modal id="modal-4" buttons={['confirm','cancel']} isForm>
+  <h2 slot="header">Feedback</h2>
+  <div slot="default">
+    <Input label="Input" type="text" name="text-input" />
+    <Select
+      fullWidth
+      options={[
+        { label: "Dog", value: 'dog' },
+        { label: "Cat", value: 'cat' },
+        { label: "Tortoise", value: 'tortoise' },
+      ]}
+      label='Favorite Animal?'
+      class="mt"
+    />
+  </div>
+</Modal>
+
+<Row>
+  <Button id={'modal-trigger-1'}>Medium Modal, both Buttons</Button>
+  <Button id={'modal-trigger-2'}>Small, 1 Button</Button>
+  <Button id={'modal-trigger-3'}>Large, one Button, non-dismissable</Button>
+  <Button id={'modal-trigger-4'}>Form Modal (Output in console)</Button>
+</Row>
+<script>
+  import { ModalHelper } from "@studiocms/ui/components";
+
+  const modal1 = new ModalHelper('modal-1');
+  modal1.bindTrigger('modal-trigger-1');
+
+  const modal2 = new ModalHelper('modal-2');
+  modal2.bindTrigger('modal-trigger-2');
+
+  const modal3 = new ModalHelper('modal-3');
+  modal3.bindTrigger('modal-trigger-3');
+
+  const modal4 = new ModalHelper('modal-4');
+  modal4.bindTrigger('modal-trigger-4');
+  modal4.registerConfirmCallback((formData) => {
+    for (const [key, value] of formData!.entries()) { 
+      console.log(key, value);
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/playgrounds/ui/src/components/RadioGroupTests.astro b/playgrounds/ui/src/components/RadioGroupTests.astro
new file mode 100644
index 000000000..fa84211b5
--- /dev/null
+++ b/playgrounds/ui/src/components/RadioGroupTests.astro
@@ -0,0 +1,77 @@
+---
+import { RadioGroup, Row } from '@studiocms/ui/components';
+---
+<RadioGroup
+  label="Normal & default checked"
+  options={[
+    { label: "Option 1", value: "opt-1" },
+    { label: "Option 2", value: "opt-2" },
+    { label: "Option 3", value: "opt-3" }
+  ]}
+  defaultValue='opt-1'
+/>
+<div class="mt">
+<Row gapSize='lg'>
+  <RadioGroup
+    label="Horizontal"
+    horizontal
+    options={[
+      { label: "Option 1", value: "opt-1-h" },
+      { label: "Option 2", value: "opt-2-h" },
+      { label: "Option 3", value: "opt-3-h" }
+    ]}
+  />
+  <RadioGroup
+    label="Horizontal & disabled"
+    horizontal
+    options={[
+      { label: "Option 1", value: "opt-1-h2" },
+      { label: "Option 2", value: "opt-2-h2" },
+      { label: "Option 3", value: "opt-3-h2" }
+    ]}
+    disabled
+  />
+</Row>
+</div>
+<h2>Colors</h2>
+<Row gapSize='lg'>
+<RadioGroup
+  label="Default"
+  options={[
+    { label: "Option 1", value: "opt-1-d" },
+  ]}
+  defaultValue='opt-1-d'
+/>
+<RadioGroup
+  label="Primary"
+  options={[
+    { label: "Option 1", value: "opt-1-p" },
+  ]}
+  color='primary'
+  defaultValue='opt-1-p'
+/>
+<RadioGroup
+  label="Success"
+  options={[
+    { label: "Option 1", value: "opt-1-s" },
+  ]}
+  color='success'
+  defaultValue='opt-1-s'
+/>
+<RadioGroup
+  label="Warning"
+  options={[
+    { label: "Option 1", value: "opt-1-w" },
+  ]}
+  color='warning'
+  defaultValue='opt-1-w'
+/>
+<RadioGroup
+  label="Danger"
+  options={[
+    { label: "Option 1", value: "opt-1-da" },
+  ]}
+  color='danger'
+  defaultValue='opt-1-da'
+/>
+</Row>
\ No newline at end of file
diff --git a/playgrounds/ui/src/components/SelectTests.astro b/playgrounds/ui/src/components/SelectTests.astro
new file mode 100644
index 000000000..c178ddad9
--- /dev/null
+++ b/playgrounds/ui/src/components/SelectTests.astro
@@ -0,0 +1,50 @@
+---
+import { Row, Select } from '@studiocms/ui/components';
+---
+<Row>
+  <Select
+    label='Required Select'
+    options={[
+      { label: "Option 1", value: "opt-1-1" },
+      { label: "Option 2", value: "opt-2-1" },
+      { label: "Option 3", value: "opt-3-1" },
+    ]}
+    isRequired
+  />
+  <Select
+    label='Select with default value'
+    options={[
+      { label: "Option 1", value: "opt-1-2" },
+      { label: "Option 2", value: "opt-2-2" },
+      { label: "Option 3", value: "opt-3-2" },
+    ]}
+    defaultValue='opt-1-2'
+  />
+  <Select
+    label='Select with disabled options'
+    options={[
+      { label: "Option 1", value: "opt-1-3" },
+      { label: "Option 2", value: "opt-2-3", disabled: true },
+      { label: "Option 3", value: "opt-3-3", disabled: true },
+    ]}
+  />
+  <Select
+    label='Disabled Select'
+    options={[
+      { label: "Option 1", value: "opt-1-4" },
+      { label: "Option 2", value: "opt-2-4" },
+      { label: "Option 3", value: "opt-3-4" },
+    ]}
+    disabled
+  />
+</Row>
+<Select
+  class='mt'
+  label='Full width select'
+  options={[
+    { label: "Option 1", value: "opt-1-5" },
+    { label: "Option 2", value: "opt-2-5" },
+    { label: "Option 3", value: "opt-3-5" },
+  ]}
+  fullWidth
+/>
\ No newline at end of file
diff --git a/playgrounds/ui/src/components/ToastTests.astro b/playgrounds/ui/src/components/ToastTests.astro
new file mode 100644
index 000000000..981de80e7
--- /dev/null
+++ b/playgrounds/ui/src/components/ToastTests.astro
@@ -0,0 +1,66 @@
+---
+import { Button, Row, Toaster } from '@studiocms/ui/components';
+---
+<Toaster position='top-center' />
+<Row>
+  <Button variant='outlined' color='primary' id="trigger-toast-info">Info</Button>
+  <Button variant='outlined' color='success' id="trigger-toast-success">Success</Button>
+  <Button variant='outlined' color='warning' id="trigger-toast-warning">Warning</Button>
+  <Button variant='outlined' color='danger' id="trigger-toast-danger">Danger</Button>
+  <Button variant='outlined' color='primary' id="trigger-toast-duration">Custom Duration</Button>
+  <Button variant='outlined' color='primary' id="trigger-toast-persistent">Persistent</Button>
+</Row>
+<script>
+  import { toast } from '@studiocms/ui/components';
+
+  document.getElementById('trigger-toast-info')!.addEventListener('click', () => {
+    toast({
+      title: "Toast Title",
+      description: "Toast Desc",
+      type: 'info',
+    });
+  });
+
+  document.getElementById('trigger-toast-success')!.addEventListener('click', () => {
+    toast({
+      title: "Toast Title",
+      description: "Toast Desc",
+      type: 'success',
+    });
+  });
+
+  document.getElementById('trigger-toast-warning')!.addEventListener('click', () => {
+    toast({
+      title: "Toast Title",
+      description: "Toast Desc",
+      type: 'warning',
+    });
+  });
+
+  document.getElementById('trigger-toast-danger')!.addEventListener('click', () => {
+    toast({
+      title: "Toast Title",
+      description: "Toast Desc",
+      type: 'danger',
+    });
+  });
+
+  document.getElementById('trigger-toast-duration')!.addEventListener('click', () => {
+    toast({
+      title: "Toast Title",
+      description: "Toast Desc",
+      type: 'info',
+      duration: 10000,
+    });
+  });
+
+  document.getElementById('trigger-toast-persistent')!.addEventListener('click', () => {
+    toast({
+      title: "Toast Title",
+      description: "Toast Desc",
+      type: 'info',
+      persistent: true,
+      closeButton: true
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/playgrounds/ui/src/components/ToggleTests.astro b/playgrounds/ui/src/components/ToggleTests.astro
new file mode 100644
index 000000000..b059a9590
--- /dev/null
+++ b/playgrounds/ui/src/components/ToggleTests.astro
@@ -0,0 +1,77 @@
+---
+import { Row, Toggle } from '@studiocms/ui/components';
+---
+<h2>Sizes</h2>
+<Row alignCenter>
+  <Toggle
+    label='Small & Checked by default'
+    defaultChecked
+    size='sm'
+  />
+  <Toggle
+    label='Normal & Required'
+    isRequired
+  />
+  <Toggle
+    label='Large'
+    size='lg'
+  />
+</Row>
+<h2>Colors</h2>
+<Row alignCenter>
+  <Toggle
+    label='Default'
+  />
+  <Toggle
+    label='Primary'
+    color='primary'
+  />
+  <Toggle
+    label='Success'
+    color='success'
+  />
+  <Toggle
+    label='Warning'
+    color='warning'
+  />
+  <Toggle
+    label='Danger'
+    color='danger'
+  />
+</Row>
+<h2>Disabled</h2>
+<Row alignCenter>
+  <Toggle
+    label='Unchecked'
+    disabled
+  />
+  <Toggle
+    label='Default'
+    disabled
+    defaultChecked
+  />
+  <Toggle
+    label='Primary'
+    color='primary'
+    disabled
+    defaultChecked
+  />
+  <Toggle
+    label='Success'
+    color='success'
+    disabled
+    defaultChecked
+  />
+  <Toggle
+    label='Warning'
+    color='warning'
+    disabled
+    defaultChecked
+  />
+  <Toggle
+    label='Danger'
+    color='danger'
+    disabled
+    defaultChecked
+  />
+</Row>
\ No newline at end of file
diff --git a/playgrounds/ui/src/env.d.ts b/playgrounds/ui/src/env.d.ts
new file mode 100644
index 000000000..22d46df65
--- /dev/null
+++ b/playgrounds/ui/src/env.d.ts
@@ -0,0 +1,4 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
+/// <reference types="../.astro/@studiocms/blog.d.ts" />
+/// <reference types="../.astro/studiocms-blog.d.ts" />
diff --git a/playgrounds/ui/src/icons/ArrowLeft.astro b/playgrounds/ui/src/icons/ArrowLeft.astro
new file mode 100644
index 000000000..c9e24a75f
--- /dev/null
+++ b/playgrounds/ui/src/icons/ArrowLeft.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {height} {width} {...props}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+</svg>
diff --git a/playgrounds/ui/src/icons/Hamburger.astro b/playgrounds/ui/src/icons/Hamburger.astro
new file mode 100644
index 000000000..d27b9e798
--- /dev/null
+++ b/playgrounds/ui/src/icons/Hamburger.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {width} {height} {...props}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+</svg>
diff --git a/playgrounds/ui/src/icons/Moon.astro b/playgrounds/ui/src/icons/Moon.astro
new file mode 100644
index 000000000..a937ef799
--- /dev/null
+++ b/playgrounds/ui/src/icons/Moon.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={width} height={height} {...props}>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.752 15.002A9.7 9.7 0 0 1 18 15.75A9.75 9.75 0 0 1 8.25 6c0-1.33.266-2.597.748-3.752A9.75 9.75 0 0 0 3 11.25A9.75 9.75 0 0 0 12.75 21a9.75 9.75 0 0 0 9.002-5.998" />
+</svg>
\ No newline at end of file
diff --git a/playgrounds/ui/src/icons/Sun.astro b/playgrounds/ui/src/icons/Sun.astro
new file mode 100644
index 000000000..bb17d6b80
--- /dev/null
+++ b/playgrounds/ui/src/icons/Sun.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" {...props}>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0a3.75 3.75 0 0 1 7.5 0" />
+</svg>
\ No newline at end of file
diff --git a/playgrounds/ui/src/ideas/folder-system-client-side.ts b/playgrounds/ui/src/ideas/folder-system-client-side.ts
new file mode 100644
index 000000000..120f9c34a
--- /dev/null
+++ b/playgrounds/ui/src/ideas/folder-system-client-side.ts
@@ -0,0 +1,24 @@
+const folders: string[] = [];
+
+const array: string[] = [
+	'2024/24/slug',
+	'2024/26/slug',
+	'2023/11/slug',
+	'2024/12/slug',
+	'2022/13/slug',
+	'2023/14/slug',
+];
+
+for (let i = 0; i < array.length; i++) {
+	const item = array[i];
+
+	if (!item) continue;
+
+	const firstItemFolder = item.split('/')[0];
+
+	if (firstItemFolder && !folders.find((x) => x === firstItemFolder)) {
+		folders.push(firstItemFolder);
+	}
+}
+
+console.log(folders);
diff --git a/playgrounds/ui/src/layouts/DoubleSidebarLayout.astro b/playgrounds/ui/src/layouts/DoubleSidebarLayout.astro
new file mode 100644
index 000000000..8f5a5ada2
--- /dev/null
+++ b/playgrounds/ui/src/layouts/DoubleSidebarLayout.astro
@@ -0,0 +1,89 @@
+---
+import Icon from '@/utils/Icon.astro';
+import { Button, DoubleSidebar } from '@studiocms/ui/components';
+import { RootLayout, type RootLayoutProps } from '@studiocms/ui/layouts';
+
+type Props = RootLayoutProps;
+
+const { title, description, image, headers, lang = 'en', defaultTheme = 'dark' } = Astro.props;
+---
+<RootLayout 
+  {title}
+  {description}
+  {image}
+  {headers}
+  {lang}
+  {defaultTheme}
+>
+  <main class="main">
+    <DoubleSidebar>
+      <div slot="outer" class="outer">
+        <a href="/">Components</a>
+        <a href="/sidebar">Single Sidebar</a>
+        <Button variant="solid" color="primary" class="show-inner" id={'show-inner'}>
+          To Inner Sidebar
+        </Button>
+      </div>
+      <div slot="inner">
+        <Button variant="outlined" color="primary" class="nav-back" id={'nav-back'}>
+          <Icon name="arrow-left" height={24} width={24} />
+        </Button>
+        <Button variant="solid" color="primary" class="to-content" id={'to-content'}>
+          Content
+        </Button>
+      </div>
+    </DoubleSidebar>
+    <div class="content">
+      <slot />
+    </div>
+  </main>
+</RootLayout>
+<style>
+  .main {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .outer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-direction: column;
+  }
+
+  .nav-back {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    display: none;
+  }
+
+  .show-inner {
+    display: none;
+  }
+
+  @media screen and (max-width: 1200px) {
+    .nav-back {
+      display: flex;
+    }
+
+    .show-inner {
+      display: flex;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/playgrounds/ui/src/layouts/SidebarLayout.astro b/playgrounds/ui/src/layouts/SidebarLayout.astro
new file mode 100644
index 000000000..8643785b6
--- /dev/null
+++ b/playgrounds/ui/src/layouts/SidebarLayout.astro
@@ -0,0 +1,44 @@
+---
+import { Sidebar } from '@studiocms/ui/components';
+import { RootLayout, type RootLayoutProps } from '@studiocms/ui/layouts';
+
+type Props = RootLayoutProps;
+
+const { title, description, image, headers, lang = 'en', defaultTheme = 'dark' } = Astro.props;
+---
+<RootLayout 
+  {title}
+  {description}
+  {image}
+  {headers}
+  {lang}
+  {defaultTheme}
+>
+  <main class="main">
+    <Sidebar>
+      <a href="/">Components</a>
+      <a href="/double-sidebar">Double Sidebar</a>
+    </Sidebar>
+    <div class="content">
+      <slot />
+    </div>
+  </main>
+</RootLayout>
+<style>
+  .main {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: block;
+    position: relative;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+</style>
\ No newline at end of file
diff --git a/playgrounds/ui/src/pages/double-sidebar.astro b/playgrounds/ui/src/pages/double-sidebar.astro
new file mode 100644
index 000000000..f4bf7b62e
--- /dev/null
+++ b/playgrounds/ui/src/pages/double-sidebar.astro
@@ -0,0 +1,39 @@
+---
+import DoubleSidebarLayout from '@/layouts/DoubleSidebarLayout.astro';
+import Icon from '@/utils/Icon.astro';
+import { Button } from '@studiocms/ui/components';
+---
+
+<DoubleSidebarLayout
+  title="Double Sidebar"
+  description="Double Sidebar"
+>
+  <Button variant="outlined" color="primary" class="nav-toggle" id={'nav-open'}>
+    <Icon name="hamburger" height={24} width={24} />
+  </Button>
+  Site Content
+</DoubleSidebarLayout>
+<script>
+  import { DoubleSidebarHelper } from "@studiocms/ui/components";
+
+  const doubleSidebar = new DoubleSidebarHelper();
+
+  doubleSidebar.showInnerOnClick('nav-open')
+  doubleSidebar.showInnerOnClick('show-inner');
+  doubleSidebar.showOuterOnClick('nav-back');
+  doubleSidebar.hideSidebarOnClick('to-content');
+</script>
+<style>
+  .nav-toggle {
+    position: absolute !important;
+    top: 1rem !important;
+    left: 1rem !important;
+    display: none !important;
+  }
+
+  @media screen and (max-width: 840px) {
+    .nav-toggle {
+      display: flex !important;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/playgrounds/ui/src/pages/index.astro b/playgrounds/ui/src/pages/index.astro
new file mode 100644
index 000000000..620dfa6bb
--- /dev/null
+++ b/playgrounds/ui/src/pages/index.astro
@@ -0,0 +1,181 @@
+---
+import '@fontsource-variable/onest/index.css';
+import '@studiocms/ui/css/global.css';
+
+import { Button, Center, Divider, Input, Row, Textarea, User } from '@studiocms/ui/components';
+
+import CardTests from '@/components/CardTests.astro';
+import CheckboxTests from '@/components/CheckboxTests.astro';
+import DropdownTests from '@/components/DropdownTests.astro';
+import ModalTests from '@/components/ModalTests.astro';
+import RadioGroupTests from '@/components/RadioGroupTests.astro';
+import SelectTests from '@/components/SelectTests.astro';
+import ToastTests from '@/components/ToastTests.astro';
+import ToggleTests from '@/components/ToggleTests.astro';
+import Icon from '@/utils/Icon.astro';
+import ButtonTests from '../components/ButtonTests.astro';
+---
+
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Component Tests</title>
+  </head>
+  <body>
+    <Button id={'color-toggle'}>
+      <Icon name={'sun'} id={'sun-icon'} />
+      <Icon name={'moon'} id={'moon-icon'} class={'hidden'} />
+    </Button>
+    <h1>Button</h1>
+    <ButtonTests />
+    <h1>Divider</h1>
+    <Divider>
+      Divider Content
+    </Divider>
+    <h1>Input</h1>
+    <Input
+      label='Text Input'
+      type='text'
+      isRequired
+    />
+    <Input
+      label='Password Input'
+      type='password'
+    />
+    <Input
+      label='Disabled Input with default Text'
+      type='text'
+      disabled
+      defaultValue='Disabled Input Text'
+    />
+    <h1>Row</h1>
+    <Row
+      gapSize='md'
+      alignCenter
+    >
+      <Input
+        label='Row-ed Input'
+        type='text'
+      />
+      <Input
+        label='Row-ed Input 2'
+        type='text'
+      />
+    </Row>
+    <h1>Center</h1>
+    <Center>
+      Centered Stuff
+    </Center>
+    <h1>Textarea</h1>
+    <Textarea
+      label='Normal (Required)'
+      placeholder='Placeholder'
+      isRequired
+    />
+    <Textarea
+      label='Normal (With Resize)'
+      placeholder='Placeholder'
+      resize
+    />
+    <Textarea
+      label='Disabled (With default value & full size)'
+      placeholder='Placeholder'
+      fullWidth
+      defaultValue={'This is some text content, \nwith Multiline'}
+      disabled
+    />
+    <h1>Checkbox</h1>
+    <CheckboxTests />
+    <h1>Toggle</h1>
+    <ToggleTests />
+    <h1>Radio</h1>
+    <RadioGroupTests />
+    <h1>Toast</h1>
+    <ToastTests />
+    <h1>Card</h1>
+    <CardTests />
+    <h1>Modal</h1>
+    <ModalTests />
+    <h1>Select</h1>
+    <SelectTests />
+    <h1>Dropdown</h1>
+    <DropdownTests />
+    <h1>User</h1>
+    <User name="Louis Escher" description='UI/UX & Developer' avatar='https://avatars.githubusercontent.com/u/66965600?v=4' />
+    <User class="mt" name="Louis Escher" description='UI/UX & Developer' />
+    <h1>Layouts</h1>
+    <Row>
+      <Button as='a' color='primary' href="/sidebar">
+        Sidebar (Single)
+      </Button>
+      <Button as='a' color='primary' href="/double-sidebar">
+        Sidebar (Double)
+      </Button>
+    </Row>
+  </body>
+</html>
+<style is:global>
+  body {
+    margin: 1rem;
+  }
+
+  h1:not(:first-of-type) {
+    margin-top: 2rem;
+  }
+
+  .flex {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .row {
+    flex-direction: row;
+  }
+
+  .col {
+    flex-direction: row;
+  }
+
+  .align-center {
+    align-items: center;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  #color-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: fit-content;
+    position: fixed;
+    top: 2rem;
+    right: 2rem;
+    z-index: 50;
+  }
+
+  .mt {
+    margin-top: 1rem;
+  }
+</style>
+<script>
+  const toggle = document.getElementById('color-toggle')! as HTMLElement;
+  const sunIcon = document.getElementById('sun-icon')! as HTMLElement;
+  const moonIcon = document.getElementById('moon-icon')! as HTMLElement;
+
+  toggle.addEventListener('click', () => {
+    if (document.documentElement.dataset.theme === 'dark') {
+      document.documentElement.dataset.theme = 'light';
+      sunIcon.classList.add('hidden');
+      moonIcon.classList.remove('hidden');
+    } else {
+      document.documentElement.dataset.theme = 'dark';
+      moonIcon.classList.add('hidden');
+      sunIcon.classList.remove('hidden');
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/playgrounds/ui/src/pages/sidebar.astro b/playgrounds/ui/src/pages/sidebar.astro
new file mode 100644
index 000000000..95324844a
--- /dev/null
+++ b/playgrounds/ui/src/pages/sidebar.astro
@@ -0,0 +1,34 @@
+---
+import SidebarLayout from '@/layouts/SidebarLayout.astro';
+import Icon from '@/utils/Icon.astro';
+import { Button } from '@studiocms/ui/components';
+---
+
+<SidebarLayout
+  title="Single Sidebar"
+  description="Single Sidebar"
+>
+  <Button variant="outlined" color="primary" class="nav-toggle" id={'nav-toggle'}>
+    <Icon name="hamburger" height={24} width={24} />
+  </Button>
+</SidebarLayout>
+<script>
+  import { SingleSidebarHelper } from "@studiocms/ui/components";
+
+  new SingleSidebarHelper('nav-toggle');
+</script>
+<style>
+  .nav-toggle {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    display: none;
+    z-index: 40 !important;
+  }
+
+  @media screen and (max-width: 840px) {
+    .nav-toggle {
+      display: flex;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/playgrounds/ui/src/utils/Icon.astro b/playgrounds/ui/src/utils/Icon.astro
new file mode 100644
index 000000000..e2d57a724
--- /dev/null
+++ b/playgrounds/ui/src/utils/Icon.astro
@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+type AstroComponent = (_props: Record<string, any>) => any;
+
+type currentIcons = 'sun' | 'moon' | 'hamburger' | 'arrow-left';
+
+export type { currentIcons };
+
+// Map of icon names to Astro components
+const Components: Record<currentIcons, AstroComponent> = {
+	sun: (await import('@/icons/Sun.astro')).default,
+	moon: (await import('@/icons/Moon.astro')).default,
+	hamburger: (await import('@/icons/Hamburger.astro')).default,
+	'arrow-left': (await import('@/icons/ArrowLeft.astro')).default,
+};
+
+interface Props extends HTMLAttributes<'svg'> {
+	name: currentIcons;
+	width?: number;
+	height?: number;
+}
+
+const { name, width, height, ...props } = Astro.props;
+
+const Tag = Components[name];
+---
+<Tag width={width} height={height} {...props} />
\ No newline at end of file
diff --git a/playgrounds/ui/tsconfig.json b/playgrounds/ui/tsconfig.json
new file mode 100644
index 000000000..949a81e31
--- /dev/null
+++ b/playgrounds/ui/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "files": [],
+  "compilerOptions": {
+    "composite": true,
+    "allowImportingTsExtensions": true,
+    "emitDeclarationOnly": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "strict": true,
+    "outDir": "../../.moon/cache/types/playgrounds/ui",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["dist"],
+  "include": ["src/**/*", ".astro/**/*"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59ef8a1f3..4f8a399f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -288,7 +288,7 @@ importers:
         version: 0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.5.4))
       '@matthiesenxyz/unocss-preset-daisyui':
         specifier: catalog:studiocms-shared
-        version: 0.1.2(daisyui@4.12.10(postcss@8.4.41))(unocss@0.62.3(postcss@8.4.41)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0)))
+        version: 0.1.2(daisyui@4.12.10(postcss@8.4.47))(unocss@0.62.3(postcss@8.4.47)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0)))
       '@noble/hashes':
         specifier: catalog:studiocms-shared
         version: 1.4.0
@@ -345,7 +345,7 @@ importers:
         version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.5.4))
       daisyui:
         specifier: catalog:studiocms-shared
-        version: 4.12.10(postcss@8.4.41)
+        version: 4.12.10(postcss@8.4.47)
       lucia:
         specifier: catalog:studiocms-shared
         version: 3.2.0
@@ -384,7 +384,7 @@ importers:
         version: 1.14.1
       unocss:
         specifier: catalog:studiocms-shared
-        version: 0.62.3(postcss@8.4.41)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0))
+        version: 0.62.3(postcss@8.4.47)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0))
       unpic:
         specifier: catalog:studiocms-shared
         version: 3.18.0
@@ -780,6 +780,22 @@ importers:
         specifier: catalog:min
         version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.5.4)
 
+  packages/studiocms_ui:
+    dependencies:
+      '@fontsource-variable/onest':
+        specifier: 5.1.0
+        version: 5.1.0
+      astro:
+        specifier: catalog:min
+        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.5.4)
+    devDependencies:
+      typescript:
+        specifier: 'catalog:'
+        version: 5.5.4
+      vite:
+        specifier: 'catalog:'
+        version: 5.4.2(@types/node@22.0.0)
+
   playgrounds/node:
     dependencies:
       '@astrojs/db':
@@ -808,6 +824,28 @@ importers:
         specifier: 'catalog:'
         version: 5.5.4
 
+  playgrounds/ui:
+    dependencies:
+      '@astrojs/node':
+        specifier: 'catalog:'
+        version: 8.3.3(astro@4.15.9(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.5.4))
+      '@fontsource-variable/onest':
+        specifier: 5.1.0
+        version: 5.1.0
+      '@studiocms/ui':
+        specifier: workspace:*
+        version: link:../../packages/studiocms_ui
+      astro:
+        specifier: 'catalog:'
+        version: 4.15.9(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.5.4)
+    devDependencies:
+      '@types/node':
+        specifier: 'catalog:'
+        version: 20.14.13
+      typescript:
+        specifier: 'catalog:'
+        version: 5.5.4
+
   www/docs:
     dependencies:
       '@astrojs/check':
@@ -3156,15 +3194,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.3.6:
-    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.3.7:
     resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
     engines: {node: '>=6.0'}
@@ -3949,10 +3978,12 @@ packages:
 
   libsql@0.3.19:
     resolution: {integrity: sha512-Aj5cQ5uk/6fHdmeW0TiXK42FqUlwx7ytmMLPSaUQPin5HKKKuUPD62MAbN4OEweGBBI7q1BekoEN4gPUEL6MZA==}
+    cpu: [x64, arm64, wasm32]
     os: [darwin, linux, win32]
 
   libsql@0.4.1:
     resolution: {integrity: sha512-qZlR9Yu1zMBeLChzkE/cKfoKV3Esp9cn9Vx5Zirn4AVhDWPcjYhKwbtJcMuHehgk3mH+fJr9qW+3vesBWbQpBg==}
+    cpu: [x64, arm64, wasm32]
     os: [darwin, linux, win32]
 
   lilconfig@2.1.0:
@@ -4354,9 +4385,6 @@ packages:
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
-  ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -4558,9 +4586,6 @@ packages:
   periscopic@3.1.0:
     resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
 
-  picocolors@1.0.1:
-    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
-
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
@@ -4636,14 +4661,6 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.40:
-    resolution: {integrity: sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  postcss@8.4.41:
-    resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.4.47:
     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -4949,10 +4966,6 @@ packages:
     resolution: {integrity: sha512-TzobUYoEft/xBtb2voRPryAUIvYguG0V7Tt3de79I1WfXgCwelqVsGuZSnu3GFGRZhXR90AeEYIM+icuB/S06Q==}
     hasBin: true
 
-  source-map-js@1.2.0:
-    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
-    engines: {node: '>=0.10.0'}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -5281,9 +5294,6 @@ packages:
   vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
-  vfile@6.0.2:
-    resolution: {integrity: sha512-zND7NlS8rJYb/sPqkb13ZvbbUoExdbi4w3SfRrMq6R3FvnLQmmfpajJNITuuYm6AZ5uao9vy4BAos3EXBPf2rg==}
-
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
@@ -5800,7 +5810,7 @@ snapshots:
       unist-util-remove-position: 5.0.0
       unist-util-visit: 5.0.0
       unist-util-visit-parents: 6.0.1
-      vfile: 6.0.2
+      vfile: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -5897,9 +5907,9 @@ snapshots:
   '@astrojs/tailwind@5.1.0(astro@4.15.9(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.5.4))(tailwindcss@3.4.7)':
     dependencies:
       astro: 4.15.9(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.5.4)
-      autoprefixer: 10.4.19(postcss@8.4.40)
-      postcss: 8.4.40
-      postcss-load-config: 4.0.2(postcss@8.4.40)
+      autoprefixer: 10.4.19(postcss@8.4.47)
+      postcss: 8.4.47
+      postcss-load-config: 4.0.2(postcss@8.4.47)
       tailwindcss: 3.4.7
     transitivePeerDependencies:
       - ts-node
@@ -5907,7 +5917,7 @@ snapshots:
   '@astrojs/telemetry@3.1.0':
     dependencies:
       ci-info: 4.0.0
-      debug: 4.3.6
+      debug: 4.3.7
       dlv: 1.1.3
       dset: 3.1.3
       is-docker: 3.0.0
@@ -5928,7 +5938,7 @@ snapshots:
   '@babel/code-frame@7.24.7':
     dependencies:
       '@babel/highlight': 7.24.7
-      picocolors: 1.0.1
+      picocolors: 1.1.0
 
   '@babel/compat-data@7.25.2': {}
 
@@ -5945,7 +5955,7 @@ snapshots:
       '@babel/traverse': 7.25.4
       '@babel/types': 7.25.6
       convert-source-map: 2.0.0
-      debug: 4.3.6
+      debug: 4.3.7
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -6053,7 +6063,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       chalk: 2.4.2
       js-tokens: 4.0.0
-      picocolors: 1.0.1
+      picocolors: 1.1.0
 
   '@babel/parser@7.25.4':
     dependencies:
@@ -6138,7 +6148,7 @@ snapshots:
       '@babel/parser': 7.25.4
       '@babel/template': 7.25.0
       '@babel/types': 7.25.6
-      debug: 4.3.6
+      debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -6527,8 +6537,8 @@ snapshots:
       hast-util-to-html: 9.0.1
       hast-util-to-text: 4.0.2
       hastscript: 9.0.0
-      postcss: 8.4.41
-      postcss-nested: 6.2.0(postcss@8.4.41)
+      postcss: 8.4.47
+      postcss-nested: 6.2.0(postcss@8.4.47)
       unist-util-visit: 5.0.0
       unist-util-visit-parents: 6.0.1
 
@@ -6586,7 +6596,7 @@ snapshots:
       '@antfu/install-pkg': 0.4.0
       '@antfu/utils': 0.7.10
       '@iconify/types': 2.0.0
-      debug: 4.3.6
+      debug: 4.3.7
       kolorist: 1.8.0
       local-pkg: 0.5.0
       mlly: 1.7.1
@@ -6914,24 +6924,14 @@ snapshots:
       package-json: 10.0.1
       semver: 7.6.3
 
-  '@matthiesenxyz/unocss-preset-daisyui@0.1.2(daisyui@4.12.10(postcss@8.4.41))(unocss@0.62.3(postcss@8.4.41)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0)))':
-    dependencies:
-      autoprefixer: 10.4.19(postcss@8.4.41)
-      camelcase: 8.0.0
-      daisyui: 4.12.10(postcss@8.4.41)
-      parsel-js: 1.1.2
-      postcss: 8.4.41
-      postcss-js: 4.0.1(postcss@8.4.41)
-      unocss: 0.62.3(postcss@8.4.41)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0))
-
   '@matthiesenxyz/unocss-preset-daisyui@0.1.2(daisyui@4.12.10(postcss@8.4.47))(unocss@0.62.3(postcss@8.4.47)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0)))':
     dependencies:
-      autoprefixer: 10.4.19(postcss@8.4.41)
+      autoprefixer: 10.4.19(postcss@8.4.47)
       camelcase: 8.0.0
       daisyui: 4.12.10(postcss@8.4.47)
       parsel-js: 1.1.2
-      postcss: 8.4.41
-      postcss-js: 4.0.1(postcss@8.4.41)
+      postcss: 8.4.47
+      postcss-js: 4.0.1(postcss@8.4.47)
       unocss: 0.62.3(postcss@8.4.47)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0))
 
   '@mdx-js/mdx@3.0.1':
@@ -7491,18 +7491,6 @@ snapshots:
       gzip-size: 6.0.0
       sirv: 2.0.4
 
-  '@unocss/postcss@0.62.3(postcss@8.4.41)':
-    dependencies:
-      '@unocss/config': 0.62.3
-      '@unocss/core': 0.62.3
-      '@unocss/rule-utils': 0.62.3
-      css-tree: 2.3.1
-      magic-string: 0.30.11
-      postcss: 8.4.41
-      tinyglobby: 0.2.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@unocss/postcss@0.62.3(postcss@8.4.47)':
     dependencies:
       '@unocss/config': 0.62.3
@@ -7843,7 +7831,7 @@ snapshots:
       common-ancestor-path: 1.0.1
       cookie: 0.6.0
       cssesc: 3.0.0
-      debug: 4.3.6
+      debug: 4.3.7
       deterministic-object-hash: 2.0.2
       devalue: 5.0.0
       diff: 5.2.0
@@ -7881,8 +7869,8 @@ snapshots:
       tsconfck: 3.1.3(typescript@5.5.4)
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-      vite: 5.4.2(@types/node@20.14.13)
-      vitefu: 0.2.5(vite@5.4.2(@types/node@20.14.13))
+      vite: 5.4.7(@types/node@20.14.13)
+      vitefu: 0.2.5(vite@5.4.7(@types/node@20.14.13))
       which-pm: 3.0.0
       xxhash-wasm: 1.0.2
       yargs-parser: 21.1.1
@@ -7926,7 +7914,7 @@ snapshots:
       common-ancestor-path: 1.0.1
       cookie: 0.6.0
       cssesc: 3.0.0
-      debug: 4.3.6
+      debug: 4.3.7
       deterministic-object-hash: 2.0.2
       devalue: 5.0.0
       diff: 5.2.0
@@ -7964,8 +7952,8 @@ snapshots:
       tsconfck: 3.1.3(typescript@5.5.4)
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-      vite: 5.4.2(@types/node@22.0.0)
-      vitefu: 0.2.5(vite@5.4.2(@types/node@22.0.0))
+      vite: 5.4.7(@types/node@22.0.0)
+      vitefu: 0.2.5(vite@5.4.7(@types/node@22.0.0))
       which-pm: 3.0.0
       xxhash-wasm: 1.0.2
       yargs-parser: 21.1.1
@@ -8155,24 +8143,14 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  autoprefixer@10.4.19(postcss@8.4.40):
-    dependencies:
-      browserslist: 4.23.2
-      caniuse-lite: 1.0.30001644
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.0.1
-      postcss: 8.4.40
-      postcss-value-parser: 4.2.0
-
-  autoprefixer@10.4.19(postcss@8.4.41):
+  autoprefixer@10.4.19(postcss@8.4.47):
     dependencies:
       browserslist: 4.23.2
       caniuse-lite: 1.0.30001644
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.1
-      postcss: 8.4.41
+      picocolors: 1.1.0
+      postcss: 8.4.47
       postcss-value-parser: 4.2.0
 
   axios@1.7.5:
@@ -8420,12 +8398,12 @@ snapshots:
   css-tree@2.2.1:
     dependencies:
       mdn-data: 2.0.28
-      source-map-js: 1.2.0
+      source-map-js: 1.2.1
 
   css-tree@2.3.1:
     dependencies:
       mdn-data: 2.0.30
-      source-map-js: 1.2.0
+      source-map-js: 1.2.1
 
   css-what@6.1.0: {}
 
@@ -8441,20 +8419,11 @@ snapshots:
 
   culori@3.3.0: {}
 
-  daisyui@4.12.10(postcss@8.4.41):
-    dependencies:
-      css-selector-tokenizer: 0.8.0
-      culori: 3.3.0
-      picocolors: 1.0.1
-      postcss-js: 4.0.1(postcss@8.4.41)
-    transitivePeerDependencies:
-      - postcss
-
   daisyui@4.12.10(postcss@8.4.47):
     dependencies:
       css-selector-tokenizer: 0.8.0
       culori: 3.3.0
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       postcss-js: 4.0.1(postcss@8.4.47)
     transitivePeerDependencies:
       - postcss
@@ -8465,10 +8434,6 @@ snapshots:
     dependencies:
       ms: 2.0.0
 
-  debug@4.3.6:
-    dependencies:
-      ms: 2.1.2
-
   debug@4.3.7:
     dependencies:
       ms: 2.1.3
@@ -8716,7 +8681,7 @@ snapshots:
 
   extract-zip@2.0.1:
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
@@ -9131,7 +9096,7 @@ snapshots:
   importx@0.4.3:
     dependencies:
       bundle-require: 5.0.0(esbuild@0.23.0)
-      debug: 4.3.6
+      debug: 4.3.7
       esbuild: 0.23.0
       jiti: 2.0.0-beta.2
       jiti-v1: jiti@1.21.6
@@ -9394,7 +9359,7 @@ snapshots:
     dependencies:
       '@babel/parser': 7.25.4
       '@babel/types': 7.25.6
-      source-map-js: 1.2.0
+      source-map-js: 1.2.1
 
   markdown-extensions@2.0.0: {}
 
@@ -9906,7 +9871,7 @@ snapshots:
   micromark@4.0.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.6
+      debug: 4.3.7
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.1
@@ -9988,8 +9953,6 @@ snapshots:
 
   ms@2.0.0: {}
 
-  ms@2.1.2: {}
-
   ms@2.1.3: {}
 
   muggle-string@0.4.1: {}
@@ -10200,8 +10163,6 @@ snapshots:
       estree-walker: 3.0.3
       is-reference: 3.0.2
 
-  picocolors@1.0.1: {}
-
   picocolors@1.1.0: {}
 
   picomatch@2.3.1: {}
@@ -10226,43 +10187,28 @@ snapshots:
 
   pngjs@7.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.40):
+  postcss-import@15.1.0(postcss@8.4.47):
     dependencies:
-      postcss: 8.4.40
+      postcss: 8.4.47
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.4.40):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.40
-
-  postcss-js@4.0.1(postcss@8.4.41):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.41
-
   postcss-js@4.0.1(postcss@8.4.47):
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.47
 
-  postcss-load-config@4.0.2(postcss@8.4.40):
+  postcss-load-config@4.0.2(postcss@8.4.47):
     dependencies:
       lilconfig: 3.1.2
       yaml: 2.5.0
     optionalDependencies:
-      postcss: 8.4.40
-
-  postcss-nested@6.2.0(postcss@8.4.40):
-    dependencies:
-      postcss: 8.4.40
-      postcss-selector-parser: 6.1.1
+      postcss: 8.4.47
 
-  postcss-nested@6.2.0(postcss@8.4.41):
+  postcss-nested@6.2.0(postcss@8.4.47):
     dependencies:
-      postcss: 8.4.41
+      postcss: 8.4.47
       postcss-selector-parser: 6.1.1
 
   postcss-selector-parser@6.0.10:
@@ -10277,18 +10223,6 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.40:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
-  postcss@8.4.41:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
   postcss@8.4.47:
     dependencies:
       nanoid: 3.3.7
@@ -10689,7 +10623,6 @@ snapshots:
       '@img/sharp-wasm32': 0.33.5
       '@img/sharp-win32-ia32': 0.33.5
       '@img/sharp-win32-x64': 0.33.5
-    optional: true
 
   shebang-command@1.2.0:
     dependencies:
@@ -10741,8 +10674,6 @@ snapshots:
 
   smartypants@0.2.2: {}
 
-  source-map-js@1.2.0: {}
-
   source-map-js@1.2.1: {}
 
   source-map@0.6.1: {}
@@ -10864,7 +10795,7 @@ snapshots:
       css-tree: 2.3.1
       css-what: 6.1.0
       csso: 5.0.5
-      picocolors: 1.0.1
+      picocolors: 1.1.0
 
   tailwind-merge@2.5.2: {}
 
@@ -10887,12 +10818,12 @@ snapshots:
       micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.40
-      postcss-import: 15.1.0(postcss@8.4.40)
-      postcss-js: 4.0.1(postcss@8.4.40)
-      postcss-load-config: 4.0.2(postcss@8.4.40)
-      postcss-nested: 6.2.0(postcss@8.4.40)
+      picocolors: 1.1.0
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)
+      postcss-nested: 6.2.0(postcss@8.4.47)
       postcss-selector-parser: 6.1.1
       resolve: 1.22.8
       sucrase: 3.35.0
@@ -11072,35 +11003,6 @@ snapshots:
 
   universalify@0.1.2: {}
 
-  unocss@0.62.3(postcss@8.4.41)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0)):
-    dependencies:
-      '@unocss/astro': 0.62.3(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0))
-      '@unocss/cli': 0.62.3(rollup@4.21.0)
-      '@unocss/core': 0.62.3
-      '@unocss/extractor-arbitrary-variants': 0.62.3
-      '@unocss/postcss': 0.62.3(postcss@8.4.41)
-      '@unocss/preset-attributify': 0.62.3
-      '@unocss/preset-icons': 0.62.3
-      '@unocss/preset-mini': 0.62.3
-      '@unocss/preset-tagify': 0.62.3
-      '@unocss/preset-typography': 0.62.3
-      '@unocss/preset-uno': 0.62.3
-      '@unocss/preset-web-fonts': 0.62.3
-      '@unocss/preset-wind': 0.62.3
-      '@unocss/reset': 0.62.3
-      '@unocss/transformer-attributify-jsx': 0.62.3
-      '@unocss/transformer-attributify-jsx-babel': 0.62.3
-      '@unocss/transformer-compile-class': 0.62.3
-      '@unocss/transformer-directives': 0.62.3
-      '@unocss/transformer-variant-group': 0.62.3
-      '@unocss/vite': 0.62.3(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0))
-    optionalDependencies:
-      vite: 5.4.2(@types/node@22.0.0)
-    transitivePeerDependencies:
-      - postcss
-      - rollup
-      - supports-color
-
   unocss@0.62.3(postcss@8.4.47)(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0)):
     dependencies:
       '@unocss/astro': 0.62.3(rollup@4.21.0)(vite@5.4.2(@types/node@22.0.0))
@@ -11136,7 +11038,7 @@ snapshots:
     dependencies:
       browserslist: 4.23.2
       escalade: 3.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
 
   util-deprecate@1.0.2: {}
 
@@ -11150,30 +11052,15 @@ snapshots:
       '@types/unist': 3.0.2
       unist-util-stringify-position: 4.0.0
 
-  vfile@6.0.2:
-    dependencies:
-      '@types/unist': 3.0.2
-      unist-util-stringify-position: 4.0.0
-      vfile-message: 4.0.2
-
   vfile@6.0.3:
     dependencies:
       '@types/unist': 3.0.2
       vfile-message: 4.0.2
 
-  vite@5.4.2(@types/node@20.14.13):
-    dependencies:
-      esbuild: 0.21.5
-      postcss: 8.4.41
-      rollup: 4.21.0
-    optionalDependencies:
-      '@types/node': 20.14.13
-      fsevents: 2.3.3
-
   vite@5.4.2(@types/node@22.0.0):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.41
+      postcss: 8.4.47
       rollup: 4.21.0
     optionalDependencies:
       '@types/node': 22.0.0
@@ -11197,13 +11084,13 @@ snapshots:
       '@types/node': 22.0.0
       fsevents: 2.3.3
 
-  vitefu@0.2.5(vite@5.4.2(@types/node@20.14.13)):
+  vitefu@0.2.5(vite@5.4.7(@types/node@20.14.13)):
     optionalDependencies:
-      vite: 5.4.2(@types/node@20.14.13)
+      vite: 5.4.7(@types/node@20.14.13)
 
-  vitefu@0.2.5(vite@5.4.2(@types/node@22.0.0)):
+  vitefu@0.2.5(vite@5.4.7(@types/node@22.0.0)):
     optionalDependencies:
-      vite: 5.4.2(@types/node@22.0.0)
+      vite: 5.4.7(@types/node@22.0.0)
 
   vitefu@1.0.2(vite@5.4.7(@types/node@20.14.13)):
     optionalDependencies:
diff --git a/tsconfig.json b/tsconfig.json
index 0990cd2e2..1cfa925e1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,19 @@
 {
-  "include": ["**/*"],
+  "include": [
+    "**/*",
+    "packages/studiocms/**/*",
+    "packages/studiocms_assets/**/*",
+    "packages/studiocms_auth/**/*",
+    "packages/studiocms_betaresources/**/*",
+    "packages/studiocms_blog/**/*",
+    "packages/studiocms_core/**/*",
+    "packages/studiocms_dashboard/**/*",
+    "packages/studiocms_frontend/**/*",
+    "packages/studiocms_imagehandler/**/*",
+    "packages/studiocms_renderers/**/*",
+    "packages/studiocms_robotstxt/**/*",
+    "packages/studiocms_ui/**/*"
+  ],
   "compilerOptions": {
     "composite": true,
     "declaration": true,
@@ -10,7 +24,31 @@
     "noEmitOnError": true,
     "skipLibCheck": true,
     "outDir": ".moon/cache/types",
-    "paths": {}
+    "paths": {
+      "studiocms": ["packages/studiocms/src/index.ts"],
+      "studiocms/*": ["packages/studiocms/src/*"],
+      "@studiocms/assets": ["packages/studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["packages/studiocms_assets/src/*"],
+      "@studiocms/auth": ["packages/studiocms_auth/src/index.ts"],
+      "@studiocms/auth/*": ["packages/studiocms_auth/src/*"],
+      "@studiocms/betaresources": ["packages/studiocms_betaresources/src/index.ts"],
+      "@studiocms/betaresources/*": ["packages/studiocms_betaresources/src/*"],
+      "@studiocms/blog": ["packages/studiocms_blog/index.ts"],
+      "@studiocms/blog/*": ["packages/studiocms_blog/src/*"],
+      "@studiocms/core": ["packages/studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["packages/studiocms_core/src/*"],
+      "@studiocms/dashboard": ["packages/studiocms_dashboard/src/index.ts"],
+      "@studiocms/dashboard/*": ["packages/studiocms_dashboard/src/*"],
+      "@studiocms/frontend": ["packages/studiocms_frontend/src/index.ts"],
+      "@studiocms/frontend/*": ["packages/studiocms_frontend/src/*"],
+      "@studiocms/imagehandler": ["packages/studiocms_imagehandler/src/index.ts"],
+      "@studiocms/imagehandler/*": ["packages/studiocms_imagehandler/src/*"],
+      "@studiocms/renderers": ["packages/studiocms_renderers/src/index.ts"],
+      "@studiocms/renderers/*": ["packages/studiocms_renderers/src/*"],
+      "@studiocms/robotstxt": ["packages/studiocms_robotstxt/src/index.ts"],
+      "@studiocms/robotstxt/*": ["packages/studiocms_robotstxt/src/*"],
+      "@studiocms/ui/*": ["packages/studiocms_ui/src/*"]
+    }
   },
   "references": [
     {
@@ -25,6 +63,9 @@
     {
       "path": "packages/studiocms_betaresources"
     },
+    {
+      "path": "packages/studiocms_blog"
+    },
     {
       "path": "packages/studiocms_core"
     },
@@ -44,7 +85,7 @@
       "path": "packages/studiocms_robotstxt"
     },
     {
-      "path": "packages/studiocms_blog"
+      "path": "packages/studiocms_ui"
     }
   ]
 }
diff --git a/www/docs/tsconfig.json b/www/docs/tsconfig.json
index d9246a8c8..8c6fbb0f2 100644
--- a/www/docs/tsconfig.json
+++ b/www/docs/tsconfig.json
@@ -6,6 +6,7 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["src/*"]
-    }
+    },
+    "outDir": "../../.moon/cache/types/www/docs"
   }
 }
diff --git a/www/web/tsconfig.json b/www/web/tsconfig.json
index bcbf8b509..5f7b7fee2 100644
--- a/www/web/tsconfig.json
+++ b/www/web/tsconfig.json
@@ -1,3 +1,6 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "outDir": "../../.moon/cache/types/www/web"
+  }
 }