# Unity UI Toolkit Design System: 42 Components for Unity 6, Battle-Tested in a Shipping Game > This drop-in design system for Unity 6 UI Toolkit provides 42 components, 120 icons, and a single USS stylesheet with zero external dependencies. Every component is dark-themed, mobile-responsive, and keyboard-and-touch-ready, and the entire system shipped in Leap of Legends, a cross-play multiplayer game on Steam, iOS, and Android. **sinanata/unity-ui-toolkit-design-system** — Drop-in design system for Unity 6 UI Toolkit (UIDocument + PanelRenderer, UXML + USS): tokens, fx shader material support, 42 components, 120 icons, mobile-responsive, dark-themed. One stylesheet, zero dependencies. Battle-tested in a shipping cross-play game. - Repository: https://github.com/sinanata/unity-ui-toolkit-design-system - Website: https://sinanata.github.io/unity-ui-toolkit-design-system/ - Stars: 549 · Forks: 49 - Language: C# - License: MIT - Published: 2026-09-20 · Updated: 2026-09-20 · Language: en - Canonical page: https://hysenlabs.com/projects/sinanata-unity-ui-toolkit-design-system ## What problem this design system solves for Unity 6 developers Unity's UI Toolkit, introduced as the go-forward UI system for Unity 6, provides a CSS-like styling language (USS) and an XML-based layout language (UXML). What it does not provide is a pre-built visual language. Developers building game menus, HUDs, lobbies, and store screens must design component patterns themselves or license a third-party asset. This repository fills that gap with a complete, dark-themed design system. It covers 42 components and 120 icons, all controlled from a single USS stylesheet with no external package dependencies. The README states the system was built for and is used in Leap of Legends, a cross-platform multiplayer game with cross-play across Steam, iOS, and Android. Every menu, HUD, lobby, and store screen in that game runs on this system. The audience is Unity 6 developers building game or application UIs who want consistent spacing, typography, component states (hover, disabled, checked), and keyboard and touch input handling without writing the USS architecture themselves. Developers using Unity 5 or earlier versions of Unity 6 without PanelRenderer support will need to verify compatibility, since some features require Unity 6000.5 or later. ## Components, icons, and the one-stylesheet architecture The design system is controlled from one USS file. Spacing, border radii, transition durations, and layout rules live in that file. Colors flow from CSS custom properties (USS variables), so rethemeing the entire component tree means changing the variable values rather than rewriting individual component styles. The component set covers buttons, inputs, search fields, tabs, tabbed panels, vertical tabs, toggles, checkboxes, sliders, modals, toasts, empty states, tooltips, drag-and-drop targets, bottom sheets, confirm dialogs, quantity steppers, pagination, loading states, notification badges, avatars, drawers, scrollbars, and auto-hiding scrollbars. The CSS class naming follows a `ds-` prefix convention: ```text .ds-btn ds-btn--primary → rounded green CTA, hover/press/disabled built in .ds-input .ds-search → text fields with leading-icon slot + placeholder .ds-tab .ds-tabs → segmented strip with .is-active state .ds-toggle .ds-check → iOS-style switch + square checkbox (auto-knob ``` The 120 icons are part of the same package and follow the same naming convention. The repository ships an AGENTS.md and an llms.txt file so AI coding assistants (Copilot, Cursor, Codex, Claude Code) use the `ds-` class names correctly rather than generating their own guesses at the naming convention. The system is dark-themed by default. A day/night toggle is available in the interactive demo, and twelve external Codigrate themes can be applied at runtime by selecting from a dropdown that adds one additional stylesheet to the panel root. ## Unity UI Toolkit design system tutorial: installation and first component The repository uses a git submodule for its build tooling. Clone it with submodules to get the full build chain: ```powershell git clone --recurse-submodules https://github.com/sinanata/unity-ui-toolkit-design-system # or, after a plain clone: git submodule update --init --recursive .\Tools\Build\Build-Showcase.ps1 -Serve ``` The build script serves the component gallery at http://localhost:3000. The build flow uses a cross-platform orchestrator vendored as a submodule at `Tools/.orchestrator/`. The README notes the build requires no cloud builds and no Unity license secret: it runs entirely locally. To use the design system in a Unity project, the Assets/ directory contains the UXML templates, USS stylesheets, and icon assets. The system works with both UIDocument and PanelRenderer. For UIDocument, attach the design system USS to the panel settings asset. For PanelRenderer, the same USS works without modification. The interactive demo covers 36 component sections, each showing the selector chain from root to leaf, making it straightforward to copy a component's full CSS class path into your own UXML. ## World-space gallery and PanelRenderer support Unity 6000.5 and later support PanelRenderer, which renders UI Toolkit panels onto 3D surfaces in world space. The design system's 3D demo demonstrates that capability with a walkable corridor where each of the 36 component sections hangs on the walls as a live panel. The panels are interactive: you can type in inputs, flip toggles, and change themes from inside the 3D gallery. The README explains the technical details. The 3D demo uses PanelRenderer rather than UIDocument for world space because PanelRenderer is Unity's go-forward native renderer for UI Toolkit and its reload-callback model fits the per-section panel architecture. Each section gets its own panel, driven by the same DesignSystemBehaviour that the flat UIDocument version uses. Navigation in the 3D gallery uses W/A/S/D or arrow keys for movement, right-mouse or Q/E for looking, and click for interaction. On touch devices, two on-screen sticks handle walking and looking, preserving tap events for component interaction. For teams targeting earlier Unity 6 versions without 6000.5 PanelRenderer support, the flat UIDocument path works fine and all 42 components are usable. The world-space capability is additive, not a requirement. ## External theming and runtime palette generation The COLORS section of the component demo ships with 12 Codigrate IDE themes including Sequoia, Sakura, Tokyo, and Paris. Each is baked into a ThemeData asset at build time. Selecting a theme adds one additional USS file to the panel root. Because the component styling uses USS variables throughout, applying the new variables repaints the entire component tree including :hover, :disabled, and :checked states. The day/night toggle is suppressed while a Codigrate palette is active and re-enabled when you switch back to the design system default. A Randomize button generates an HSV-driven palette at runtime for exploratory use. The README notes this is the one palette that cannot be a baked asset: Unity cannot compile a stylesheet from a runtime string in a player build, so the randomized palette is applied inline on every element rather than as a USS file. The THEMING section of the demo prints the live USS of whatever theme is currently active, making it straightforward to copy the variable values into your own project. The CHANGELOG documents the colour coverage matrix for the 12 themes under version 1.4.0 and the mechanics of the external theme provider under version 1.4.7. ## Limitations and comparison to the Unreal UMG version The design system has one primary constraint on its default appearance: it is dark-themed. Light mode is available as a toggle but is not the primary design target. Teams building productivity tools or utility applications where light mode is expected as the default will need to invest time adapting the variable palette. The system requires Unity 6 for full compatibility. The PanelRenderer and world-space features require Unity 6000.5 specifically. Earlier Unity versions (Unity 2021 or 2022 LTS) do not support UIDocument and USS at the same feature level, so the system cannot simply be dropped into a Unity 5 or older project. The same author maintains an Unreal Engine equivalent called unreal-umg-design-system. The fundamental difference in approach reflects the engine difference: Unity's USS is a text-based stylesheet language similar to web CSS, so the design system is driven by a single stylesheet file. Unreal's UMG uses a widget blueprint system, so the Unreal version implements components as widget blueprints rather than as CSS classes. Developers working in both engines can use both systems, but they are separate implementations rather than a shared codebase. ## Maintenance status and licence The last push to the repository was on 2026-08-19. The repository is not archived. There are no GitHub releases; changes appear to land on the main branch and are tracked through CHANGELOG.md, which follows semantic versioning. The project is available under the MIT licence, which permits use, modification, and redistribution without requiring the same licence on derivative works. The repository includes a CONTRIBUTING.md for external contributors. ## Conclusion Unity 6 game developers who want a production-tested, dark-themed component library for UIDocument or PanelRenderer should evaluate this design system. It is the right choice when you need a consistent visual system without writing a USS architecture from scratch. It is the wrong choice when you need light-mode theming by default, since the system is dark-themed and light support is an explicit toggle, not a primary mode. Before integrating, verify your Unity version against the PanelRenderer and world-space requirements: the 3D gallery feature requires Unity 6000.5 or later, while the flat UIDocument components work on earlier Unity 6 builds. ## FAQ ### What is the Unity UI toolkit? Unity UI Toolkit is Unity's go-forward UI system, using a CSS-like styling language (USS) and an XML-based layout language (UXML) to build game and application interfaces. This design system provides a pre-built set of 42 components and 120 icons for UI Toolkit, so developers do not need to write the full USS architecture themselves. ### How do I install the Unity UI Toolkit design system? Clone the repository with --recurse-submodules to get the build tooling, then run the Build-Showcase.ps1 script to build and serve the component gallery locally at http://localhost:3000. To use the design system in a Unity project, add the Assets/ directory contents and attach the USS to your panel settings. ### Does the Unity UI Toolkit design system work in 3D world space? Yes, with Unity 6000.5 or later. The 3D demo features a walkable corridor where each component section renders as an interactive world-space panel using PanelRenderer. On earlier Unity 6 builds, the flat UIDocument path with all 42 components works without the world-space features. ## Sources - [Issues](https://github.com/sinanata/unity-ui-toolkit-design-system/issues) - [License: MIT](https://github.com/sinanata/unity-ui-toolkit-design-system/blob/main/LICENSE) - [Project website](https://sinanata.github.io/unity-ui-toolkit-design-system/) - [README](https://github.com/sinanata/unity-ui-toolkit-design-system/blob/main/README.md) - [sinanata/unity-ui-toolkit-design-system on GitHub](https://github.com/sinanata/unity-ui-toolkit-design-system) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/sinanata-unity-ui-toolkit-design-system