Feature card
More control
Additional options and customization, presented with a little more room to breathe.
01 · Foundations
Typography
Cinzel brings an engraved, considered voice to headings. Inter keeps body copy, menus, labels, and controls practical and readable.
H1 · 3xl
The Elder Scrolls V
H2 · 2xl
A better way to play
H3 · xl
Thoughtful improvements
H4 · lg
Streamlined, familiar, powerful
H5 · md
Designed for immersion
H6 · sm
Feature overview
02 · Actions
Buttons
One button component covers text actions, loading states, and icon-only controls.
03 · Navigation
Links
Links carry navigation and inline reading actions without competing with primary buttons.
Default link Read more
Hover / muted View details
External link View on GitHub
Inline link
Read the component documentation to learn more.
04 · Metadata
Badges
Compact labels make status, category, and environment information easy to scan.
Tones
Neutral Accent Success Warning Danger
Sizes and context
Development Installed Version 1.0
05 · Surfaces
Cards
Cards group related content into quiet, bordered surfaces with clear hierarchy and optional interaction.
Blog card
Designing for immersion
Thoughts on UI design in Skyrim and how to improve the player experience.
Gallery card
Inventory redesign
A clearer, more organized inventory interface.
05 · Content
Empty state
Give unavailable content a clear explanation and a useful next step.
No saved profiles yet
Create a profile to keep your preferred settings ready for the next session.
06 · Forms
Text inputs
Inputs keep labels, help text, and validation messages close to the control they describe.
Default states
We will only use this for account updates.
Validation and states
Username must be at least 4 characters.
07 · Forms
Select
A styled select with keyboard navigation and predictable focus behavior, powered by bits-ui.
Selection states
08 · Forms
Combobox
Search a list of options and select one without leaving the keyboard.
Searchable selection
Type to filter the available options.
The list stays open so you can select several options.
08 · Forms
Checkbox
Use checkboxes for independent settings, preferences, and consent choices.
Checkbox states
Allow this feature to be used in your workspace.
Receive updates when something changes.
09 · Forms
Radio group
Radio groups are for mutually exclusive choices where the user can select only one option.
Interface mode
Prioritize a faster experience.
A considered default for most players.
Keep the atmosphere front and center.
Disabled group
Prioritize a faster experience.
A considered default for most players.
Keep the atmosphere front and center.
10 · Forms
Switch
Use switches for immediate on/off preferences that take effect as soon as they change.
Preference states
Play sounds for menus and interactions.
Keep your progress synchronized across devices.
11 · Disclosure
Accordion
Use accordions to progressively reveal related details without overwhelming the page.
Single item open
Keep menus clear and readable while preserving the atmosphere of the world.
Customize the controls that make your most-used actions feel natural.
This setting is not available in the current version.
12 · Navigation
Tabs
Use tabs to organize related views while keeping one focused panel visible at a time.
Automatic activation
A focused overview keeps the most important information visible without adding noise.
Use this space for supporting information, configuration notes, or deeper context.
This area is not available in the current version.
13 · Feedback
Alert
Use alerts for important context, system status, and messages that need the user’s attention.
Semantic tones
Information
Saved
Review needed
Unable to connect
14 · Feedback
Tooltip
Use tooltips for brief, non-essential hints that clarify controls without adding visual clutter.
Placement and keyboard access
15 · Overlay
Modal
Use modals for focused tasks that need a clear decision or a small amount of dedicated space.
Controlled dialog
16 · Utility
Code block
Use code blocks for readable configuration examples, terminal output, and snippets that should be easy to copy.
Copyable snippet
const profile = await loadProfile('survival');
if (profile.ready) {
await applySettings(profile.settings);
}17 · Navigation
Pagination
Use pagination to move through larger collections while keeping the current position clear and keyboard accessible.
Controlled pages
16 · Usage
Semantic HTML first
Use the correct heading level for the document structure. The theme handles the visual hierarchy.
<h1>Page title<h2>Major section<h3>Component group<p>Body content