GNOME Aesthetics
Beautifully crafted components following the GNOME Human Interface Guidelines.
Introducing gnome-ui v1.945+ components
Build beautiful interfaces
with gnome-ui.
Production-ready components with GNOME aesthetics and Ubuntu tokens. Accessible, themeable, and built for real teams shipping real products.
zsh — gnome-ui
❯npm install gnome-ui
❯import { Button } from 'gnome-ui/button'
45+Components
100%Accessible
Base UIBased
TypeScriptFirst-class
MITLicense
— Why gnome-ui
Everything you need to ship fast.
Built on proven foundations, designed for production from day one.
Modular Architecture
Built on top of Base UI primitives for maximum flexibility and control.
Accessible by Default
Adheres to WAI-ARIA standards, providing a seamless experience for everyone.
Blazing Fast
Optimized for speed, tiny bundle impact, and production-grade performance.
TypeScript Native
Strictly typed components for a robust and safe development workflow.
Ultra Responsive
Fluid layouts that look sharp on phones, desktops, and ultrawide displays.
✦ NewJust shipped
2 new components: Textarea & Label
Same GNOME token system. Zero configuration.
Textarea3 variants
Label3 variants
— Component library
View all 45+Featured Components
A focused library of high-quality, production-ready components.
Action
Button
Versatile button system with multiple variants and states.
View docsgnome-ui
Overlay
Dialog
Modal windows for focused interactions.
View docsgnome-ui
Overlay
Popover
Contextual information that floats near its anchor.
View docsgnome-ui
Input
Form
Accessible, composable fields for real product flows.
View docsgnome-ui
Navigation
Tabs
Switch between views with clear and predictable interactions.
View docsgnome-ui
Feedback
Toast
Non-intrusive notifications with queue and priority support.
View docsgnome-ui
Input
Select
Searchable dropdown with keyboard navigation.
View docsgnome-ui
Overlay
Tooltip
Contextual hints with accessible focus triggers.
View docsgnome-ui
Input
Slider
Range input with ARIA roles and keyboard control.
View docsgnome-ui
— The foundation
The full power of GNOME in your React app.
Refined details, accessibility-first behavior, and consistent tokenized styling from base primitives to production workflows.
- Accessible and compliant (WCAG 2.1)
- Customizable through utility classes
- Light and dark mode out of the box
- Fluid, native-feeling interactions
- Modular architecture powered by Base UI
Create an account
Enter your email below to create your account.
Or continue with
By clicking continue, you agree to our Terms of Service and Privacy Policy.
— Open source
Start building today.
Free, open source, and built for the community. Install in seconds, customize to fit your brand.