Get started with Recast
The following guide is intended as a very brief overview of how to get up and running quickly with Recast.
1. Installation
Install the library into your React project via npm.
pnpm install @rpxl/recast2. Create a Component
The below example is a very basic button component primitive that we will use later on to define a theme layer with. This component is not tied to Recast in any way, with the one exception being complex structure components that we will discuss in the Advanced Usage section.
import React, { ButtonHTMLAttributes, forwardRef } from "react";
type Props = ButtonHTMLAttributes<HTMLButtonElement>;
export const ButtonPrimitive = forwardRef<HTMLButtonElement, Props>(
({ ...props }, ref) => <button ref={ref} {...props} />;
);Note: the above example is just a React component, there is no reason this could not be used independently of Recast. Recast is simply syntactic sugar that can be used to cleanly define a theme layer for the component.
2. Add a Theme
Here we import the component primitive we created in the previous step and wrap it with a theme layer. The theme layer is responsible for definining the theme props that can be applied to a component.
import { recast } from "@rpxl/recast";
import { ButtonPrimitive } from "@/components/primitives/button";
export const Button = recast(ButtonPrimitive, {
defaults: {
variants: { variant: "primary", size: "md" },
},
base: [
"inline-flex",
"items-center",
"justify-center",
"rounded-md",
"font-medium",
"ring-offset-background",
"transition-colors",
],
variants: {
variant: {
primary: [
"text-white",
"bg-gradient-to-br",
"from-purple-600",
"to-blue-500",
"hover:bg-gradient-to-bl",
],
secondary: [
"text-white",
"bg-gradient-to-r",
"from-purple-500",
"to-pink-500",
"hover:bg-gradient-to-l",
],
outline: [
"text-gray-900",
"border bg-white",
"border-gray-300",
"dark:bg-gray-800",
"dark:text-white",
"dark:border-gray-600",
"dark:hover:bg-gray-700",
"dark:hover:border-gray-600",
],
},
size: {
sm: "px-3 py-2 text-sm",
md: "text-md px-5 py-2.5",
lg: "px-8 py-3.5 text-lg",
},
},
modifiers: {
pill: "rounded-full px-8",
},
});Note: the example above is using Tailwind CSS (opens in a new tab) for styles but any css classes referencing a stylesheet or css modules could be used here instead. If you are using Tailwind CSS, check out our section on setting up Tailwind CSS with Recast.
4. Usage Examples
By adjusting the theme definition, an endless array of variations can be effortlessly achieved, all without the need to directly modify the component primitive.