Rubics UI
rubics

Documentation

Rubics UI is a collection of extremely polished, re-usable React Native components inspired by the web's shadcn/ui. We do not distribute via npm packages for the UI components. Instead, we use a CLI to copy the raw source code directly into your project, giving you absolute control over exactly how everything looks and behaves.

Installation

1. Install the CLI

You can install the Rubics CLI globally or locally into your project's dev dependencies.

npm i -g rubics

2. Initialize

Run the init command at the root of your React Native (Expo) project. This will set up your tailwind configuration, theme tokens, and necessary utility files.

rubics init

3. Setup Provider

Wrap your application root with the generated `ThemeProvider` so your components can consume the CSS variables correctly.

import { ThemeProvider } from "@/components/theme-provider";

export default function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

CLI Usage

The primary way to interact with Rubics is via its CLI. This allows you to rapidly scaffold components into your project.

Adding a component

When you add a component, the CLI downloads the `.tsx` file into your `components/ui` directory, and automatically installs any 3rd party dependencies (like `framer-motion` or `lucide-react`) required by the component.

rubics add button

Theming & Dark Mode

Every component uses semantic color tokens (e.g., `bg-background`, `text-primary`, `border-border`). These exist mapped within your `tailwind.config.ts`. To change your primary accent color, simply adjust the `--primary` block inside your `global.css`.

Note: Dark mode is the default and only officially supported tier right now. You can add light mode overrides manually in your stylesheets!

Browse Components →