svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };
diff --git a/packages/templates/nextjs-app/src/components/ui/badge.tsx b/packages/templates/nextjs-app/src/components/ui/badge.tsx
index 70a07811..efc27499 100644
--- a/packages/templates/nextjs-app/src/components/ui/badge.tsx
+++ b/packages/templates/nextjs-app/src/components/ui/badge.tsx
@@ -1,20 +1,22 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+"use client";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
- "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+ "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
{
variants: {
variant: {
- default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
- secondary:
- "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+ secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive:
- "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
- outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+ outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+ ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+ link: "text-primary underline-offset-4 hover:underline",
},
},
defaultVariants: {
@@ -25,15 +27,24 @@ const badgeVariants = cva(
function Badge({
className,
- variant,
- asChild = false,
+ variant = "default",
+ render,
...props
-}: React.ComponentProps<"span"> & VariantProps
& { asChild?: boolean }) {
- const Comp = asChild ? Slot : "span";
-
- return (
-
- );
+}: useRender.ComponentProps<"span"> & VariantProps) {
+ return useRender({
+ defaultTagName: "span",
+ props: mergeProps<"span">(
+ {
+ className: cn(badgeVariants({ variant }), className),
+ },
+ props,
+ ),
+ render,
+ state: {
+ slot: "badge",
+ variant,
+ },
+ });
}
export { Badge, badgeVariants };
diff --git a/packages/templates/nextjs-app/src/components/ui/button.tsx b/packages/templates/nextjs-app/src/components/ui/button.tsx
index eeb3167e..0be1f23b 100644
--- a/packages/templates/nextjs-app/src/components/ui/button.tsx
+++ b/packages/templates/nextjs-app/src/components/ui/button.tsx
@@ -1,26 +1,37 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+"use client";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
- "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
+ default: "bg-primary text-primary-foreground hover:bg-primary/80",
+ outline:
+ "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+ ghost:
+ "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+ destructive:
+ "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
- default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-8",
- icon: "h-10 w-10",
+ default:
+ "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+ xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+ sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+ lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+ icon: "size-8",
+ "icon-xs":
+ "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+ "icon-sm":
+ "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+ "icon-lg": "size-9",
},
},
defaultVariants: {
@@ -30,19 +41,24 @@ const buttonVariants = cva(
},
);
-export interface ButtonProps
- extends React.ButtonHTMLAttributes, VariantProps {
- asChild?: boolean;
+function Button({
+ className,
+ variant = "default",
+ size = "default",
+ ...props
+}: ButtonPrimitive.Props & VariantProps) {
+ return (
+
+ cn(
+ buttonVariants({ variant, size }),
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ {...props}
+ />
+ );
}
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button";
- return (
-
- );
- },
-);
-Button.displayName = "Button";
-
export { Button, buttonVariants };
diff --git a/packages/templates/nextjs-app/src/components/ui/card.tsx b/packages/templates/nextjs-app/src/components/ui/card.tsx
index 4a22652f..df5dc9ab 100644
--- a/packages/templates/nextjs-app/src/components/ui/card.tsx
+++ b/packages/templates/nextjs-app/src/components/ui/card.tsx
@@ -1,56 +1,87 @@
import * as React from "react";
-
import { cn } from "@/lib/utils";
-const Card = React.forwardRef>(
- ({ className, ...props }, ref) => (
+function Card({
+ className,
+ size = "default",
+ ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+ return (
+ img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
- ),
-);
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef
>(
- ({ className, ...props }, ref) => (
-
- ),
-);
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef>(
- ({ className, ...props }, ref) => (
- ) {
+ return (
+
+ );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
- ),
-);
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef>(
- ({ className, ...props }, ref) => (
-
- ),
-);
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef>(
- ({ className, ...props }, ref) => (
-
- ),
-);
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+ );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/packages/templates/nextjs-app/src/components/ui/dropdown-menu.tsx b/packages/templates/nextjs-app/src/components/ui/dropdown-menu.tsx
index a3462cc7..726bc74f 100644
--- a/packages/templates/nextjs-app/src/components/ui/dropdown-menu.tsx
+++ b/packages/templates/nextjs-app/src/components/ui/dropdown-menu.tsx
@@ -1,188 +1,277 @@
"use client";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from "react";
-
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
import { cn } from "@/lib/utils";
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, children, ...props }, ref) => (
-
- {children}
-
-
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, sideOffset = 4, ...props }, ref) => (
-
- ;
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+ return ;
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+ return ;
+}
+
+function DropdownMenuContent({
+ align = "start",
+ alignOffset = 0,
+ side = "bottom",
+ sideOffset = 4,
+ className,
+ ...props
+}: MenuPrimitive.Popup.Props &
+ Pick) {
+ return (
+
+
+
+ cn(
+ "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ {...props}
+ />
+
+
+ );
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+ return ;
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: MenuPrimitive.GroupLabel.Props & {
+ inset?: boolean;
+}) {
+ return (
+
+ cn(
+ "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: MenuPrimitive.Item.Props & {
+ inset?: boolean;
+ variant?: "default" | "destructive";
+}) {
+ return (
+
+ cn(
+ "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+ return ;
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+ inset?: boolean;
+}) {
+ return (
+
+ cn(
+ "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ {...props}
+ >
+ {children}
+
+
+ );
+}
+
+function DropdownMenuSubContent({
+ align = "start",
+ alignOffset = -3,
+ side = "right",
+ sideOffset = 0,
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ cn(
+ "cn-menu-target cn-menu-translucent w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ align={align}
+ alignOffset={alignOffset}
+ side={side}
sideOffset={sideOffset}
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ inset,
+ ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+ inset?: boolean;
+}) {
+ return (
+
+ cn(
+ "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ checked={checked}
+ {...props}
+ >
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+ return ;
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ inset,
+ ...props
+}: MenuPrimitive.RadioItem.Props & {
+ inset?: boolean;
+}) {
+ return (
+
+ cn(
+ "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ {...props}
+ >
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+ return (
+
+ cn(
+ "-mx-1 my-1 h-px bg-border",
+ typeof className === "function" ? className(state) : className,
+ )
+ }
+ {...props}
+ />
+ );
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
-
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, ...props }, ref) => (
-
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, checked, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, ...props }, ref) => (
-
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => {
- return (
-
);
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+}
export {
DropdownMenu,
+ DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
DropdownMenuRadioItem,
- DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
- DropdownMenuGroup,
- DropdownMenuPortal,
DropdownMenuSub,
- DropdownMenuSubContent,
DropdownMenuSubTrigger,
- DropdownMenuRadioGroup,
+ DropdownMenuSubContent,
};
diff --git a/packages/templates/nextjs-app/src/components/ui/input.tsx b/packages/templates/nextjs-app/src/components/ui/input.tsx
index ba2fbccd..43608e36 100644
--- a/packages/templates/nextjs-app/src/components/ui/input.tsx
+++ b/packages/templates/nextjs-app/src/components/ui/input.tsx
@@ -1,24 +1,21 @@
-import * as React from "react";
+"use client";
+import * as React from "react";
+import { Input as InputPrimitive } from "@base-ui/react/input";
import { cn } from "@/lib/utils";
-export interface InputProps extends React.InputHTMLAttributes {}
-
-const Input = React.forwardRef(
- ({ className, type, ...props }, ref) => {
- return (
-
- );
- },
-);
-Input.displayName = "Input";
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
export { Input };
diff --git a/packages/templates/nextjs-app/src/components/ui/label.tsx b/packages/templates/nextjs-app/src/components/ui/label.tsx
index aa56d4e6..ef40e150 100644
--- a/packages/templates/nextjs-app/src/components/ui/label.tsx
+++ b/packages/templates/nextjs-app/src/components/ui/label.tsx
@@ -1,21 +1,19 @@
"use client";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
-
import { cn } from "@/lib/utils";
-const labelVariants = cva(
- "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-const Label = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & VariantProps
->(({ className, ...props }, ref) => (
-
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+ return (
+
+ );
+}
export { Label };
diff --git a/packages/templates/nextjs-app/src/components/ui/skeleton.tsx b/packages/templates/nextjs-app/src/components/ui/skeleton.tsx
index e8d58c09..272cf7a9 100644
--- a/packages/templates/nextjs-app/src/components/ui/skeleton.tsx
+++ b/packages/templates/nextjs-app/src/components/ui/skeleton.tsx
@@ -1,12 +1,10 @@
-import type * as React from "react";
-
import { cn } from "@/lib/utils";
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
);
diff --git a/packages/templates/nextjs-app/src/components/ui/sonner.tsx b/packages/templates/nextjs-app/src/components/ui/sonner.tsx
index b08c2e88..eb7c52ef 100644
--- a/packages/templates/nextjs-app/src/components/ui/sonner.tsx
+++ b/packages/templates/nextjs-app/src/components/ui/sonner.tsx
@@ -3,6 +3,14 @@
import { useTheme } from "next-themes";
import { Toaster as Sonner, type ToasterProps } from "sonner";
+import {
+ CircleCheckIcon,
+ InfoIcon,
+ Loader2Icon,
+ OctagonXIcon,
+ TriangleAlertIcon,
+} from "lucide-react";
+
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme();
@@ -10,13 +18,26 @@ const Toaster = ({ ...props }: ToasterProps) => {
,
+ info: ,
+ warning: ,
+ error: ,
+ loading: ,
+ }}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
+ "--border-radius": "var(--radius)",
} as React.CSSProperties
}
+ toastOptions={{
+ classNames: {
+ toast: "cn-toast",
+ },
+ }}
{...props}
/>
);
diff --git a/packages/templates/react-spa/README.md b/packages/templates/react-spa/README.md
index 1782e5ed..5d1a5ce9 100644
--- a/packages/templates/react-spa/README.md
+++ b/packages/templates/react-spa/README.md
@@ -1,13 +1,13 @@
# Web CSR React Template
-面向浏览器端单页应用的 React 模板，当前基线已经切到 `shadcn/ui + Tailwind CSS v4 + CSS variables`，并保留了 SWR、Zustand、Axios、主题切换和错误兜底这些常用能力。
+面向浏览器端单页应用的 React 模板，当前基线已经切到 `shadcn/ui (Base UI) + Tailwind CSS v4 + CSS variables`，并保留了 SWR、Zustand、Axios、主题切换和错误兜底这些常用能力。
## 技术栈
- React 19
- TypeScript 7
- Vite 8
-- shadcn/ui + Radix UI
+- shadcn/ui (Base UI, base-nova)
- Tailwind CSS v4
- SWR
- Zustand
@@ -99,6 +99,23 @@ const { data, isLoading } = useSWR(demoKey, getDemo);
- `src/styles/tailwind.css` 负责 Tailwind v4 的 `@theme inline` 映射与全局样式层
- `src/lib/toast.ts` 封装 `sonner`，避免页面直接依赖第三方通知 API
+### shadcn/ui Base UI
+
+模板使用 shadcn/ui 的 `base-nova` 风格，保留 `components.json` 和 Tailwind CSS 设计令牌。交互组件基于 `@base-ui/react`；Sonner 继续沿用模板的主题集成与通知接口。
+The template uses shadcn/ui's `base-nova` style with `components.json` and Tailwind CSS design tokens. Interactive components use `@base-ui/react`; Sonner keeps the template's theme integration and notification API.
+
+在生成的项目目录添加组件 / Add components from the generated project directory:
+
+```sh
+pnpm dlx shadcn@latest add dialog
+```
+
+组合组件使用 `render` / Compose components using `render`:
+
+```tsx
+}>Submit
+```
+
## 说明
这是模板仓库，不内置项目级 CI、Git hooks、Docker Compose 或发布流程。工作区治理由 `one-cli` 提供，提交检查使用工作区的 hk 配置；版本管理和发布流程由项目按需配置。
diff --git a/packages/templates/react-spa/components.json b/packages/templates/react-spa/components.json
index 5e782a0a..1de35e7d 100644
--- a/packages/templates/react-spa/components.json
+++ b/packages/templates/react-spa/components.json
@@ -1,12 +1,12 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
- "style": "new-york",
+ "style": "base-nova",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/styles/tailwind.css",
- "baseColor": "slate",
+ "baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
@@ -17,5 +17,9 @@
"lib": "@/lib",
"hooks": "@/hooks"
},
- "iconLibrary": "lucide"
+ "iconLibrary": "lucide",
+ "rtl": false,
+ "menuColor": "default",
+ "menuAccent": "subtle",
+ "registries": {}
}
diff --git a/packages/templates/react-spa/package.json b/packages/templates/react-spa/package.json
index 3897115d..c4f990c0 100644
--- a/packages/templates/react-spa/package.json
+++ b/packages/templates/react-spa/package.json
@@ -15,8 +15,7 @@
"check:fix": "pnpm run lint:fix && pnpm run format:fix"
},
"dependencies": {
- "@radix-ui/react-label": "^2.1.15",
- "@radix-ui/react-slot": "^1.3.3",
+ "@base-ui/react": "^1.8.0",
"@tailwindcss/vite": "^4.3.3",
"axios": "^1.20.0",
"class-variance-authority": "^0.7.1",
@@ -25,10 +24,12 @@
"react": "^19.3.0",
"react-dom": "^19.3.0",
"react-router-dom": "^7.18.4",
+ "shadcn": "^4.21.0",
"sonner": "^2.0.8",
"swr": "^2.5.1",
"tailwind-merge": "^3.7.0",
"tailwindcss": "^4.3.3",
+ "tw-animate-css": "^1.4.0",
"zustand": "^5.0.15"
},
"devDependencies": {
diff --git a/packages/templates/react-spa/src/App.tsx b/packages/templates/react-spa/src/App.tsx
index 8f00064e..0d28b10f 100644
--- a/packages/templates/react-spa/src/App.tsx
+++ b/packages/templates/react-spa/src/App.tsx
@@ -21,7 +21,7 @@ export const App: React.FC = () => {
web-csr-react
- React 19 + shadcn/ui starter
+ React 19 + shadcn/ui (Base UI) starter