Getting Started
Learn how to use Ritro UI components and customize it in your projects.
What is Ritro UI?
Ritro UI is a modern, CSS-agnostic React component library built for customization, accessibility, and developer flexibility. Inspired by the philosophy of unopinionated design, Ritro UI gives you complete control over the styling and theming of components, allowing seamless integration into any design system or framework—without being locked into a specific CSS utility or theme.
Whether you're using Tailwind, CSS Modules, Vanilla CSS, or a custom solution, Ritro UI adapts to your stack while offering a powerful set of highly customizable components.
Designed for React and Next.js, Ritro UI helps you build consistent, responsive, and accessible interfaces—fast.
Framework Agnostic
Ritro UI components are designed to be completely framework-agnostic. While we showcase them with a neobrutalism design system in our documentation, the core components themselves have no built-in styles or CSS framework dependencies.
This means you can use them with any CSS framework or styling approach of your choice:
- Tailwind CSS
- CSS Modules
- Styled Components
- Emotion
- Plain CSS
- Or any other styling solution
Inspired by Developer Needs:
We've moved beyond strict neobrutalism to embrace flexibility. You can still achieve bold and unique interfaces, but now with the power to define your own design language.
Our goal is to provide developers with components that break away from the sameness of modern web design while still adhering to best practices for accessibility and usability.
Solving Pain Points
- Design Fatigue: Say goodbye to cookie-cutter UI kits. Ritro UI provides the structure, you define the style.
- Customization Without Complexity Change spacing, colors, fonts, or even entire themes with minimal effort.
- Faster DevelopmentPrebuilt logic and accessibility features let you ship faster, without reinventing the wheel.
- Accessibility First All components follow best practices for keyboard navigation, ARIA roles, and screen reader support out of the box.
Key Features
⚛️ React & Next.js Ready
Seamlessly integrates with React and Next.js projects, with full TypeScript support
🎨 CSS-Agnostic & Style-Free
Works with any styling methodology: Tailwind, Sass, CSS-in-JS, Vanilla CSS, or Design Tokens.
🧩 50+ Headless Components
A complete collection of reusable UI components—from buttons and modals to complex forms.
🛠️ Customizable API
Component props are intentionally minimal and extendable, enabling full customization with your own styles and markup.
♿ Accessible by Default
Built-in focus management, keyboard navigation, and ARIA support.
Easy to Use and customizable
Ritro UI is designed to be intuitive and easy to use, even for developers who are new to React or Next.js. Build components based on your own design system, for example - Let's show you how to customize the components with Neurobrutalism Design.
Component Preview
1import {2 DefaultButton,3 ContainedButton,4 OutlinedButton,5 GhostButton,6 LinkButton,7 DisabledButton,8 SubtleButton,9 RoundedButton,10 ButtonWithArrowIcon,11 } from './neoDesignComponents.ts'1213 export default function App() {14 return (15 <div className="flex flex-col gap-4 p-4">16 <div className="flex gap-2">17 <DefaultButton> Default Button </DefaultButton>18 <ContainedButton> Contained Button</ContainedButton>19 <OutlinedButton> Outlined Button </OutlinedButton>20 <GhostButton> Ghost Button </GhostButton>21 <LinkButton>Link Button </LinkButton>22 <DisabledButton> Disabled Button </DisabledButton>23 <SubtleButton>Subtle Button</SubtleButton>24 <RoundedButton>Rounded Button </RoundedButton>25 </div>26 </div>27 )28 }