# UI95

> Retro components for shadcn. UI95 is a shadcn registry of retro, Windows 95 style React components: square corners, four inks, stepped motion, ordered dither and synthesized click sounds. Install them with the shadcn CLI and own the code.

UI95 lives at https://www.ui95.dev/ and its source is https://github.com/Roho7/ui95. It is a shadcn/ui registry for Radix projects, not the Preact ui95 library or another Windows 95 theme.

## Quick start

1. Start a Radix shadcn project: `npx shadcn@latest init -b radix`. Base UI is not supported yet.
2. Add the theme: `npx shadcn@latest add https://www.ui95.dev/r/theme.json`
3. Add any item: `npx shadcn@latest add https://www.ui95.dev/r/<name>.json`
4. Or register the namespace once with `npx shadcn@latest registry add "@ui95=https://www.ui95.dev/r/{style}/{name}.json"` and install by name: `npx shadcn@latest add @ui95/button`

## Getting started

- [Introduction](https://www.ui95.dev/docs): What UI95 is and how a component page is organised.
- [Installation](https://www.ui95.dev/docs/installation): How to make your app look like this.
- [Theming](https://www.ui95.dev/docs/theming): There are different kinds of retro vibes.
- [Sound](https://www.ui95.dev/docs/sound): Synthesized clicks for every control, and how to add them.

## Components

- [Accordion](https://www.ui95.dev/components/accordion): shadcn accordion where each item is a raised bevelled box, with beveled chevron toggles and no easing. Markdown: https://www.ui95.dev/components/accordion.md Registry: https://www.ui95.dev/r/accordion.json
- [Alert](https://www.ui95.dev/components/alert): shadcn alert as a 1-bit message box. Markdown: https://www.ui95.dev/components/alert.md Registry: https://www.ui95.dev/r/alert.json
- [Alert Dialog](https://www.ui95.dev/components/alert-dialog): Modal confirmation in the dialog chrome, with action and cancel buttons. Markdown: https://www.ui95.dev/components/alert-dialog.md Registry: https://www.ui95.dev/r/alert-dialog.json
- [Aspect Ratio](https://www.ui95.dev/components/aspect-ratio): Keeps content at a fixed aspect ratio. Markdown: https://www.ui95.dev/components/aspect-ratio.md Registry: https://www.ui95.dev/r/aspect-ratio.json
- [Avatar](https://www.ui95.dev/components/avatar): Pixel-stepped circle avatar with a 1px ring, a dithered drop shadow, and an image or pixel-font initials. Markdown: https://www.ui95.dev/components/avatar.md Registry: https://www.ui95.dev/r/avatar.json
- [Badge](https://www.ui95.dev/components/badge): shadcn badge as a pixel tag. Markdown: https://www.ui95.dev/components/badge.md Registry: https://www.ui95.dev/r/badge.json
- [Breadcrumb](https://www.ui95.dev/components/breadcrumb): Path trail with pixel chevron separators. Markdown: https://www.ui95.dev/components/breadcrumb.md Registry: https://www.ui95.dev/r/breadcrumb.json
- [Button](https://www.ui95.dev/components/button): shadcn button reskinned with pixel borders and offset shadows. Markdown: https://www.ui95.dev/components/button.md Registry: https://www.ui95.dev/r/button.json
- [Button Group](https://www.ui95.dev/components/button-group): Buttons joined edge to edge into one pixel-bordered strip. Markdown: https://www.ui95.dev/components/button-group.md Registry: https://www.ui95.dev/r/button-group.json
- [Calendar](https://www.ui95.dev/components/calendar): shadcn calendar reskinned for UI95. Markdown: https://www.ui95.dev/components/calendar.md Registry: https://www.ui95.dev/r/calendar.json
- [Card](https://www.ui95.dev/components/card): shadcn card as a raised bevelled pixel panel. Markdown: https://www.ui95.dev/components/card.md Registry: https://www.ui95.dev/r/card.json
- [Carousel](https://www.ui95.dev/components/carousel): shadcn carousel reskinned for UI95. Markdown: https://www.ui95.dev/components/carousel.md Registry: https://www.ui95.dev/r/carousel.json
- [Checkbox](https://www.ui95.dev/components/checkbox): shadcn checkbox with a pixel check. Markdown: https://www.ui95.dev/components/checkbox.md Registry: https://www.ui95.dev/r/checkbox.json
- [Collapsible](https://www.ui95.dev/components/collapsible): Unstyled show and hide region with a trigger, opening in one frame. Markdown: https://www.ui95.dev/components/collapsible.md Registry: https://www.ui95.dev/r/collapsible.json
- [Command](https://www.ui95.dev/components/command): shadcn command reskinned for UI95. Markdown: https://www.ui95.dev/components/command.md Registry: https://www.ui95.dev/r/command.json
- [Context Menu](https://www.ui95.dev/components/context-menu): Right-click menu with the shared menu look: foreground bar highlight, etched separators, left indicators. Markdown: https://www.ui95.dev/components/context-menu.md Registry: https://www.ui95.dev/r/context-menu.json
- [CTA Button](https://www.ui95.dev/components/cta-button): Call-to-action button over a WebGL dither shine that sweeps at 10 fps, with a stepped pixel tilt toward the pointer on hover. Markdown: https://www.ui95.dev/components/cta-button.md Registry: https://www.ui95.dev/r/cta-button.json
- [Dialog](https://www.ui95.dev/components/dialog): shadcn dialog with a striped title bar and a dithered overlay. Markdown: https://www.ui95.dev/components/dialog.md Registry: https://www.ui95.dev/r/dialog.json
- [Dither image](https://www.ui95.dev/components/dither-image): Ordered Bayer dithering quantized to the theme inks, or to two to four colors of your own. Markdown: https://www.ui95.dev/components/dither-image.md Registry: https://www.ui95.dev/r/dither-image.json
- [Dither shine](https://www.ui95.dev/components/dither-shine): A two-color Bayer-dithered band that sweeps corner to corner at a stepped frame rate. Markdown: https://www.ui95.dev/components/dither-shine.md Registry: https://www.ui95.dev/r/dither-shine.json
- [Drawer](https://www.ui95.dev/components/drawer): shadcn drawer reskinned for UI95. Markdown: https://www.ui95.dev/components/drawer.md Registry: https://www.ui95.dev/r/drawer.json
- [Dropdown menu](https://www.ui95.dev/components/dropdown-menu): shadcn dropdown menu with Win95 inverted highlight, etched separators and pixel indicators. Markdown: https://www.ui95.dev/components/dropdown-menu.md Registry: https://www.ui95.dev/r/dropdown-menu.json
- [Empty](https://www.ui95.dev/components/empty): Empty state with a pixel icon, title, description and actions. Markdown: https://www.ui95.dev/components/empty.md Registry: https://www.ui95.dev/r/empty.json
- [Field](https://www.ui95.dev/components/field): Form field layout: label, control, description and dashed-border errors. Markdown: https://www.ui95.dev/components/field.md Registry: https://www.ui95.dev/r/field.json
- [Highlighted text](https://www.ui95.dev/components/highlighted-text): Text with dithered pixel stars that twinkle on its corners in stepped frames, each corner on its own beat. Markdown: https://www.ui95.dev/components/highlighted-text.md Registry: https://www.ui95.dev/r/highlighted-text.json
- [Hover Card](https://www.ui95.dev/components/hover-card): Pixel preview card that appears on hover, with no fade. Markdown: https://www.ui95.dev/components/hover-card.md Registry: https://www.ui95.dev/r/hover-card.json
- [Input](https://www.ui95.dev/components/input): shadcn input as a sunken 1-bit field. Markdown: https://www.ui95.dev/components/input.md Registry: https://www.ui95.dev/r/input.json
- [Input Group](https://www.ui95.dev/components/input-group): Input or textarea with pixel addons and buttons inside one sunken field. Markdown: https://www.ui95.dev/components/input-group.md Registry: https://www.ui95.dev/r/input-group.json
- [Input Otp](https://www.ui95.dev/components/input-otp): shadcn input-otp reskinned for UI95. Markdown: https://www.ui95.dev/components/input-otp.md Registry: https://www.ui95.dev/r/input-otp.json
- [Item](https://www.ui95.dev/components/item): List row with media, title, description and actions on pixel borders. Markdown: https://www.ui95.dev/components/item.md Registry: https://www.ui95.dev/r/item.json
- [Kbd](https://www.ui95.dev/components/kbd): Keyboard keys as small bevelled pixel keycaps, alone or grouped. Markdown: https://www.ui95.dev/components/kbd.md Registry: https://www.ui95.dev/r/kbd.json
- [Label](https://www.ui95.dev/components/label): shadcn label set in the pixel font. Markdown: https://www.ui95.dev/components/label.md Registry: https://www.ui95.dev/r/label.json
- [Menubar](https://www.ui95.dev/components/menubar): shadcn menubar with Win95 menus. Markdown: https://www.ui95.dev/components/menubar.md Registry: https://www.ui95.dev/r/menubar.json
- [Native Select](https://www.ui95.dev/components/native-select): A native select in the sunken field style with a pixel chevron. Markdown: https://www.ui95.dev/components/native-select.md Registry: https://www.ui95.dev/r/native-select.json
- [Navigation Menu](https://www.ui95.dev/components/navigation-menu): shadcn navigation-menu reskinned for UI95. Markdown: https://www.ui95.dev/components/navigation-menu.md Registry: https://www.ui95.dev/r/navigation-menu.json
- [Pagination](https://www.ui95.dev/components/pagination): Page links built from UI95 buttons with pixel arrows. Markdown: https://www.ui95.dev/components/pagination.md Registry: https://www.ui95.dev/r/pagination.json
- [Plate](https://www.ui95.dev/components/plate): A surface for text that would otherwise sit on the desktop: a raised panel, a sunken readout or a title-bar caption tag. Markdown: https://www.ui95.dev/components/plate.md Registry: https://www.ui95.dev/r/plate.json
- [Popover](https://www.ui95.dev/components/popover): Floating pixel panel with an offset shadow, opened from a trigger. Markdown: https://www.ui95.dev/components/popover.md Registry: https://www.ui95.dev/r/popover.json
- [Progress](https://www.ui95.dev/components/progress): shadcn progress drawn as segmented blocks. Markdown: https://www.ui95.dev/components/progress.md Registry: https://www.ui95.dev/r/progress.json
- [Radio group](https://www.ui95.dev/components/radio-group): shadcn radio group with a pixel ring and dot. Markdown: https://www.ui95.dev/components/radio-group.md Registry: https://www.ui95.dev/r/radio-group.json
- [Resizable](https://www.ui95.dev/components/resizable): shadcn resizable reskinned for UI95. Markdown: https://www.ui95.dev/components/resizable.md Registry: https://www.ui95.dev/r/resizable.json
- [Scroll area](https://www.ui95.dev/components/scroll-area): shadcn scroll area with a dithered track and a beveled thumb. Markdown: https://www.ui95.dev/components/scroll-area.md Registry: https://www.ui95.dev/r/scroll-area.json
- [Select](https://www.ui95.dev/components/select): shadcn select as a Win95 combo box that drops a menu with no animation. Markdown: https://www.ui95.dev/components/select.md Registry: https://www.ui95.dev/r/select.json
- [Separator](https://www.ui95.dev/components/separator): shadcn separator as an etched line. Markdown: https://www.ui95.dev/components/separator.md Registry: https://www.ui95.dev/r/separator.json
- [Sheet](https://www.ui95.dev/components/sheet): Edge panel from any side of the screen that opens in one frame. Markdown: https://www.ui95.dev/components/sheet.md Registry: https://www.ui95.dev/r/sheet.json
- [Sidebar](https://www.ui95.dev/components/sidebar): shadcn sidebar reskinned for UI95. Markdown: https://www.ui95.dev/components/sidebar.md Registry: https://www.ui95.dev/r/sidebar.json
- [Skeleton](https://www.ui95.dev/components/skeleton): Placeholder block filled with a flowing dithered noise field that steps at 10 fps, shares one timer across every skeleton and holds still under reduced motion. Markdown: https://www.ui95.dev/components/skeleton.md Registry: https://www.ui95.dev/r/skeleton.json
- [Slider](https://www.ui95.dev/components/slider): shadcn slider with a dithered range. Markdown: https://www.ui95.dev/components/slider.md Registry: https://www.ui95.dev/r/slider.json
- [Sonner](https://www.ui95.dev/components/sonner): shadcn sonner reskinned for UI95. Markdown: https://www.ui95.dev/components/sonner.md Registry: https://www.ui95.dev/r/sonner.json
- [Spinner](https://www.ui95.dev/components/spinner): Pixel spinner that steps at about 10 fps and holds still under reduced motion. Markdown: https://www.ui95.dev/components/spinner.md Registry: https://www.ui95.dev/r/spinner.json
- [Switch](https://www.ui95.dev/components/switch): shadcn switch as a two-state pixel toggle with a dithered on side. Markdown: https://www.ui95.dev/components/switch.md Registry: https://www.ui95.dev/r/switch.json
- [Table](https://www.ui95.dev/components/table): Data table with pixel rules and a font-pixel header. Markdown: https://www.ui95.dev/components/table.md Registry: https://www.ui95.dev/r/table.json
- [Tabs](https://www.ui95.dev/components/tabs): shadcn tabs as raised bevelled folder tabs joined to a bevelled panel, or an underline. Markdown: https://www.ui95.dev/components/tabs.md Registry: https://www.ui95.dev/r/tabs.json
- [Textarea](https://www.ui95.dev/components/textarea): shadcn textarea as a sunken 1-bit field that grows with its content. Markdown: https://www.ui95.dev/components/textarea.md Registry: https://www.ui95.dev/r/textarea.json
- [Toggle](https://www.ui95.dev/components/toggle): shadcn toggle as a pixel button that stays sunk while pressed. Markdown: https://www.ui95.dev/components/toggle.md Registry: https://www.ui95.dev/r/toggle.json
- [Toggle Group](https://www.ui95.dev/components/toggle-group): A row of pixel toggles for one or many choices. Markdown: https://www.ui95.dev/components/toggle-group.md Registry: https://www.ui95.dev/r/toggle-group.json
- [Tooltip](https://www.ui95.dev/components/tooltip): shadcn tooltip as a cream box with a hard offset shadow. Markdown: https://www.ui95.dev/components/tooltip.md Registry: https://www.ui95.dev/r/tooltip.json

## Blocks

- [CRT screen](https://www.ui95.dev/components/crt-screen): A realistic CRT filter to really take your UI back in time. Fully customizable. Markdown: https://www.ui95.dev/components/crt-screen.md Registry: https://www.ui95.dev/r/crt-screen.json
- [Error dialog](https://www.ui95.dev/components/error-dialog): Stackable error dialogs that cascade diagonally. Markdown: https://www.ui95.dev/components/error-dialog.md Registry: https://www.ui95.dev/r/error-dialog.json
- [Taskbar](https://www.ui95.dev/components/taskbar): Beveled taskbar with a Start button, a start menu built on dropdown-menu, a task area and a clock slot. Markdown: https://www.ui95.dev/components/taskbar.md Registry: https://www.ui95.dev/r/taskbar.json
- [Terminal](https://www.ui95.dev/components/terminal): Terminal screen that types commands after a prompt, prints output and blinks a block cursor. Markdown: https://www.ui95.dev/components/terminal.md Registry: https://www.ui95.dev/r/terminal.json
- [Window](https://www.ui95.dev/components/window): Draggable retro window with a striped title bar, close button and optional status bar. Drags snap to --pixel. Markdown: https://www.ui95.dev/components/window.md Registry: https://www.ui95.dev/r/window.json

## Utilities

- [Dither inks](https://www.ui95.dev/components/dither-inks): Reads theme colors through a canvas probe and observes <html> for theme changes. Markdown: https://www.ui95.dev/components/dither-inks.md Registry: https://www.ui95.dev/r/dither-inks.json
- [Pixel glyphs](https://www.ui95.dev/components/pixel-glyphs): Crisp pixel glyphs shared by the primitives: check, minus, close, chevron, arrow, dot, radio, error and 16x16 folder, document and terminal icons. Markdown: https://www.ui95.dev/components/pixel-glyphs.md Registry: https://www.ui95.dev/r/pixel-glyphs.json
- [Shader mount](https://www.ui95.dev/components/shader-mount): WebGL2 mount for fragment shaders with stepped time, theme color uniforms and the --pixel grid, plus its React wrapper. Markdown: https://www.ui95.dev/components/shader-mount.md Registry: https://www.ui95.dev/r/shader-mount.json
- [Sound](https://www.ui95.dev/components/sound): Tactile synthesized sounds for UI95 components: one shared AudioContext, sounds configured in sounds.json, played by event delegation on each component's data-slot. Markdown: https://www.ui95.dev/components/sound.md Registry: https://www.ui95.dev/r/sound.json
- [usePrefersReducedMotion](https://www.ui95.dev/components/use-prefers-reduced-motion): Hook that reports the prefers-reduced-motion media query and stays true on the server so motion starts off. Markdown: https://www.ui95.dev/components/use-prefers-reduced-motion.md Registry: https://www.ui95.dev/r/use-prefers-reduced-motion.json

## Optional

- [Full docs in one file](https://www.ui95.dev/llms-full.txt): Every component page as markdown, with source.