# Oyna UI > A Vue 3 component library with a dark glass look. Plain CSS, no Tailwind. The npm package is `oyna-ui`; it needs Vue 3.5 or newer. Things that are easy to get wrong: - Components are prefixed with `O`: ``, ``, ``. CSS variables are prefixed with `--o-`, classes with `.o-`. - Set it up with `import oyna from 'oyna-ui'`, `import 'oyna-ui/style.css'` and `app.use(oyna)`, or import single components by name. There is no Tailwind or UnoCSS to configure. - The look is dark glass over a rich background: put `` on the page once. There is no light theme. - A hotkey is a physical key code, `KeyboardEvent.code`: `hotkey="KeyD"`, `hotkey="Enter"`, `hotkey="Slash"`; never a character such as `"d"`, and never a combination. - The library ships no icons. Pass an `` or a component from `@lucide/vue` in a slot. - Colour is a signal: one accent (`variant="primary"`, `tone="accent"`) for the main thing on a screen, `tone="danger"` for something at stake. Do not add borders or other colours. - `OMenu` was renamed to `ODropdownMenu` in 0.2.0. ## Guide - [Why Oyna UI](https://oyna-ui.org/guide/why.md): I was building invoke.wtf, a trainer for Invoker from Dota 2, and wanted a UI kit that looked the way I had in mind: dark glass over a rich background, no grey borders, light instead of lines, big condensed numbers, everything reachable from the keyboard. - [Installation](https://oyna-ui.org/guide/installation.md): `vue` 3.5 or newer is a peer dependency. - [Theming](https://oyna-ui.org/guide/theming.md): Every colour, radius and font is a CSS variable. Override them on `:root`, or on any element to restyle one part of the page. - [Hotkeys](https://oyna-ui.org/guide/hotkeys.md): Hotkeys are read from the physical key (`KeyboardEvent.code`), not from the character it types. `KeyR` is the same key on a QWERTY, an AZERTY and a Russian layout. - [Icons](https://oyna-ui.org/guide/icons.md): Oyna UI ships no icons. Put any SVG in a component's slot and it takes the size of the text next to it. The examples on this site use Lucide: restrained line icons that match the look. ## Basics - [Background](https://oyna-ui.org/components/background.md): The stage behind the glass: colour glows, a vignette that keeps the centre readable, and noise. Generated in CSS, with no image files. - [Surface](https://oyna-ui.org/components/surface.md): Glass: a translucent dark fill over the background. No borders. `OCard` is a surface with padding, the darker fill, and an optional header and footer. - [Card](https://oyna-ui.org/components/card.md): The block most screens are made of: a darker surface with padding, and an optional header and footer. - [Button](https://oyna-ui.org/components/button.md): An action. One accent button per screen is the main thing; the rest stay quiet. A button can display its hotkey and own it. - [Kbd](https://oyna-ui.org/components/kbd.md): A key. It looks like a key cap: a face lit from above, standing on a dark lip. - [Badge](https://oyna-ui.org/components/badge.md): A short label next to something: a plan, a status, a count. - [Tag](https://oyna-ui.org/components/tag.md): Something the user applied and can take off: a filter, a label, a recipient. - [Avatar](https://oyna-ui.org/components/avatar.md): A person, as a round picture or as initials when there is no picture. For a member in a list, the author of a deploy, the account in a header. ## Controls - [Input](https://oyna-ui.org/components/input.md): A text field. Its edge is a quiet 1px line; the ring turns accent on focus and danger when the value is wrong. `OField` adds a label and a message under it. - [Textarea](https://oyna-ui.org/components/textarea.md): Text of several lines. It looks and behaves like an input, and works inside an `OField` the same way. - [PinInput](https://oyna-ui.org/components/pin-input.md): A short code typed one character per cell: a confirmation code from an email or a text message, a PIN. - [Checkbox](https://oyna-ui.org/components/checkbox.md): A yes or no that is part of a form and takes effect when the form is sent. For a setting that applies at once, use a switch. - [Radio](https://oyna-ui.org/components/radio.md): One choice out of a few, with all options in view. For a short switch between views use tabs; for a long list, a select. - [Switch](https://oyna-ui.org/components/switch.md): A setting that is on or off and applies at once. The label is on the left and the switch on the right, so a column of them lines up. - [Toggle](https://oyna-ui.org/components/toggle.md): A setting that is on or off, as a chip. It lights up in the accent colour when on, and can own a hotkey. - [Tabs](https://oyna-ui.org/components/tabs.md): A choice of one view out of a few. Arrow keys move between tabs. - [Accordion](https://oyna-ui.org/components/accordion.md): Sections that open one under another, so a long page shows its headings first: a list of questions, the groups of a settings page, the details of a deploy. - [Select](https://oyna-ui.org/components/select.md): A choice of one out of a list that is too long for tabs. Arrow keys move through the list, typing jumps to an option, `Esc` closes it. - [Combobox](https://oyna-ui.org/components/combobox.md): A choice of one out of a long list, found by typing. Use a select while the list fits on the screen; once it does not, a field that filters the list is faster than scrolling. - [Slider](https://oyna-ui.org/components/slider.md): A number picked by dragging, when the feel of the value matters more than its exact digits: a volume, a radius, an opacity. For an exact number use an input. - [KeyCapture](https://oyna-ui.org/components/key-capture.md): Lets the user choose a key. Click it, then press the key; `Esc` or clicking away cancels. The value is a physical key code, ready to pass to a `hotkey`. ## Layers - [Dialog](https://oyna-ui.org/components/dialog.md): A layer over the page for something that needs an answer or full attention. `Esc`, the close button and a click outside close it; focus stays inside while it is open and returns to where it was. - [Command](https://oyna-ui.org/components/command.md): A list of everything the app can do, opened with one key and searched by typing: the fastest way around an interface for someone who keeps their hands on the keyboard. - [Drawer](https://oyna-ui.org/components/drawer.md): A panel standing at an edge of the screen, for something longer than a popover holds and less final than a dialog: filters, the details of a row, a short form. The page stays behind it. - [Popover](https://oyna-ui.org/components/popover.md): A small panel that opens from a button and can hold anything: a few filters, a short form, an explanation. A click outside or `Esc` closes it. - [DropdownMenu](https://oyna-ui.org/components/dropdown-menu.md): A menu of actions that drops down from a button. Arrow keys move through it, typing jumps to an item, `Esc` closes it. - [ContextMenu](https://oyna-ui.org/components/context-menu.md): A menu of actions that opens where the pointer is, on a right click: the actions of the thing that was clicked. On a touch screen a long press opens it. - [Tooltip](https://oyna-ui.org/components/tooltip.md): A short note about a control, shown on hover and on keyboard focus. For controls whose meaning is not written on them, such as icon buttons. - [Toast](https://oyna-ui.org/components/toast.md): A short message about something that just happened. It goes away by itself; a click removes it sooner. ## States - [Alert](https://oyna-ui.org/components/alert.md): A message that stays on the page, next to what it is about. For one that comes and goes, use a toast. - [Spinner](https://oyna-ui.org/components/spinner.md): Something is under way and there is nothing to show yet. Three dots light up in turn: the library signals with light, so nothing rotates. - [Skeleton](https://oyna-ui.org/components/skeleton.md): A placeholder in the shape of content that is still loading, so the page does not jump when it arrives. - [Empty](https://oyna-ui.org/components/empty.md): Nothing here yet. Say what is missing, why, and give the way out. ## Data - [Stat](https://oyna-ui.org/components/stat.md): A number with a caption. The value is set in the display face with tabular figures, so numbers in a row line up. - [Progress](https://oyna-ui.org/components/progress.md): How much is done, or how much is left. - [Pips](https://oyna-ui.org/components/pips.md): Progress through a small number of equal steps, one dot per step. For anything longer or continuous use Progress. - [Sparkline](https://oyna-ui.org/components/sparkline.md): The shape of a series in a small space: no axes, no numbers. The last value gets a dot in the accent colour — it is the one that matters. - [BarChart](https://oyna-ui.org/components/bar-chart.md): A few values side by side. All bars are quiet; colour picks out the one to look at. - [Table](https://oyna-ui.org/components/table.md): Rows of the same kind. Rows are told apart by stripes, not by lines. Numeric columns are set in the display face with figures that line up. - [Pagination](https://oyna-ui.org/components/pagination.md): The way through a list too long for one screen: a row of page numbers with arrows at its ends. - [Timeline](https://oyna-ui.org/components/timeline.md): What happened, in order. A dot for every event on one track; the dot's colour is the signal. ## Examples Whole screens built only from the library's components; the best place to see how they are put together. - [Dashboard.vue](https://raw.githubusercontent.com/azabroflovski/oyna-ui/master/docs/examples/dashboard/Dashboard.vue): the source of https://oyna-ui.org/examples/dashboard - [Incident.vue](https://raw.githubusercontent.com/azabroflovski/oyna-ui/master/docs/examples/incident/Incident.vue): the source of https://oyna-ui.org/examples/incident - [Projects.vue](https://raw.githubusercontent.com/azabroflovski/oyna-ui/master/docs/examples/projects/Projects.vue): the source of https://oyna-ui.org/examples/projects - [Settings.vue](https://raw.githubusercontent.com/azabroflovski/oyna-ui/master/docs/examples/settings/Settings.vue): the source of https://oyna-ui.org/examples/settings ## Optional - [Every page in one file](https://oyna-ui.org/llms-full.txt) - [Changelog](https://raw.githubusercontent.com/azabroflovski/oyna-ui/master/CHANGELOG.md)