RicoUIBlocks

Build with RicoUI.

Add a component to your React project, try it, and customize the source.

Browse components

Getting started

Choose a component in Browse and try its live preview. Open Component information for its props, usage example, and any extra dependencies. Use Show source code to read the implementation.

Before you start

You need a React project with Tailwind CSS 4 configured. RicoUI components are source files you add to that project and edit directly.

Install with the CLI

Add the component and its dependencies with the shadcn CLI.

Copy the source

Save the files yourself and install any listed dependencies.

Install with the CLI

Choose your package manager in the install bar below the component preview. Copy the command and run it from your project folder. For example:

Terminal
npx shadcn@latest add https://blocks.ricoui.com/r/flip-switch.json

The shadcn CLI adds the component source and its declared dependencies. You do not need to use shadcn/ui components.

Once installed, import and render the component in your project.

Copy source

On a component page, choose Show source code and copy the full source. Save it as a .tsx file in your project, such as src/components/ui/flip-switch.tsx.

If the component lists extra packages under Dependencies in Component information, install them with your package manager. Then import and render the component.

Use the component

After installing with the CLI or copying the source, import the component into a page or another component:

example.tsx
import { FlipSwitch } from "@/components/ui/flip-switch" export function Example() {  return <FlipSwitch aria-label="Enable notifications" />}

Adjust the import path to match the file’s location. The @/ alias is only an example; a relative path works too. Each component’s Usage section shows its named export and example props.

Customization

Check Props in the Component information panel for the available options. Use className where supported, or edit the source to change colors, motion, and markup.

Customize controls only change the live preview. Apply the settings you like as props or styles in your project; copied and installed source keeps the component’s defaults.

The website’s theme switch changes the site, not every component preview. Some components keep a fixed palette or background, so check their props and source when adapting them to your theme.

Accessibility

When adapting a component, keep button and link labels clear and keyboard focus visible. Check that the interaction still works with a keyboard and on touch devices.

If you change the animation, preserve its reduced-motion handling and try it with reduced motion enabled on your device.

Browse components View on GitHub

License

RicoUI’s own code is available under the MIT License. You can use and modify it in personal and commercial projects. Include the copyright and license notice with copies or substantial portions of the code.

Third-party code, fonts, and other assets retain their own licenses and notices. The website’s TechText and PixelReveal effects use a separate license with additional restrictions; it is preserved alongside their source. Templates are separate projects, so check the license in each template’s repository.

HomeAn independent collection of thoughtful React components.
All componentsExplore the collection. Preview, customize, and copy.
TemplatesAstro website templates for portfolios, products, and personal projects.
Brand assetsDownload RicoUI logos and artwork as PNG files.
GitHub RepoA tactile repository card with a blue clasp, vector Octocat badge, warm halftone star button, and layered contact shadows.
Bell ButtonA notification button with a bell, optional count badge, and the beveled light and dark finishes of RicoUI Button.
ButtonA native button in the RicoUI palette, with light and dark themes, six variants, and built-in loading and disabled states.
Dither ProgressA horizontal Dither Pop progress bar with a blue capsule, lightning badge and warm halftone fill that grows denser as progress advances.
Flip SwitchA horizontal Dither Pop rocker switch with a blue housing, warm two-tone paddle and fine halftone details.
MagnifierA precision optical magnifier with a projected metal housing, inertial drag and a curved magnifying lens.
File OrganizerA colorful desktop file box with layered folders, crisp halftone surfaces and a staggered opening sequence.
Contribution GraphA five-level blue contribution heatmap with ASCII details and an interactive canvas companion.
Empty StatesTwelve precision-crafted empty states with porcelain surfaces, recessed panels, chamfered frames and engraved details. Original SVG scenes with layered mechanical animation.
Kubai Empty StatesTwelve miniature product interfaces for empty, unavailable, and failed states. Self-contained SVG with light, dark, and system themes.
Popin PreloaderA pale blue-gray loading screen with a brand-blue sweep, elastic Ready letters, and an upward curtain exit.
Clip Image PreloaderA logo and counter lead into seven clipped photographs, arranged as a responsive montage, then darkened and lifted away.
Step Overlap PreloaderA softly blurred letter entrance and corner counter, followed by white, pale blue, and brand-blue curtains that lift in sequence.
Social CardA stack of social links with luminous gradients, blurred color, and fine grain. Hover or focus to spread the centered cards in both directions; touch devices show an open grid. Includes a standalone HTML version.
ASCII BackgroundBlue ASCII currents drift across light and dark canvases, with ripples that follow your pointer. Available as a React component or a standalone HTML file.