Layered, fixed-corner Style
PixelArt components
24 categories are available today: Button, Card, Badge, Input, Textarea, Input Group, Checkbox, Switch, Radio Group, Popover, Select, Dialog, Tabs, Tooltip, Sonner, Accordion, Dropdown Menu, Sheet, Drawer, Command, Back to top, Floating actions, Navbar, Navigation dock. This is the full catalog: every category has a working demo in both themes. All 24 categories, the angular Button and the effects passed bounded native-consumer install, build and render checks in three representative configurations (see the install guide for scope and limits). This showcase picks the stepped Shape explicitly; an installed Button follows your shared Shape until you choose one.
FOUR COMPONENTS / INDEPENDENT EFFECTS
Personalization & effects
Choose an effect target or apply to all. Quick presets show the difference between continuous motion and hover. Card effects never activate its nested controls.
DARK / STEPPED
Button
lighting: hover
Link button
lighting: hover
Card
lighting: hover
Configuration / copy from the personalizer
{
"attributes": {
"data-style": "pixelArt",
"data-color-scheme": "dark",
"data-shape": "stepped"
},
"effects": {
"intensity": "subtle",
"lighting": "hover",
"electric": "off",
"crumble": "off",
"vibration": "off",
"paused": false
},
"surfaces": {
"button": {
"intensity": "subtle",
"lighting": "hover",
"electric": "off",
"crumble": "off",
"vibration": "off",
"paused": false
},
"linkButton": {
"intensity": "subtle",
"lighting": "hover",
"electric": "off",
"crumble": "off",
"vibration": "off",
"paused": false
},
"card": {
"intensity": "subtle",
"lighting": "hover",
"electric": "off",
"crumble": "off",
"vibration": "off",
"paused": false
},
"cardLink": {
"intensity": "subtle",
"lighting": "hover",
"electric": "off",
"crumble": "off",
"vibration": "off",
"paused": false
}
},
"style": {
"--mui-pixelart-background": "#10141d",
"--mui-pixelart-surface": "#1d2533",
"--mui-pixelart-elevated": "#2a3547",
"--mui-pixelart-border": "#536478",
"--mui-pixelart-boundary": "#8e9eb5",
"--mui-pixelart-text": "#f4f6fa",
"--mui-pixelart-text-secondary": "#bfcbda",
"--mui-pixelart-primary": "#ffd43b",
"--mui-pixelart-primary-foreground": "#000000",
"--mui-pixelart-interactive": "#4ba8ff",
"--mui-pixelart-font-display": "\"Chakra Petch\", sans-serif",
"--mui-pixelart-font-body": "\"Barlow\", sans-serif",
"--mui-pixelart-font-accent": "\"Pixelify Sans\", monospace",
"--mui-pixelart-ring": "#4ba8ff"
}
}Card
A framed surface with sectioned content, a single-link interactive form and optional effects, in both themes.
Dark theme
Light theme
Try Card / CardLink effects
Open the full personalization playground ↗Card
lighting: hover
Badge
Compact static labels in six variants and both corner Shapes; status always names its state, with an optional decorative glyph and a real link form.
Input
A native text and file field in a decorative frame; external labels, helper text, error, disabled and read-only states, in both themes.
Light theme
Shown on your profile.
Error: enter an address such as [email protected].
Disabled: unavailable on the free tier.
Read-only: assigned by an admin.
Choose an image up to 2 MB.
Dark theme
Shown on your profile.
Error: enter an address such as [email protected].
Disabled: unavailable on the free tier.
Read-only: assigned by an admin.
Choose an image up to 2 MB.
Textarea
A native multiline field in a decorative frame; native resize and scrolling, external labels, helper text, error, disabled and read-only states, in both themes.
Light theme
Shown on your profile.
Error: write at least 20 characters.
Disabled: unavailable on the free tier.
Read-only: written by the system.
Dark theme
Shown on your profile.
Error: write at least 20 characters.
Disabled: unavailable on the free tier.
Read-only: written by the system.
Input Group
A native input or textarea joined to text, icon and button addons in one shared frame: inline and block addons, error, disabled and read-only states, in both themes.
Light theme
Dark theme
Checkbox
A Base UI checkbox with a compact check or dash mark; checked, indeterminate, error and disabled states with external labels and helper text, in both themes.
Light theme
Error: confirm your age to continue.
Dark theme
Error: confirm your age to continue.
Switch
A Base UI switch with a sliding block: on, off, error, disabled and read-only states with external labels, a size and a Shape option, in both themes.
Light theme
Error: accept the terms to continue.
Dark theme
Error: accept the terms to continue.
Radio Group
A Base UI radio group with a single selection shown as a solid dot in a stepped round frame: vertical and horizontal layouts, error, disabled and read-only states with external labels, in both themes.
Light theme
Plan
Billing (horizontal)
Terms (error)
Error: choose a plan to continue.
Locked (disabled)
Read-only
Beveled corners
Dark theme
Plan
Billing (horizontal)
Terms (error)
Error: choose a plan to continue.
Locked (disabled)
Read-only
Beveled corners
Popover
A non-modal Base UI popover with a delegated trigger and a framed, size-bounded popup, opened into a safe scoped host in both themes and both corner Shapes.
Light theme
Dark theme
Select
A Base UI select with a framed trigger and popup, check-marked selection, keyboard and typeahead operation, and error and disabled states, in both themes and both corner Shapes.
Light theme
Dark theme
Dialog
A labelled Base UI modal with focus trapping, scroll locking and a safe scoped host.
Tabs
Framed panel selection with keyboard navigation, horizontal and controlled vertical examples; real navigation stays separate links.
Tooltip
A static, non-interactive hint on keyboard focus or hover, with collision-aware arrow placement.
Sonner
Scoped light/dark feedback with real actions, loading, dismissal and native stacking.
Accordion
Headed disclosure panels with a plus/minus mark: single and multiple expansion, keyboard navigation, a disabled item and long content, in both themes and both corner Shapes.
Light theme
Dark theme
Sheet
An edge-anchored Base UI modal on the right, left, top or bottom with focus trapping, scroll locking, long scrolling content and a safe scoped host or a scoped body portal, in both themes and both corner Shapes.
Light theme
Dark theme
Drawer
A swipe-to-dismiss Base UI drawer attached to the bottom, top, left or right edge, with a drag handle, snap points, focus trapping, scroll locking and long scrolling content, in a safe scoped host or a scoped body portal, in both themes and both corner Shapes.
Light theme
Dark theme
Command
A cmdk command palette with live filtering, arrow-key selection, groups, shortcut labels and a disabled item, shown inline and in a PixelArt Dialog opened into a safe scoped host or a scoped body portal, in both themes and both corner Shapes.
Light theme
Last: none
Dark theme
Last: none
Back to top
A fixed PixelArt icon Button that appears after scrolling past a threshold and returns to the page top, moving focus to the top target. Shown in its own scrollable frame per theme and corner Shape; hidden, it is inert, unfocusable and click-through.
Light theme
Dark theme
Floating actions
A fixed corner disclosure of PixelArt Buttons: a trigger opens a list of button and link actions, Escape, an outside press or an action closes it and returns focus, and collapsed actions are inert. Shown in its own frame per theme and corner Shape.