{
+ return (
+ (
+ proPlans.at(0)?.planKey ?? null,
+ );
+ const selectedTier = proPlans.find(
+ (plan) => plan.planKey === selectedTierKey,
+ );
+
+ const tierOptions = proPlans.map((plan) => ({
+ label: `${new Intl.NumberFormat().format(
+ plan.refineTokenCount,
+ )} credits / month`,
+ value: plan.planKey,
+ }));
+
+ const handleOnPlanClick = async () => {
+ console.log("handleOnPlanClick");
+ };
+
+ return (
+ ) => (
+
+);
diff --git a/documentation/src/refine-theme/icons/plus-rectangle.tsx b/documentation/src/refine-theme/icons/plus-rectangle.tsx
new file mode 100644
index 0000000000000..5a2000b803b54
--- /dev/null
+++ b/documentation/src/refine-theme/icons/plus-rectangle.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+export const PlusRectangle = (props: SVGProps) => (
+
+);
diff --git a/documentation/src/refine-theme/shadcn/select.tsx b/documentation/src/refine-theme/shadcn/select.tsx
new file mode 100644
index 0000000000000..f401e0a912271
--- /dev/null
+++ b/documentation/src/refine-theme/shadcn/select.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+import {
+ CheckIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+} from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+import { cn } from "./utils";
+
+const Select = ({
+ ...props
+}: React.ComponentProps) => {
+ return ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => {
+ return (
+ span]:line-clamp-1 [&>span]:w-full",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+ );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref,
+ ) => (
+
+
+ );
+};
+
+const PricingCardStarter = () => {
+ const starterPlan = {
+ planKey: "starter",
+ name: "Starter",
+ description: "Get hands-on with the fundamentals.",
+ features: ["Core features for exploration", "Preview your builds"],
+ refineTokenCount: 150,
+ monthlyPriceCents: 0,
+ };
+
+ return (
+
+
+ + Select your plan and{" "} + + get started + . + +
+
+
+
+
+ );
+};
+
+const PricingCardPro = () => {
+ const proPlans = [
+ {
+ planKey: "pro",
+ name: "Pro",
+ description: "Full power for production-grade development.",
+ features: [
+ "Interactive code editor",
+ "One-Click Export",
+ "Hosting with Netlify",
+ "Attach files, specs, or artefacts",
+ ],
+ refineTokenCount: 1500,
+ monthlyPriceCents: 2000,
+ },
+ {
+ planKey: "pro_3k",
+ name: "Pro 3K",
+ description: "Full power for production-grade development.",
+ features: [
+ "Interactive code editor",
+ "One-Click Export & Hosting with Netlify",
+ "Attach files, specs, or artefacts",
+ ],
+ sortKey: 2,
+ refineTokenCount: 3000,
+ monthlyPriceCents: 4000,
+ },
+ {
+ planKey: "pro_6k",
+ name: "Pro 6K",
+ description: "Full power for production-grade development.",
+ tier: "pro",
+ features: [
+ "Interactive code editor",
+ "One-Click Export & Hosting with Netlify",
+ "Attach files, specs, or artefacts",
+ ],
+ sortKey: 3,
+ refineTokenCount: 6000,
+ monthlyPriceCents: 8000,
+ },
+ {
+ planKey: "pro_9k",
+ name: "Pro 9K",
+ description: "Full power for production-grade development.",
+ tier: "pro",
+ features: [
+ "Interactive code editor",
+ "One-Click Export & Hosting with Netlify",
+ "Attach files, specs, or artefacts",
+ ],
+ sortKey: 4,
+ refineTokenCount: 9000,
+ monthlyPriceCents: 12000,
+ },
+ {
+ planKey: "pro_15k",
+ name: "Pro 15K",
+ description: "Full power for production-grade development.",
+ tier: "pro",
+ features: [
+ "Interactive code editor",
+ "One-Click Export & Hosting with Netlify",
+ "Attach files, specs, or artefacts",
+ ],
+ sortKey: 5,
+ refineTokenCount: 15000,
+ monthlyPriceCents: 20000,
+ },
+ {
+ planKey: "pro_20k",
+ name: "Pro 20K",
+ description: "Full power for production-grade development.",
+ tier: "pro",
+ features: [
+ "Interactive code editor",
+ "One-Click Export & Hosting with Netlify",
+ "Attach files, specs, or artefacts",
+ ],
+ sortKey: 6,
+ refineTokenCount: 20000,
+ monthlyPriceCents: 26600,
+ },
+ {
+ planKey: "pro_40k",
+ name: "Pro 40K",
+ description: "Full power for production-grade development.",
+ tier: "pro",
+ features: [
+ "Interactive code editor",
+ "One-Click Export & Hosting with Netlify",
+ "Attach files, specs, or artefacts",
+ ],
+ sortKey: 7,
+ refineTokenCount: 40000,
+ monthlyPriceCents: 53300,
+ },
+ ];
+
+ const [selectedTierKey, setSelectedTierKey] = useState
+
+
+
+
+
+ + {starterPlan?.name} +
+
+
+ + {starterPlan?.description} +
+
+
+
+
+
+ {new Intl.NumberFormat().format(starterPlan?.refineTokenCount || 0)}
+
+ credits
+ /
+ month
+
+
+
+
+
+
+
+ FREE
+
+
+
+
+ {starterPlan?.features?.map((feature, i) => (
+
+
+ 
+
+ ))}
+
+ {feature}
+
+
+ );
+};
+
+const PricingCardEnterprise = () => {
+ const features = useMemo(() => {
+ return [
+ "Custom terms and volume pricing",
+ "Dedicated support team",
+ "SSO (Single Sign-On)",
+ "Option to opt out of data training",
+ "Private Slack channel with direct access",
+ ];
+ }, []);
+
+ const handleOnPlanClick = () => {
+ window.open("mailto:info@refine.dev", "_blank");
+ };
+
+ return (
+
+
+
+
+
+
+ + {proPlans[0]?.name} +
+
+
+ + {selectedTier?.description} +
+
+
+
+
+
+
+
+
+ + + {new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + minimumFractionDigits: 2, + }).format((selectedTier?.monthlyPriceCents ?? 0) / 100)} + + / + month +
+
+
+
+
+
+
+
+
+ {selectedTier?.features?.map((feature, i) => (
+
+
+ 
+
+ ))}
+
+ {feature}
+
+
+ );
+};
+
+const SubscribeButton = ({
+ onClick,
+ buttonText,
+ className,
+}: {
+ onClick: undefined | (() => void);
+ buttonText: string;
+ className?: ClassValue;
+}) => {
+ return (
+
+ );
+};
+
+const MostPopularBadge = () => {
+ const [isMounted, setIsMounted] = useState(false);
+
+ const { colorMode } = useColorMode();
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ if (!isMounted) return null;
+
+ return (
+
+
+
+
+
+
+ + Enterprise +
+
+
+ + Custom solutions for large-scale teams. +
+
+
+
+ + Designed for teams building at scale or with specialized needs. + Enterprise offers tailored solutions with advanced security, support, + and control options. +
+ +
+
+
+
+
+
+
+ {features?.map((feature, i) => (
+
+
+ 
+
+ ))}
+
+ {feature}
+
+ 
+
+ );
+};
diff --git a/documentation/src/refine-theme/icons/minus-rectangle.tsx b/documentation/src/refine-theme/icons/minus-rectangle.tsx
new file mode 100644
index 0000000000000..369231c8f8a30
--- /dev/null
+++ b/documentation/src/refine-theme/icons/minus-rectangle.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+export const MinusRectangle = (props: SVGProps