# Cyberdeck UI > Copy-paste cyberpunk components for the web, in HTML/CSS and React. A free, open-source library of cyberpunk UI components: neon buttons, glitch text, HUD cards, forms, menus, a command palette, backgrounds and more. Every component comes as plain HTML/CSS and as a typed React component, with no dependencies. 56 components in 9 categories. Free and open source (MIT). Made by Ricardo Gonçalves (https://riagoncalves.dev). How to use a component: 1. Optionally load the fonts from Google Fonts: Orbitron (display), Rajdhani (body) and Share Tech Mono (mono). 2. Add tokens.css once, globally. It defines the --cy-* CSS custom properties (colours, fonts, corner size) that every component uses. 3. Copy the component: its HTML + CSS (+ a small vanilla JS file for interactive ones), or its React .tsx file + the same CSS. Conventions: class names start with "cy-", CSS variables with "--cy-". No dependencies and no build step. Animations respect prefers-reduced-motion, and interactive components use native elements (,
, checkboxes, radios, range inputs) with keyboard support and ARIA where needed. ## Docs - [Get started](https://cyberdeck-ui.netlify.app/docs/getting-started): fonts, design tokens, copying a component, theming and accessibility - [Design tokens](https://cyberdeck-ui.netlify.app/docs/getting-started#tokens): the --cy-* variables to override for your own theme - [Full source](https://cyberdeck-ui.netlify.app/llms-full.txt): every component's HTML, CSS, JS and React source in one plain-text file ## Components ### Buttons Cut-corner, outlined, glitching and bracketed buttons. - [Neon Button](https://cyberdeck-ui.netlify.app/components/buttons#neon-button): The primary action: solid yellow with clipped corners, turning cyan on hover and focus. - [Outline Button](https://cyberdeck-ui.netlify.app/components/buttons#outline-button): A secondary action with a neon border and glow. Comes in cyan and pink. - [Glitch Button](https://cyberdeck-ui.netlify.app/components/buttons#glitch-button): The label splits into cyan and magenta slices on hover and keyboard focus. - [Bracket Button](https://cyberdeck-ui.netlify.app/components/buttons#bracket-button): A minimal terminal-style button whose brackets spread apart on hover. - [Icon Button](https://cyberdeck-ui.netlify.app/components/buttons#icon-button): A square, glowing icon-only button with a required accessible label. ### Typography Glitching headlines, neon signs, terminal prompts, typewriters, tickers and decrypting text. - [Glitch Text](https://cyberdeck-ui.netlify.app/components/typography#glitch-text): A headline that glitches into cyan and magenta every few seconds, or only on hover. - [Neon Text](https://cyberdeck-ui.netlify.app/components/typography#neon-text): Glowing sign text in four colours, with an optional loose-wire flicker. - [Terminal Prompt](https://cyberdeck-ui.netlify.app/components/typography#terminal-prompt): A mono label with a prompt arrow and a blinking cursor. - [Section Heading](https://cyberdeck-ui.netlify.app/components/typography#section-heading): Numbered section title with a glowing divider and subtitle. Glitches on hover. - [Decrypt Text](https://cyberdeck-ui.netlify.app/components/typography#decrypt-text): Scrambled glyphs resolve into the real text on load and on hover. Screen readers get the text immediately. - [Typewriter](https://cyberdeck-ui.netlify.app/components/typography#typewriter): Types out a list of phrases one by one, deleting and looping. Screen readers get the full text once. - [Ticker](https://cyberdeck-ui.netlify.app/components/typography#ticker): A scrolling news ticker with a live label. Pauses on hover and stops for reduced motion. ### Cards HUD-framed project cards, skill tiles, stats, profiles and pricing. - [HUD Card](https://cyberdeck-ui.netlify.app/components/cards#hud-card): A project card with corner brackets that grow and glow on hover, plus tech tags. - [Skill Tile](https://cyberdeck-ui.netlify.app/components/cards#skill-tile): Small icon tiles with a per-tile accent colour, for skills or features. - [Stat Card](https://cyberdeck-ui.netlify.app/components/cards#stat-card): A big glowing number with a segmented meter and a caption. - [Profile Card](https://cyberdeck-ui.netlify.app/components/cards#profile-card): A hexagonal avatar with a status dot, name, role and a row of stats. - [Pricing Card](https://cyberdeck-ui.netlify.app/components/cards#pricing-card): A pricing tier with a feature list and call to action. The featured variant switches to yellow. ### Forms Inputs, search, selects, switches, checkboxes, radios and sliders, all keyboard-accessible. - [Text Input](https://cyberdeck-ui.netlify.app/components/forms#text-input): A labelled mono input with a cyan focus glow and an error state. - [Textarea](https://cyberdeck-ui.netlify.app/components/forms#textarea): The multi-line companion to the text input. - [Search Input](https://cyberdeck-ui.netlify.app/components/forms#search-input): A search field with an icon and a keyboard shortcut ("/" by default) that focuses it from anywhere. - [Toggle Switch](https://cyberdeck-ui.netlify.app/components/forms#toggle-switch): An on/off switch built on a real checkbox with role="switch". - [Checkbox](https://cyberdeck-ui.netlify.app/components/forms#checkbox): A square magenta checkbox with an animated check mark. - [Radio Group](https://cyberdeck-ui.netlify.app/components/forms#radio-group): A fieldset of selectable rows with diamond markers and optional descriptions. - [Range Slider](https://cyberdeck-ui.netlify.app/components/forms#range-slider): A native range input with a glowing filled track, a diamond thumb and a live value. - [Select](https://cyberdeck-ui.netlify.app/components/forms#select): A native select restyled to match the inputs, with a neon chevron. ### Navigation Navbars, tabs, breadcrumbs, pagination, steppers and segmented controls. - [Navbar](https://cyberdeck-ui.netlify.app/components/navigation#navbar): A blurred top bar with a brand, mono links and a right-hand slot (here a language switcher). - [Segmented Control](https://cyberdeck-ui.netlify.app/components/navigation#segmented-control): Radio buttons styled as a compact switcher, e.g. for language or view options. - [Tabs](https://cyberdeck-ui.netlify.app/components/navigation#tabs): Accessible tabs with a glowing underline, arrow-key navigation and roving focus. - [Breadcrumbs](https://cyberdeck-ui.netlify.app/components/navigation#breadcrumbs): A mono breadcrumb trail with // separators. - [Pagination](https://cyberdeck-ui.netlify.app/components/navigation#pagination): Page links with a clipped highlight on the current page and automatic gaps. - [Stepper](https://cyberdeck-ui.netlify.app/components/navigation#stepper): Progress through a multi-step flow: completed, current and upcoming steps, with aria-current. ### Feedback Alerts, progress, loaders, skeletons, toasts and tooltips. - [Alert](https://cyberdeck-ui.netlify.app/components/feedback#alert): Info, success, warning and danger messages with the right ARIA role for each. - [Progress Bar](https://cyberdeck-ui.netlify.app/components/feedback#progress-bar): A segmented, glowing progress bar, plus an indeterminate scanning variant. - [Loader](https://cyberdeck-ui.netlify.app/components/feedback#loader): An equaliser-style loader with animated dots. - [Skeleton](https://cyberdeck-ui.netlify.app/components/feedback#skeleton): Placeholder lines and blocks with a scanning shimmer while content loads. - [Toast](https://cyberdeck-ui.netlify.app/components/feedback#toast): Slide-in notifications that dismiss themselves. The React version is a provider plus a useToast() hook. - [Tooltip](https://cyberdeck-ui.netlify.app/components/feedback#tooltip): A CSS-only tooltip that also opens on keyboard focus, linked with aria-describedby. ### Data Display Chips, timelines, terminals, tables, gauges, avatars, accordions and keyboard keys. - [Chip List](https://cyberdeck-ui.netlify.app/components/data-display#chip-list): Small mono tags for technologies or categories, in cyan or pink. - [Timeline](https://cyberdeck-ui.netlify.app/components/data-display#timeline): A vertical timeline with diamond markers. The current entry pulses. - [Terminal Window](https://cyberdeck-ui.netlify.app/components/data-display#terminal-window): A fake terminal for commands and output, with coloured status lines and a blinking cursor. - [Data Table](https://cyberdeck-ui.netlify.app/components/data-display#data-table): A typed, generic table with a caption, numeric columns and custom cell renderers. - [Status Badge](https://cyberdeck-ui.netlify.app/components/data-display#status-badge): Online, away, offline and alert badges with a glowing (pulsing) dot. - [Radial Gauge](https://cyberdeck-ui.netlify.app/components/data-display#radial-gauge): A circular meter with a tick ring and a glowing arc, in four colours. Uses role="meter". - [Avatar](https://cyberdeck-ui.netlify.app/components/data-display#avatar): A hexagonal avatar with a gradient ring, initials or a photo, a status dot and a stacked group. - [Accordion](https://cyberdeck-ui.netlify.app/components/data-display#accordion): Numbered collapsible sections on native
, optionally one open at a time. - [Keyboard Key](https://cyberdeck-ui.netlify.app/components/data-display#kbd): Glowing keycaps for shortcuts, single keys or combinations, using nested . ### Overlays Modals, drawers, dropdown menus and a command palette, built on native elements. - [Modal](https://cyberdeck-ui.netlify.app/components/overlays#modal): A HUD-framed dialog using native : focus trapping, Escape to close and a blurred backdrop for free. - [Drawer](https://cyberdeck-ui.netlify.app/components/overlays#drawer): A side panel on native that slides in from the right or left, with a pinned footer. - [Dropdown Menu](https://cyberdeck-ui.netlify.app/components/overlays#dropdown-menu): A menu button following the ARIA menu pattern: arrow keys, Home/End, Escape and click outside. - [Command Palette](https://cyberdeck-ui.netlify.app/components/overlays#command-palette): Ctrl/Cmd + K to open, type to filter, arrows and Enter to run. A combobox with a listbox inside a . ### Backgrounds & Effects Perspective grids, circuit boards, scanlines, digital rain, dividers and HUD frames. - [Cyber Grid](https://cyberdeck-ui.netlify.app/components/backgrounds#cyber-grid): An animated perspective floor with a glowing horizon, for hero sections. - [Circuit Pattern](https://cyberdeck-ui.netlify.app/components/backgrounds#circuit-pattern): A seamless circuit-board background with a pulse of current sweeping across. CSS only. - [Scanlines](https://cyberdeck-ui.netlify.app/components/backgrounds#scanlines): A CRT scanline overlay for a single element or the whole screen. - [Digital Rain](https://cyberdeck-ui.netlify.app/components/backgrounds#digital-rain): Falling glyph columns on a canvas. Pauses off-screen and respects reduced motion. - [Glow Divider](https://cyberdeck-ui.netlify.app/components/backgrounds#glow-divider): A fading neon rule with a diamond or a label in the middle. - [HUD Frame](https://cyberdeck-ui.netlify.app/components/backgrounds#hud-frame): Corner brackets for any container, in any colour. ## Optional - [All components](https://cyberdeck-ui.netlify.app/components): the catalogue, by type - [Author](https://riagoncalves.dev): Ricardo Gonçalves