frontend/nextjs-startup
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace Lucide icons with Remix Icon and add footer social links

Browse Source
This commit is contained in:
Rami Bitar
2026-09-15 11:19:15 -04:00
parent c9017c4510
commit f9550116d7
32 changed files with 116 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.json
+1 -1
View File
@@ -10,7 +10,7 @@
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"iconLibrary": "remixicon",
"rtl": false,
"menuColor": "default",
"menuAccent": "subtle",
components/layout/site-footer.tsx
+16 -1
View File
@@ -1,4 +1,7 @@
import { RiGithubFill, RiTwitterXFill } from "@remixicon/react"
import { Brand } from "@/components/shared/brand"
import { Button } from "@/components/ui/button"
export function SiteFooter() {
return (
@@ -18,8 +21,20 @@ export function SiteFooter() {
<a className="hover:text-foreground" href="#top">Privacy</a>
</div>
</div>
<div className="mt-10 text-[11px] text-muted-foreground">
<div className="mt-10 flex flex-wrap items-center justify-between gap-4 text-[11px] text-muted-foreground">
<span>© 2026 Vertex, Inc. All rights reserved.</span>
<div className="flex items-center gap-2">
<Button asChild variant="ghost" size="icon">
<a href="https://github.com" aria-label="GitHub">
<RiGithubFill className="size-4" aria-hidden="true" />
</a>
</Button>
<Button asChild variant="ghost" size="icon">
<a href="https://x.com" aria-label="X (Twitter)">
<RiTwitterXFill className="size-4" aria-hidden="true" />
</a>
</Button>
</div>
</div>
</footer>
)
components/layout/site-header.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { ChevronDown, ChevronRight } from "lucide-react"
import { RiArrowDownSLine, RiArrowRightSLine } from "@remixicon/react"
import { ThemeToggle } from "@/components/layout/theme-toggle"
import { Brand } from "@/components/shared/brand"
@@ -24,7 +24,7 @@ export function SiteHeader() {
className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
>
{label}
{label === "Products" && <ChevronDown className="size-3" />}
{label === "Products" && <RiArrowDownSLine className="size-3" />}
</a>
))}
</nav>
@@ -34,7 +34,7 @@ export function SiteHeader() {
href="#pricing"
className="hidden h-9 items-center gap-1.5 rounded-sm bg-blue-600 px-4 text-xs font-medium text-white shadow-[0_6px_24px_rgba(23,61,166,.28)] transition hover:bg-blue-500 sm:inline-flex"
>
Get started <ChevronRight className="size-3.5" />
Get started <RiArrowRightSLine className="size-3.5" />
</a>
</div>
</div>
components/layout/theme-toggle.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
"use client"
import { Moon, Sun } from "lucide-react"
import { RiMoonLine, RiSunLine } from "@remixicon/react"
import { useTheme } from "next-themes"
import { useSyncExternalStore } from "react"
@@ -20,7 +20,7 @@ export function ThemeToggle() {
onClick={() => setTheme(isDark ? "light" : "dark")}
>
{mounted ? (
isDark ? <Sun className="size-4" /> : <Moon className="size-4" />
isDark ? <RiSunLine className="size-4" /> : <RiMoonLine className="size-4" />
) : (
<span className="size-4" aria-hidden="true" />
)}
components/sections/developers-section.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { Code2, Gauge, Workflow } from "lucide-react"
import { RiCodeSSlashLine, RiSpeedUpLine, RiFlowChart } from "@remixicon/react"
import { SectionHeading } from "@/components/shared/section-heading"
import { cn } from "@/lib/utils"
@@ -14,17 +14,17 @@ export function DevelopersSection() {
<div className="grid md:grid-cols-3">
{[
{
icon: Code2,
icon: RiCodeSSlashLine,
title: "Change one base URL",
text: "Keep your existing OpenAI-compatible SDK, payloads, and streaming logic.",
},
{
icon: Workflow,
icon: RiFlowChart,
title: "Set a routing policy",
text: "Choose a model directly or let Vertex optimize for cost, quality, or latency.",
},
{
icon: Gauge,
icon: RiSpeedUpLine,
title: "Observe every request",
text: "Trace performance and spend across models, applications, and environments.",
},
components/sections/features/routing-activity.tsx
+6 -6
View File
@@ -1,37 +1,37 @@
"use client"
import { Activity, CircleCheck, Route, ShieldCheck, Zap } from "lucide-react"
import { RiPulseLine, RiCheckboxCircleLine, RiRouteLine, RiShieldCheckLine, RiFlashlightLine } from "@remixicon/react"
import { AnimatedList } from "@/components/ui/animated-list"
import { cn } from "@/lib/utils"
const routingEvents = [
{
icon: <Route className="size-4" />,
icon: <RiRouteLine className="size-4" />,
title: "Routed to Claude Sonnet",
meta: "342ms · 8.2k tokens",
accent: "bg-blue-600/15 text-blue-600 dark:text-blue-400",
},
{
icon: <Zap className="size-4" />,
icon: <RiFlashlightLine className="size-4" />,
title: "Prompt cache hit",
meta: "Saved $0.018 · 42ms",
accent: "bg-amber-500/15 text-amber-500",
},
{
icon: <Activity className="size-4" />,
icon: <RiPulseLine className="size-4" />,
title: "Latency policy applied",
meta: "Gemini Flash · 118ms",
accent: "bg-blue-500/15 text-blue-500",
},
{
icon: <CircleCheck className="size-4" />,
icon: <RiCheckboxCircleLine className="size-4" />,
title: "Fallback completed",
meta: "OpenAI → Mistral · 621ms",
accent: "bg-emerald-500/15 text-emerald-500",
},
{
icon: <ShieldCheck className="size-4" />,
icon: <RiShieldCheckLine className="size-4" />,
title: "Guardrail passed",
meta: "No sensitive data detected",
accent: "bg-cyan-500/15 text-cyan-500",
components/sections/hero-section.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { ArrowRight } from "lucide-react"
import { RiArrowRightLine } from "@remixicon/react"
import { FrameCrosses } from "@/components/shared/frame-crosses"
@@ -25,7 +25,7 @@ export function HeroSection() {
href="#pricing"
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-sm bg-blue-600 px-6 text-sm font-medium text-white shadow-[0_10px_32px_rgba(23,61,166,.32)] transition hover:-translate-y-0.5 hover:bg-blue-500 sm:w-auto"
>
Get your API key <ArrowRight className="size-4" />
Get your API key <RiArrowRightLine className="size-4" />
</a>
<a
href="#models"
components/sections/pricing-section.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
"use client"
import { useState } from "react"
import { Check } from "lucide-react"
import { RiCheckLine } from "@remixicon/react"
import { SectionHeading } from "@/components/shared/section-heading"
import { cn } from "@/lib/utils"
@@ -94,7 +94,7 @@ export function PricingSection() {
<ul className="mt-7 space-y-3">
{plan.features.map((feature) => (
<li key={feature} className="flex items-start gap-2.5 text-sm text-muted-foreground">
<Check className="mt-0.5 size-4 shrink-0 text-blue-600 dark:text-blue-400" />
<RiCheckLine className="mt-0.5 size-4 shrink-0 text-blue-600 dark:text-blue-400" />
{feature}
</li>
))}
components/sections/reliability-section.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { LockKeyhole } from "lucide-react"
import { RiLock2Line } from "@remixicon/react"
import { Ripple } from "@/components/ui/ripple"
import { cn } from "@/lib/utils"
@@ -9,7 +9,7 @@ export function ReliabilitySection() {
<Ripple className="opacity-40" mainCircleSize={180} numCircles={9} />
<div className="relative z-10 mx-auto max-w-3xl">
<div className="mx-auto flex size-12 items-center justify-center rounded-2xl border bg-background shadow-sm">
<LockKeyhole className="size-5 text-blue-600" />
<RiLock2Line className="size-5 text-blue-600" />
</div>
<h2 className="mt-6 text-balance text-3xl font-medium tracking-[-0.045em] sm:text-4xl">
Reliability built into every request.
components/ui/accordion.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import * as React from "react"
import { Accordion as AccordionPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import { RiArrowDownSLine, RiArrowUpSLine } from "@remixicon/react"
function Accordion({
className,
@@ -48,8 +48,8 @@ function AccordionTrigger({
{...props}
>
{children}
<ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
<ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
<RiArrowDownSLine data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
<RiArrowUpSLine data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
)
components/ui/breadcrumb.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import * as React from "react"
import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
import { RiArrowRightSLine, RiMoreLine } from "@remixicon/react"
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
return (
@@ -83,7 +83,7 @@ function BreadcrumbSeparator({
{...props}
>
{children ?? (
<ChevronRightIcon />
<RiArrowRightSLine />
)}
</li>
)
@@ -104,7 +104,7 @@ function BreadcrumbEllipsis({
)}
{...props}
>
<MoreHorizontalIcon
<RiMoreLine
/>
<span className="sr-only">More</span>
</span>
components/ui/calendar.tsx
+4 -4
View File
@@ -10,7 +10,7 @@ import {
import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"
import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
import { RiArrowLeftSLine, RiArrowRightSLine, RiArrowDownSLine } from "@remixicon/react"
function Calendar({
className,
@@ -147,18 +147,18 @@ function Calendar({
Chevron: ({ className, orientation, ...props }) => {
if (orientation === "left") {
return (
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
<RiArrowLeftSLine className={cn("size-4", className)} {...props} />
)
}
if (orientation === "right") {
return (
<ChevronRightIcon className={cn("size-4", className)} {...props} />
<RiArrowRightSLine className={cn("size-4", className)} {...props} />
)
}
return (
<ChevronDownIcon className={cn("size-4", className)} {...props} />
<RiArrowDownSLine className={cn("size-4", className)} {...props} />
)
},
DayButton: ({ ...props }) => (
components/ui/carousel.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import useEmblaCarousel, {
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react"
type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -202,7 +202,7 @@ function CarouselPrevious({
onClick={scrollPrev}
{...props}
>
<ChevronLeftIcon />
<RiArrowLeftSLine />
<span className="sr-only">Previous slide</span>
</Button>
)
@@ -232,7 +232,7 @@ function CarouselNext({
onClick={scrollNext}
{...props}
>
<ChevronRightIcon />
<RiArrowRightSLine />
<span className="sr-only">Next slide</span>
</Button>
)
components/ui/checkbox.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import * as React from "react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { CheckIcon } from "lucide-react"
import { RiCheckLine } from "@remixicon/react"
function Checkbox({
className,
@@ -23,7 +23,7 @@ function Checkbox({
data-slot="checkbox-indicator"
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
>
<CheckIcon
<RiCheckLine
/>
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
components/ui/combobox.tsx
+5 -5
View File
@@ -11,7 +11,7 @@ import {
InputGroupButton,
InputGroupInput,
} from "@/components/ui/input-group"
import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
import { RiArrowDownSLine, RiCloseLine, RiCheckLine } from "@remixicon/react"
const Combobox = ComboboxPrimitive.Root
@@ -31,7 +31,7 @@ function ComboboxTrigger({
{...props}
>
{children}
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
<RiArrowDownSLine className="pointer-events-none size-4 text-muted-foreground" />
</ComboboxPrimitive.Trigger>
)
}
@@ -44,7 +44,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
className={cn(className)}
{...props}
>
<XIcon className="pointer-events-none" />
<RiCloseLine className="pointer-events-none" />
</ComboboxPrimitive.Clear>
)
}
@@ -153,7 +153,7 @@ function ComboboxItem({
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
}
>
<CheckIcon className="pointer-events-none" />
<RiCheckLine className="pointer-events-none" />
</ComboboxPrimitive.ItemIndicator>
</ComboboxPrimitive.Item>
)
@@ -255,7 +255,7 @@ function ComboboxChip({
className="-ml-1 opacity-50 hover:opacity-100"
data-slot="combobox-chip-remove"
>
<XIcon className="pointer-events-none" />
<RiCloseLine className="pointer-events-none" />
</ComboboxPrimitive.ChipRemove>
)}
</ComboboxPrimitive.Chip>
components/ui/command.tsx
+3 -3
View File
@@ -15,7 +15,7 @@ import {
InputGroup,
InputGroupAddon,
} from "@/components/ui/input-group"
import { SearchIcon, CheckIcon } from "lucide-react"
import { RiSearchLine, RiCheckLine } from "@remixicon/react"
function Command({
className,
@@ -81,7 +81,7 @@ function CommandInput({
{...props}
/>
<InputGroupAddon>
<SearchIcon className="size-4 shrink-0 opacity-50" />
<RiSearchLine className="size-4 shrink-0 opacity-50" />
</InputGroupAddon>
</InputGroup>
</div>
@@ -161,7 +161,7 @@ function CommandItem({
{...props}
>
{children}
<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
<RiCheckLine className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
</CommandPrimitive.Item>
)
}
components/ui/context-menu.tsx
+4 -4
View File
@@ -4,7 +4,7 @@ import * as React from "react"
import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { ChevronRightIcon, CheckIcon } from "lucide-react"
import { RiArrowRightSLine, RiCheckLine } from "@remixicon/react"
function ContextMenu({
...props
@@ -117,7 +117,7 @@ function ContextMenuSubTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ml-auto" />
<RiArrowRightSLine className="ml-auto" />
</ContextMenuPrimitive.SubTrigger>
)
}
@@ -157,7 +157,7 @@ function ContextMenuCheckboxItem({
>
<span className="pointer-events-none absolute right-2">
<ContextMenuPrimitive.ItemIndicator>
<CheckIcon
<RiCheckLine
/>
</ContextMenuPrimitive.ItemIndicator>
</span>
@@ -186,7 +186,7 @@ function ContextMenuRadioItem({
>
<span className="pointer-events-none absolute right-2">
<ContextMenuPrimitive.ItemIndicator>
<CheckIcon
<RiCheckLine
/>
</ContextMenuPrimitive.ItemIndicator>
</span>
components/ui/dialog.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { Dialog as DialogPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { XIcon } from "lucide-react"
import { RiCloseLine } from "@remixicon/react"
function Dialog({
...props
@@ -89,7 +89,7 @@ function DialogContent({
className="absolute top-2 right-2"
size="icon-sm"
>
<XIcon
<RiCloseLine
/>
<span className="sr-only">Close</span>
</Button>
components/ui/dropdown-menu.tsx
+4 -4
View File
@@ -4,7 +4,7 @@ import * as React from "react"
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { CheckIcon, ChevronRightIcon } from "lucide-react"
import { RiCheckLine, RiArrowRightSLine } from "@remixicon/react"
function DropdownMenu({
...props
@@ -106,7 +106,7 @@ function DropdownMenuCheckboxItem({
data-slot="dropdown-menu-checkbox-item-indicator"
>
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon
<RiCheckLine
/>
</DropdownMenuPrimitive.ItemIndicator>
</span>
@@ -149,7 +149,7 @@ function DropdownMenuRadioItem({
data-slot="dropdown-menu-radio-item-indicator"
>
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon
<RiCheckLine
/>
</DropdownMenuPrimitive.ItemIndicator>
</span>
@@ -232,7 +232,7 @@ function DropdownMenuSubTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ml-auto" />
<RiArrowRightSLine className="ml-auto" />
</DropdownMenuPrimitive.SubTrigger>
)
}
components/ui/input-otp.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { cn } from "@/lib/utils"
import { MinusIcon } from "lucide-react"
import { RiSubtractLine } from "@remixicon/react"
function InputOTP({
className,
@@ -78,7 +78,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
role="separator"
{...props}
>
<MinusIcon
<RiSubtractLine
/>
</div>
)
components/ui/menubar.tsx
+4 -4
View File
@@ -4,7 +4,7 @@ import * as React from "react"
import { Menubar as MenubarPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { CheckIcon, ChevronRightIcon } from "lucide-react"
import { RiCheckLine, RiArrowRightSLine } from "@remixicon/react"
function Menubar({
className,
@@ -130,7 +130,7 @@ function MenubarCheckboxItem({
>
<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
<MenubarPrimitive.ItemIndicator>
<CheckIcon
<RiCheckLine
/>
</MenubarPrimitive.ItemIndicator>
</span>
@@ -159,7 +159,7 @@ function MenubarRadioItem({
>
<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
<MenubarPrimitive.ItemIndicator>
<CheckIcon
<RiCheckLine
/>
</MenubarPrimitive.ItemIndicator>
</span>
@@ -242,7 +242,7 @@ function MenubarSubTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ml-auto size-4" />
<RiArrowRightSLine className="ml-auto size-4" />
</MenubarPrimitive.SubTrigger>
)
}
components/ui/message-scroller.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import {
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { ArrowDownIcon } from "lucide-react"
import { RiArrowDownLine } from "@remixicon/react"
function MessageScrollerProvider(
props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>
@@ -107,7 +107,7 @@ function MessageScrollerButton({
>
{children ?? (
<>
<ArrowDownIcon
<RiArrowDownLine
/>
<span className="sr-only">
{direction === "end" ? "Scroll to end" : "Scroll to start"}
components/ui/native-select.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import * as React from "react"
import { cn } from "@/lib/utils"
import { ChevronDownIcon } from "lucide-react"
import { RiArrowDownSLine } from "@remixicon/react"
type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
size?: "sm" | "default"
@@ -27,7 +27,7 @@ function NativeSelect({
className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
{...props}
/>
<ChevronDownIcon className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon" />
<RiArrowDownSLine className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon" />
</div>
)
}
components/ui/navigation-menu.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority"
import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { ChevronDownIcon } from "lucide-react"
import { RiArrowDownSLine } from "@remixicon/react"
function NavigationMenu({
className,
@@ -74,7 +74,7 @@ function NavigationMenuTrigger({
{...props}
>
{children}{" "}
<ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
<RiArrowDownSLine className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
</NavigationMenuPrimitive.Trigger>
)
}
components/ui/pagination.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import * as React from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
import { RiArrowLeftSLine, RiArrowRightSLine, RiMoreLine } from "@remixicon/react"
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
return (
@@ -73,7 +73,7 @@ function PaginationPrevious({
className={cn("pl-1.5!", className)}
{...props}
>
<ChevronLeftIcon data-icon="inline-start" />
<RiArrowLeftSLine data-icon="inline-start" />
<span className="hidden sm:block">{text}</span>
</PaginationLink>
)
@@ -92,7 +92,7 @@ function PaginationNext({
{...props}
>
<span className="hidden sm:block">{text}</span>
<ChevronRightIcon data-icon="inline-end" />
<RiArrowRightSLine data-icon="inline-end" />
</PaginationLink>
)
}
@@ -111,7 +111,7 @@ function PaginationEllipsis({
)}
{...props}
>
<MoreHorizontalIcon
<RiMoreLine
/>
<span className="sr-only">More pages</span>
</span>
components/ui/select.tsx
+5 -5
View File
@@ -4,7 +4,7 @@ import * as React from "react"
import { Select as SelectPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
import { RiArrowDownSLine, RiCheckLine, RiArrowUpSLine } from "@remixicon/react"
function Select({
...props
@@ -51,7 +51,7 @@ function SelectTrigger({
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
<RiArrowDownSLine className="pointer-events-none size-4 text-muted-foreground" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
)
@@ -119,7 +119,7 @@ function SelectItem({
>
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="pointer-events-none" />
<RiCheckLine className="pointer-events-none" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -153,7 +153,7 @@ function SelectScrollUpButton({
)}
{...props}
>
<ChevronUpIcon
<RiArrowUpSLine
/>
</SelectPrimitive.ScrollUpButton>
)
@@ -172,7 +172,7 @@ function SelectScrollDownButton({
)}
{...props}
>
<ChevronDownIcon
<RiArrowDownSLine
/>
</SelectPrimitive.ScrollDownButton>
)
components/ui/sheet.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { Dialog as SheetPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { XIcon } from "lucide-react"
import { RiCloseLine } from "@remixicon/react"
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />
@@ -75,7 +75,7 @@ function SheetContent({
className="absolute top-3 right-3"
size="icon-sm"
>
<XIcon
<RiCloseLine
/>
<span className="sr-only">Close</span>
</Button>
components/ui/sidebar.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
import { PanelLeftIcon } from "lucide-react"
import { RiSideBarLine } from "@remixicon/react"
const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
@@ -270,7 +270,7 @@ function SidebarTrigger({
}}
{...props}
>
<PanelLeftIcon />
<RiSideBarLine />
<span className="sr-only">Toggle Sidebar</span>
</Button>
)
components/ui/sonner.tsx
+6 -6
View File
@@ -2,7 +2,7 @@
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
import { RiCheckboxCircleLine, RiInformationLine, RiAlertLine, RiCloseCircleLine, RiLoader4Line } from "@remixicon/react"
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
@@ -13,19 +13,19 @@ const Toaster = ({ ...props }: ToasterProps) => {
className="toaster group"
icons={{
success: (
<CircleCheckIcon className="size-4" />
<RiCheckboxCircleLine className="size-4" />
),
info: (
<InfoIcon className="size-4" />
<RiInformationLine className="size-4" />
),
warning: (
<TriangleAlertIcon className="size-4" />
<RiAlertLine className="size-4" />
),
error: (
<OctagonXIcon className="size-4" />
<RiCloseCircleLine className="size-4" />
),
loading: (
<Loader2Icon className="size-4 animate-spin" />
<RiLoader4Line className="size-4 animate-spin" />
),
}}
style={
components/ui/spinner.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import { cn } from "@/lib/utils"
import { Loader2Icon } from "lucide-react"
import { RiLoader4Line } from "@remixicon/react"
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
function Spinner({ className, ...props }: React.ComponentProps<typeof RiLoader4Line>) {
return (
<Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
<RiLoader4Line data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
)
}
package.json
+1 -1
View File
@@ -11,6 +11,7 @@
"dependencies": {
"@base-ui/react": "^1.6.0",
"@next/swc-wasm-web": "16.2.10",
"@remixicon/react": "^4.9.0",
"@shadcn/react": "^0.1.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -18,7 +19,6 @@
"cobe": "^0.6.4",
"embla-carousel-react": "^8.6.0",
"input-otp": "^1.4.2",
"lucide-react": "^1.22.0",
"motion": "^13.3.0",
"next": "16.2.10",
"next-themes": "^0.4.6",
yarn.lock
+10 -10
View File
@@ -2392,6 +2392,15 @@ __metadata:
languageName: node
linkType: hard
"@remixicon/react@npm:^4.9.0":
version: 4.9.0
resolution: "@remixicon/react@npm:4.9.0"
peerDependencies:
react: ">=18.2.0"
checksum: 10c0/91bbadb677f45cf8b6687fdf9d273511fddb4e862f1da6c11bc7932acb578bcb26ae5b9e1eb62143a4e916b71797739a36d689866d5b0949f0f0f22c1684cb96
languageName: node
linkType: hard
"@rtsao/scc@npm:^1.1.0":
version: 1.1.0
resolution: "@rtsao/scc@npm:1.1.0"
@@ -6211,15 +6220,6 @@ __metadata:
languageName: node
linkType: hard
"lucide-react@npm:^1.22.0":
version: 1.22.0
resolution: "lucide-react@npm:1.22.0"
peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
checksum: 10c0/6d7066773c2d5f1a3e8f274d4544d2e6fb133f284c843ce89c041c7d2d6e265e5bed48c057724553405bdc4c943547642ceac25c2b807d5efbb1e75d0127de92
languageName: node
linkType: hard
"magic-string@npm:^0.30.21":
version: 0.30.21
resolution: "magic-string@npm:0.30.21"
@@ -6494,6 +6494,7 @@ __metadata:
dependencies:
"@base-ui/react": "npm:^1.6.0"
"@next/swc-wasm-web": "npm:16.2.10"
"@remixicon/react": "npm:^4.9.0"
"@shadcn/react": "npm:^0.1.0"
"@tailwindcss/postcss": "npm:^4"
"@types/node": "npm:^20"
@@ -6508,7 +6509,6 @@ __metadata:
eslint: "npm:^9"
eslint-config-next: "npm:16.2.9"
input-otp: "npm:^1.4.2"
lucide-react: "npm:^1.22.0"
motion: "npm:^13.3.0"
next: "npm:16.2.10"
next-themes: "npm:^0.4.6"