Quick Start

Get started with Recast

The following guide provides a brief overview of how to get up and running quickly with Recast.

1. Installation

Install Recast into your React project:

npm install @rpxl/recast

If you're using Tailwind CSS, you can also install the Recast Tailwind plugin:

npm install @rpxl/recast-tailwind-plugin

2. Create a Component Primitive

Create a basic button component primitive that we'll use to define a theme layer:

import React, { ButtonHTMLAttributes, forwardRef } from "react";
 
type Props = ButtonHTMLAttributes<HTMLButtonElement>;
 
export const ButtonPrimitive = forwardRef<HTMLButtonElement, Props>(
  ({ ...props }, ref) => <button ref={ref} {...props} />
);

Note: This is a standard React component that can be used independently of Recast. Recast simply provides a clean way to define a theme layer for the component.

3. Add a Theme Layer

Import the component primitive and wrap it with a theme layer using Recast:

import { recast } from "@rpxl/recast";
import { ButtonPrimitive } from "./ButtonPrimitive";
 
// Create the Button component with Recast
export const Button = recast(ButtonPrimitive, {
  // Define the default values
  defaults: {
    variants: { variant: "primary", size: "md" },
  },
  // Define the base styles
  base: "inline-flex items-center justify-center rounded-md font-medium transition-colors",
  // Define the variants
  variants: {
    variant: {
      primary: "bg-blue-500 text-white hover:bg-blue-600",
      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
      outline: "border border-gray-300 text-gray-700 hover:bg-gray-100",
    },
    size: {
      sm: "px-3 py-2 text-sm",
      md: "px-4 py-2 text-base",
      lg: "px-6 py-3 text-lg",
    },
  },
  // Define the modifiers
  modifiers: {
    fullWidth: "w-full",
  },
});

Note: The example above uses Tailwind CSS classes, but Recast works with any CSS classes or CSS-in-JS solution.

4. Usage

Now you can use your themed Button component with various props:

import { Button } from "./Button";
 
function App() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button variant="secondary" size="lg">
        Large Secondary Button
      </Button>
      <Button variant="outline" fullWidth>
        Full Width Outline Button
      </Button>
    </div>
  );
}

This setup allows you to create reusable, themeable components with Recast. The theme layer is completely decoupled from the component primitive, making it easy to adjust styles without modifying the core component logic.

Primary

Size:

Pill:

Secondary

Size:

Pill:

Outline

Size:

Pill:

OverviewTheming