Refinery

Introduction

What Refinery is and why it exists.

What is Refinery?

Refinery is a collection of polished, shadcn CLI-compatible components for interfaces that need a little more presence than the usual defaults. It focuses on motion-rich UI patterns, interaction details, and component ideas that feel refined without becoming decorative noise.

The library is built around a simple idea: refine the patterns people already understand, and recreate the ones that can feel more alive. A typing terminal, a voice aura, a tactile card, a testimonial carousel, or a quiet screensaver should still be easy to use. The difference is in the pacing, states, composition, and small details that make the component feel intentional.

Refinery is minimal, but not generic. Components are meant to drop into modern product sites, portfolios, tools, landing pages, and experiments without looking like another neutral rectangle. They keep the structure simple, expose the source code, and leave room for your brand to take over.

Who it is for

Refinery is for builders who already have a React app and want installable UI pieces with a little more craft baked in. It is useful for designers who code, frontend engineers building brand moments, indie hackers shipping polished interfaces, and teams that want motion-forward components they can own.

It is not a locked component framework. You install the source, keep it in your project, and change it like any other local component.

Philosophy

Refinery components are shaped by a few rules:

  • - Start from familiar UI patterns so users do not have to learn the component from scratch.
  • - Use motion to clarify state, rhythm, and attention instead of adding animation for its own sake.
  • - Keep the surface minimal, then make the interaction feel specific.
  • - Prefer editable source over black-box packages.
  • - Make components easy to pull apart, rename, restyle, and compose.

How it works

Refinery publishes components as shadcn CLI-compatible registry items. Each component has a JSON endpoint under the Refinery registry, for example https://refinery.abhii.me/r/terminal-text.json.

You can install a component directly from its full registry URL with "shadcn add", or add the Refinery registry URL template to your components.json and then install components with an @refinery namespace. The CLI copies files into your app, installs declared dependencies, and leaves the component source in your codebase.

Start with Installation if you need a fresh app. Use Registry when your project is ready and you want to pull Refinery components into it.