mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
Merge branch 'main' into canary
This commit is contained in:
Junior Garcia
commit
9d948e748c
@ -16,13 +16,21 @@ export default function DocsLayout({children}: DocsLayoutProps) {
|
|||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
|
className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
|
||||||
>
|
>
|
||||||
<Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
|
<Image
|
||||||
|
removeWrapper
|
||||||
|
alt="docs left background"
|
||||||
|
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
|
className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
|
||||||
>
|
>
|
||||||
<Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
|
<Image
|
||||||
|
removeWrapper
|
||||||
|
alt="docs right background"
|
||||||
|
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScriptProviders />
|
<ScriptProviders />
|
||||||
|
|||||||
@ -21,15 +21,23 @@ export default function DocsLayout({children}: DocsLayoutProps) {
|
|||||||
</main>
|
</main>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
|
className="fixed hidden dark:md:block dark:opacity-100 -bottom-[30%] -left-[30%] z-0"
|
||||||
>
|
>
|
||||||
<Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
|
<Image
|
||||||
|
removeWrapper
|
||||||
|
alt="docs left background"
|
||||||
|
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
|
className="fixed hidden dark:md:block dark:opacity-70 -top-[50%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
|
||||||
>
|
>
|
||||||
<Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
|
<Image
|
||||||
|
removeWrapper
|
||||||
|
alt="docs right background"
|
||||||
|
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScriptProviders />
|
<ScriptProviders />
|
||||||
|
|||||||
@ -36,13 +36,21 @@ export default function FigmaPage() {
|
|||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
|
className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
|
||||||
>
|
>
|
||||||
<Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
|
<Image
|
||||||
|
removeWrapper
|
||||||
|
alt="docs left background"
|
||||||
|
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
|
className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
|
||||||
>
|
>
|
||||||
<Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
|
<Image
|
||||||
|
removeWrapper
|
||||||
|
alt="docs right background"
|
||||||
|
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png "
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScriptProviders />
|
<ScriptProviders />
|
||||||
|
|||||||
@ -13,7 +13,7 @@ import {Community} from "@/components/marketing/community";
|
|||||||
import Support from "@/components/marketing/support";
|
import Support from "@/components/marketing/support";
|
||||||
import landingContent from "@/content/landing";
|
import landingContent from "@/content/landing";
|
||||||
import {Sponsors} from "@/components/marketing/sponsors";
|
import {Sponsors} from "@/components/marketing/sponsors";
|
||||||
import {NextUIProSection} from "@/components/marketing/nextui-pro-section";
|
import {NextUIProSection} from "@/components/marketing/nextui-pro-section/nextui-pro-section";
|
||||||
|
|
||||||
export default async function Home() {
|
export default async function Home() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -9,6 +9,7 @@ import {cn} from "@nextui-org/react";
|
|||||||
|
|
||||||
interface MarqueeProps {
|
interface MarqueeProps {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
wrapperClassName?: string;
|
||||||
reverse?: boolean;
|
reverse?: boolean;
|
||||||
shadow?: boolean;
|
shadow?: boolean;
|
||||||
duration?: number;
|
duration?: number;
|
||||||
@ -20,6 +21,7 @@ interface MarqueeProps {
|
|||||||
|
|
||||||
export const Marquee = ({
|
export const Marquee = ({
|
||||||
className,
|
className,
|
||||||
|
wrapperClassName,
|
||||||
reverse,
|
reverse,
|
||||||
duration = 40,
|
duration = 40,
|
||||||
shadow = false,
|
shadow = false,
|
||||||
@ -59,14 +61,18 @@ export const Marquee = ({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={cn("flex w-max items-stretch gap-[--gap]", {
|
className={cn(
|
||||||
"flex-col": vertical,
|
"flex w-max items-stretch gap-[--gap]",
|
||||||
"h-full": vertical,
|
{
|
||||||
"animate-scrolling-banner": !vertical,
|
"flex-col": vertical,
|
||||||
"animate-scrolling-banner-vertical": vertical,
|
"h-full": vertical,
|
||||||
"[animation-direction:reverse]": reverse,
|
"animate-scrolling-banner": !vertical,
|
||||||
"hover:[animation-play-state:paused]": pauseOnHover,
|
"animate-scrolling-banner-vertical": vertical,
|
||||||
})}
|
"[animation-direction:reverse]": reverse,
|
||||||
|
"hover:[animation-play-state:paused]": pauseOnHover,
|
||||||
|
},
|
||||||
|
wrapperClassName,
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{Children.map(children, (child) =>
|
{Children.map(children, (child) =>
|
||||||
child && typeof child === "object" && "type" in child ? cloneElement(child) : child,
|
child && typeof child === "object" && "type" in child ? cloneElement(child) : child,
|
||||||
|
|||||||
@ -1,182 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {Button, Chip} from "@nextui-org/react";
|
|
||||||
import {useEffect, useState} from "react";
|
|
||||||
import {useTheme} from "next-themes";
|
|
||||||
|
|
||||||
import {sectionWrapper, title, titleWrapper, subtitle} from "../primitives";
|
|
||||||
|
|
||||||
import Marquee from "./marquee";
|
|
||||||
|
|
||||||
import {useIsMobile} from "@/hooks/use-media-query";
|
|
||||||
|
|
||||||
export const NextUIProSection = () => {
|
|
||||||
const [mounted, setMounted] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setMounted(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const isMobile = useIsMobile();
|
|
||||||
const {theme} = useTheme();
|
|
||||||
const isDarkMode = theme === "dark";
|
|
||||||
|
|
||||||
let imgSrc: string;
|
|
||||||
|
|
||||||
if (isDarkMode) {
|
|
||||||
imgSrc = isMobile
|
|
||||||
? "/images/nextuipro-section-background@mobile.webp"
|
|
||||||
: "/images/nextuipro-section-background.webp";
|
|
||||||
} else {
|
|
||||||
imgSrc = isMobile
|
|
||||||
? "/images/nextuipro-section-background-light@mobile.webp"
|
|
||||||
: "/images/nextuipro-section-background-light.webp";
|
|
||||||
}
|
|
||||||
|
|
||||||
const mobileClassName: string = isDarkMode
|
|
||||||
? "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,_0.8)_50%,_rgba(0,0,0,1)_100%)]"
|
|
||||||
: "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(0,0,0,_0)_5%,_rgba(255,255,255,_0.8)_50%,_rgba(255,255,255,1)_100%)]";
|
|
||||||
|
|
||||||
const webClassName: string = isDarkMode
|
|
||||||
? "h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]"
|
|
||||||
: "h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.9)_40%,_rgba(255,255,255,1)_100%)]";
|
|
||||||
|
|
||||||
if (!mounted) return null;
|
|
||||||
|
|
||||||
const CheckmarkIcon = () => (
|
|
||||||
<svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M1 6.4L4.14286 10L12 1"
|
|
||||||
stroke="#006FEE"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className={sectionWrapper({class: "mt-16 lg:mt-44 overflow-hidden"})}>
|
|
||||||
<div className="flex flex-col gap-8 min-h-[480px]">
|
|
||||||
<div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
|
|
||||||
<Chip
|
|
||||||
classNames={{
|
|
||||||
base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
|
|
||||||
content: "text-tiny font-semibold",
|
|
||||||
}}
|
|
||||||
color="primary"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
PRO
|
|
||||||
</Chip>
|
|
||||||
<div className={titleWrapper({class: "mt-2 inline md:block"})}>
|
|
||||||
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
|
|
||||||
Ship
|
|
||||||
</h1>
|
|
||||||
<h1
|
|
||||||
className={title({
|
|
||||||
size: "lg",
|
|
||||||
color: "blue",
|
|
||||||
class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
faster
|
|
||||||
</h1>
|
|
||||||
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
|
|
||||||
with
|
|
||||||
</h1>
|
|
||||||
<div className="flex flex-col sm:flex-row">
|
|
||||||
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
|
|
||||||
beautiful
|
|
||||||
</h1>
|
|
||||||
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
|
|
||||||
components
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className={subtitle({class: "pr-12 text-foreground-500"})}>
|
|
||||||
Premade templates of over 210+ beautiful and responsive components, professionally
|
|
||||||
created by the team behind NextUI.
|
|
||||||
</p>
|
|
||||||
<div className="mt-4 text-foreground-600 font-medium">
|
|
||||||
<div className="flex gap-x-4 items-center">
|
|
||||||
<CheckmarkIcon />
|
|
||||||
210+ Components
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-x-4 items-center">
|
|
||||||
<CheckmarkIcon />
|
|
||||||
Lifetime Access
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-x-4 items-center">
|
|
||||||
<CheckmarkIcon />
|
|
||||||
Free Updates
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-x-4 items-center">
|
|
||||||
<CheckmarkIcon />
|
|
||||||
Figma Files Included
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-4">
|
|
||||||
<Button
|
|
||||||
as={"a"}
|
|
||||||
className="px-6 flex items-center"
|
|
||||||
color="primary"
|
|
||||||
href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Explore NextUI Pro
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
height="21"
|
|
||||||
viewBox="0 0 20 21"
|
|
||||||
width="20"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
|
|
||||||
stroke="white"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeMiterlimit="10"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M2.91602 10.5H16.941"
|
|
||||||
stroke="white"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeMiterlimit="10"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="overflow-hidden">
|
|
||||||
<Marquee
|
|
||||||
vertical
|
|
||||||
className="h-78 hidden md:flex w-screen mt-4 md:absolute md:top-0 md:inset-0 isolate md:max-h-dvh"
|
|
||||||
duration={isMobile ? 240 : 60}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
alt="Hero Background"
|
|
||||||
className="w-full"
|
|
||||||
height={3255}
|
|
||||||
loading="lazy"
|
|
||||||
src={imgSrc}
|
|
||||||
width={1920}
|
|
||||||
/>
|
|
||||||
</Marquee>
|
|
||||||
<div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20">
|
|
||||||
<div className={mobileClassName} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="absolute hidden md:block md:inset-0 md:pointer-events-none md:top-0 md:z-20">
|
|
||||||
<div className={webClassName} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export {NextUIProSection} from "./nextui-pro-section";
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import {Button} from "@nextui-org/react";
|
||||||
|
|
||||||
|
export const NextUIProButton = () => (
|
||||||
|
<Button
|
||||||
|
as={"a"}
|
||||||
|
className="px-6 flex items-center"
|
||||||
|
color="primary"
|
||||||
|
href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Explore NextUI Pro
|
||||||
|
<svg fill="none" height="21" viewBox="0 0 20 21" width="20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
|
||||||
|
stroke="white"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeMiterlimit="10"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M2.91602 10.5H16.941"
|
||||||
|
stroke="white"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeMiterlimit="10"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import {Chip} from "@nextui-org/react";
|
||||||
|
|
||||||
|
export const NextUIProChip = () => (
|
||||||
|
<Chip
|
||||||
|
classNames={{
|
||||||
|
base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
|
||||||
|
content: "text-tiny font-semibold",
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
PRO
|
||||||
|
</Chip>
|
||||||
|
);
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {useTheme} from "next-themes";
|
||||||
|
import NextImage from "next/image";
|
||||||
|
import {useEffect, useState} from "react";
|
||||||
|
|
||||||
|
export const NextUIProImage = () => {
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
const {theme} = useTheme();
|
||||||
|
const isDarkMode = theme === "dark";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
let imgSrc = isDarkMode
|
||||||
|
? "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextuipro-section-background.webp"
|
||||||
|
: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextuipro-section-background-light.webp";
|
||||||
|
|
||||||
|
if (!mounted) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NextImage
|
||||||
|
alt="Hero Background"
|
||||||
|
className="opacity-0 animate-fadeIn"
|
||||||
|
height={3255}
|
||||||
|
quality={100}
|
||||||
|
src={imgSrc}
|
||||||
|
width={1920}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
import {memo} from "react";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
import {sectionWrapper, title, titleWrapper, subtitle} from "../../primitives";
|
||||||
|
import Marquee from "../marquee";
|
||||||
|
|
||||||
|
import {NextUIProButton} from "./nextui-pro-button";
|
||||||
|
import {NextUIProChip} from "./nextui-pro-chip";
|
||||||
|
import {NextUIProImage} from "./nextui-pro-image";
|
||||||
|
|
||||||
|
const CheckmarkIcon = memo(() => (
|
||||||
|
<svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M1 6.4L4.14286 10L12 1"
|
||||||
|
stroke="#006FEE"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
));
|
||||||
|
|
||||||
|
CheckmarkIcon.displayName = "CheckmarkIcon";
|
||||||
|
|
||||||
|
export const NextUIProSection = () => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className={sectionWrapper({
|
||||||
|
class: "flex-row items-end relative mt-16 lg:mt-44 overflow-hidden",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div className="flex min-h-[480px]">
|
||||||
|
<div className="w-full w-full relative z-30 flex h-full flex-col items-start justify-center leading-8 pt-4">
|
||||||
|
<NextUIProChip />
|
||||||
|
<div className={titleWrapper({class: "mt-2 inline md:block"})}>
|
||||||
|
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
|
||||||
|
Ship
|
||||||
|
</h1>
|
||||||
|
<h1
|
||||||
|
className={title({
|
||||||
|
size: "lg",
|
||||||
|
color: "blue",
|
||||||
|
class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
faster
|
||||||
|
</h1>
|
||||||
|
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
|
||||||
|
with
|
||||||
|
</h1>
|
||||||
|
<div className="flex flex-col sm:flex-row">
|
||||||
|
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
|
||||||
|
beautiful
|
||||||
|
</h1>
|
||||||
|
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
|
||||||
|
components
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className={subtitle({class: "pr-12 text-foreground-500"})}>
|
||||||
|
Premade templates of over 210+ beautiful and responsive components, professionally
|
||||||
|
created by the team behind NextUI.
|
||||||
|
</p>
|
||||||
|
<ul className="mt-4 text-foreground-600 font-medium">
|
||||||
|
<li className="flex gap-x-4 items-center">
|
||||||
|
<CheckmarkIcon />
|
||||||
|
210+ Components
|
||||||
|
</li>
|
||||||
|
<li className="flex gap-x-4 items-center">
|
||||||
|
<CheckmarkIcon />
|
||||||
|
Lifetime Access
|
||||||
|
</li>
|
||||||
|
<li className="flex gap-x-4 items-center">
|
||||||
|
<CheckmarkIcon />
|
||||||
|
Free Updates
|
||||||
|
</li>
|
||||||
|
<li className="flex gap-x-4 items-center">
|
||||||
|
<CheckmarkIcon />
|
||||||
|
Figma Files Included
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div className="mt-4">
|
||||||
|
<NextUIProButton />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block w-screen">
|
||||||
|
<Marquee
|
||||||
|
vertical
|
||||||
|
className="hidden md:block relative flex overflow-visible items-center min-h-[480px]"
|
||||||
|
duration={90}
|
||||||
|
wrapperClassName="absolute md:top-24 -left-[47%] w-[1000px]"
|
||||||
|
>
|
||||||
|
<NextUIProImage />
|
||||||
|
</Marquee>
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
"absolute inset-0 pointer-events-none z-20 bg-white dark:bg-black",
|
||||||
|
"[-webkit-mask-image:radial-gradient(at_70%_50%,_rgba(255,255,255,0)_20%,_rgba(255,255,255,0.8)_40%,_rgba(0,0,0,1)_60%)]",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"stars": { "raw": 22226, "formatted": "22.2K" },
|
"stars": { "raw": 22380, "formatted": "22.4K" },
|
||||||
"forks": 1566,
|
"forks": 1580,
|
||||||
"subscribers": 83,
|
"subscribers": 85,
|
||||||
"openIssues": 406
|
"openIssues": 428
|
||||||
}
|
}
|
||||||
|
|||||||
@ -129,9 +129,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -177,9 +177,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@ -144,9 +144,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -192,9 +192,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -214,9 +214,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -246,9 +246,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@ -161,9 +161,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -209,9 +209,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -231,9 +231,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -256,9 +256,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -276,9 +276,9 @@ in multiple formats into `ZonedDateTime` objects.
|
|||||||
|
|
||||||
<PackageManagers
|
<PackageManagers
|
||||||
commands={{
|
commands={{
|
||||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@ -27,18 +27,23 @@ directly in your React Server Components (RSC).
|
|||||||
|
|
||||||
### NextUI CLI (recommended)
|
### NextUI CLI (recommended)
|
||||||
|
|
||||||
If you are starting a new project, you can use the NextUI CLI to create a new project with NextUI pre-configured:
|
If you are starting a new project, you can use the [NextUI CLI](https://nextui.org/docs/guide/cli) to create a new project with NextUI pre-configured:
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install -g nextui-cli
|
|
||||||
```
|
|
||||||
|
|
||||||
<Spacer y={4}/>
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
nextui init -t app
|
nextui init -t app
|
||||||
```
|
```
|
||||||
|
|
||||||
|
or
|
||||||
|
|
||||||
|
<PackageManagers
|
||||||
|
commands={{
|
||||||
|
npm: 'npx nextui-cli@latest init -t app',
|
||||||
|
yarn: 'yarn dlx nextui-cli@latest init -t app',
|
||||||
|
pnpm: 'pnpm dlx nextui-cli@latest init -t app',
|
||||||
|
bun: "bunx nextui-cli@latest init -t app"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
### create-next-app
|
### create-next-app
|
||||||
|
|
||||||
If you are starting a new project, you can run one of the following commands to create a Next.js project pre-configured with NextUI:
|
If you are starting a new project, you can run one of the following commands to create a Next.js project pre-configured with NextUI:
|
||||||
@ -47,7 +52,8 @@ If you are starting a new project, you can run one of the following commands to
|
|||||||
commands={{
|
commands={{
|
||||||
npm: 'npx create-next-app -e https://github.com/nextui-org/next-app-template',
|
npm: 'npx create-next-app -e https://github.com/nextui-org/next-app-template',
|
||||||
yarn: 'yarn create next-app -e https://github.com/nextui-org/next-app-template',
|
yarn: 'yarn create next-app -e https://github.com/nextui-org/next-app-template',
|
||||||
pnpm: 'pnpm create next-app -e https://github.com/nextui-org/next-app-template'
|
pnpm: 'pnpm create next-app -e https://github.com/nextui-org/next-app-template',
|
||||||
|
bun: 'bunx create-next-app -e https://github.com/nextui-org/next-app-template'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@ -17,9 +17,109 @@ Requirements:
|
|||||||
|
|
||||||
To use NextUI in your Remix project, you need to follow the following steps:
|
To use NextUI in your Remix project, you need to follow the following steps:
|
||||||
|
|
||||||
|
### Using NextUI + Remix template
|
||||||
|
|
||||||
|
If you are starting a new project, you can run one of the following commands to create a Remix project pre-configured with NextUI:
|
||||||
|
|
||||||
|
<PackageManagers
|
||||||
|
commands={{
|
||||||
|
npm: 'npx create-remix@latest --template https://github.com/nextui-org/remix-template',
|
||||||
|
yarn: 'yarn create remix --template https://github.com/nextui-org/remix-template',
|
||||||
|
pnpm: 'pnpm create remix --template https://github.com/nextui-org/remix-template',
|
||||||
|
bun: 'bunx create-remix@latest --template https://github.com/nextui-org/remix-template',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
### Automatic Installation
|
||||||
|
|
||||||
|
You can add individual components using the CLI. For example, to add a button component:
|
||||||
|
|
||||||
|
```codeBlock bash
|
||||||
|
nextui add button
|
||||||
|
```
|
||||||
|
|
||||||
|
This command adds the Button component to your project and manages all related dependencies.
|
||||||
|
|
||||||
|
You can also add multiple components at once:
|
||||||
|
|
||||||
|
```codeBlock bash
|
||||||
|
nextui add button input
|
||||||
|
```
|
||||||
|
|
||||||
|
Or you can add the main library `@nextui-org/react` by running the following command:
|
||||||
|
|
||||||
|
```codeBlock bash
|
||||||
|
nextui add --all
|
||||||
|
```
|
||||||
|
|
||||||
|
If you leave out the component name, the CLI will prompt you to select the components you want to add.
|
||||||
|
|
||||||
|
```codeBlock bash
|
||||||
|
? Which components would you like to add? › - Space to select. Return to submit
|
||||||
|
Instructions:
|
||||||
|
↑/↓: Highlight option
|
||||||
|
←/→/[space]: Toggle selection
|
||||||
|
[a,b,c]/delete: Filter choices
|
||||||
|
enter/return: Complete answer
|
||||||
|
|
||||||
|
Filtered results for: Enter something to filter
|
||||||
|
|
||||||
|
◯ accordion
|
||||||
|
◯ autocomplete
|
||||||
|
◯ avatar
|
||||||
|
◯ badge
|
||||||
|
◯ breadcrumbs
|
||||||
|
◉ button
|
||||||
|
◯ card
|
||||||
|
◯ checkbox
|
||||||
|
◯ chip
|
||||||
|
◯ code
|
||||||
|
```
|
||||||
|
|
||||||
|
You still need to add the provider to your app manually (we are working on automating this step).
|
||||||
|
|
||||||
|
```jsx {3,7,9}
|
||||||
|
// app/providers.tsx
|
||||||
|
|
||||||
|
import {NextUIProvider} from '@nextui-org/react'
|
||||||
|
|
||||||
|
export function Providers({children}: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<NextUIProvider>
|
||||||
|
{children}
|
||||||
|
</NextUIProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<Spacer y={4} />
|
||||||
|
|
||||||
|
```jsx {6,10,12,14}
|
||||||
|
// app/layout.tsx
|
||||||
|
|
||||||
|
// globals.css includes @tailwind directives
|
||||||
|
// adjust the path if necessary
|
||||||
|
import "@/styles/globals.css";
|
||||||
|
import {Providers} from "./providers";
|
||||||
|
|
||||||
|
export default function RootLayout({children}: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<html lang="en" className='dark'>
|
||||||
|
<body>
|
||||||
|
<Providers>
|
||||||
|
{children}
|
||||||
|
</Providers>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Manual Installation
|
||||||
|
|
||||||
<Steps>
|
<Steps>
|
||||||
|
|
||||||
### Installation
|
### Add dependencies
|
||||||
|
|
||||||
In your Remix project, run one of the following command to install NextUI:
|
In your Remix project, run one of the following command to install NextUI:
|
||||||
|
|
||||||
|
|||||||
@ -18,9 +18,128 @@ Requirements:
|
|||||||
|
|
||||||
To use NextUI in your Vite project, you need to follow the following steps:
|
To use NextUI in your Vite project, you need to follow the following steps:
|
||||||
|
|
||||||
|
### NextUI CLI (recommended)
|
||||||
|
|
||||||
|
If you are starting a new project, you can use the [NextUI CLI](https://nextui.org/docs/guide/cli) to create a new project with NextUI pre-configured:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
nextui init -t vite
|
||||||
|
```
|
||||||
|
|
||||||
|
or
|
||||||
|
|
||||||
|
<PackageManagers
|
||||||
|
commands={{
|
||||||
|
npm: 'npx nextui-cli@latest init -t vite',
|
||||||
|
yarn: 'yarn dlx nextui-cli@latest init -t vite',
|
||||||
|
pnpm: 'pnpm dlx nextui-cli@latest init -t vite',
|
||||||
|
bun: "bunx nextui-cli@latest init -t vite"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
### Using NextUI + Vite template
|
||||||
|
|
||||||
|
If you are starting a new project, you can run one of the following commands to create a Vite project pre-configured with NextUI:
|
||||||
|
|
||||||
|
<PackageManagers
|
||||||
|
commands={{
|
||||||
|
npm: 'npx degit https://github.com/nextui-org/vite-template my-vite-app',
|
||||||
|
yarn: 'yarn dlx degit https://github.com/nextui-org/vite-template my-vite-app',
|
||||||
|
pnpm: 'pnpm dlx degit https://github.com/nextui-org/vite-template my-vite-app',
|
||||||
|
bun: 'bunx degit https://github.com/nextui-org/vite-template my-vite-app',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
### Automatic Installation
|
||||||
|
|
||||||
|
You can add individual components using the CLI. For example, to add a button component:
|
||||||
|
|
||||||
|
```codeBlock bash
|
||||||
|
nextui add button
|
||||||
|
```
|
||||||
|
|
||||||
|
This command adds the Button component to your project and manages all related dependencies.
|
||||||
|
|
||||||
|
You can also add multiple components at once:
|
||||||
|
|
||||||
|
```codeBlock bash
|
||||||
|
nextui add button input
|
||||||
|
```
|
||||||
|
|
||||||
|
Or you can add the main library `@nextui-org/react` by running the following command:
|
||||||
|
|
||||||
|
```codeBlock bash
|
||||||
|
nextui add --all
|
||||||
|
```
|
||||||
|
|
||||||
|
If you leave out the component name, the CLI will prompt you to select the components you want to add.
|
||||||
|
|
||||||
|
```codeBlock bash
|
||||||
|
? Which components would you like to add? › - Space to select. Return to submit
|
||||||
|
Instructions:
|
||||||
|
↑/↓: Highlight option
|
||||||
|
←/→/[space]: Toggle selection
|
||||||
|
[a,b,c]/delete: Filter choices
|
||||||
|
enter/return: Complete answer
|
||||||
|
|
||||||
|
Filtered results for: Enter something to filter
|
||||||
|
|
||||||
|
◯ accordion
|
||||||
|
◯ autocomplete
|
||||||
|
◯ avatar
|
||||||
|
◯ badge
|
||||||
|
◯ breadcrumbs
|
||||||
|
◉ button
|
||||||
|
◯ card
|
||||||
|
◯ checkbox
|
||||||
|
◯ chip
|
||||||
|
◯ code
|
||||||
|
```
|
||||||
|
|
||||||
|
You still need to add the provider to your app manually (we are working on automating this step).
|
||||||
|
|
||||||
|
```jsx {3,7,9}
|
||||||
|
// app/providers.tsx
|
||||||
|
|
||||||
|
import {NextUIProvider} from '@nextui-org/react'
|
||||||
|
|
||||||
|
export function Providers({children}: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<NextUIProvider>
|
||||||
|
{children}
|
||||||
|
</NextUIProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<Spacer y={4} />
|
||||||
|
|
||||||
|
```jsx {6,10,12,14}
|
||||||
|
// app/layout.tsx
|
||||||
|
|
||||||
|
// globals.css includes @tailwind directives
|
||||||
|
// adjust the path if necessary
|
||||||
|
import "@/styles/globals.css";
|
||||||
|
import {Providers} from "./providers";
|
||||||
|
|
||||||
|
export default function RootLayout({children}: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<html lang="en" className='dark'>
|
||||||
|
<body>
|
||||||
|
<Providers>
|
||||||
|
{children}
|
||||||
|
</Providers>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Manual Installation
|
||||||
|
|
||||||
<Steps>
|
<Steps>
|
||||||
|
|
||||||
### Installation
|
### Add dependencies
|
||||||
|
|
||||||
In your Vite React project, run one of the following command to install NextUI:
|
In your Vite React project, run one of the following command to install NextUI:
|
||||||
|
|
||||||
|
|||||||
@ -9,7 +9,7 @@ Welcome to the NextUI documentation!
|
|||||||
|
|
||||||
<NextImage
|
<NextImage
|
||||||
priority
|
priority
|
||||||
src="https://nextui.org/nextui-banner.png"
|
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextui-banner.jpeg"
|
||||||
quality={100}
|
quality={100}
|
||||||
width={700}
|
width={700}
|
||||||
height={350}
|
height={350}
|
||||||
|
|||||||
@ -34,6 +34,10 @@ const nextConfig = {
|
|||||||
protocol: "https",
|
protocol: "https",
|
||||||
hostname: "nextui.org",
|
hostname: "nextui.org",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "heroui-assets.nyc3.cdn.digitaloceanspaces.com",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -39,6 +39,7 @@
|
|||||||
"@nextui-org/use-clipboard": "workspace:*",
|
"@nextui-org/use-clipboard": "workspace:*",
|
||||||
"@nextui-org/use-infinite-scroll": "workspace:*",
|
"@nextui-org/use-infinite-scroll": "workspace:*",
|
||||||
"@nextui-org/use-is-mobile": "workspace:*",
|
"@nextui-org/use-is-mobile": "workspace:*",
|
||||||
|
"clsx": "^1.2.1",
|
||||||
"@radix-ui/react-scroll-area": "^1.0.5",
|
"@radix-ui/react-scroll-area": "^1.0.5",
|
||||||
"@react-aria/focus": "3.19.0",
|
"@react-aria/focus": "3.19.0",
|
||||||
"@react-aria/i18n": "3.12.4",
|
"@react-aria/i18n": "3.12.4",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 404 KiB After Width: | Height: | Size: 262 KiB |
@ -327,6 +327,10 @@ module.exports = {
|
|||||||
from: {transform: "translateY(0)"},
|
from: {transform: "translateY(0)"},
|
||||||
to: {transform: "translateY(calc(-50% - var(--gap)/2))"},
|
to: {transform: "translateY(calc(-50% - var(--gap)/2))"},
|
||||||
},
|
},
|
||||||
|
fadeIn: {
|
||||||
|
"0%": { opacity: 0 },
|
||||||
|
"100%": { opacity: 1 },
|
||||||
|
},
|
||||||
},
|
},
|
||||||
animation: {
|
animation: {
|
||||||
heartbeat: "heartbeat 1s ease-in-out infinite",
|
heartbeat: "heartbeat 1s ease-in-out infinite",
|
||||||
@ -336,6 +340,7 @@ module.exports = {
|
|||||||
"text-gradient": "text-gradient 4s linear 0s infinite normal forwards running",
|
"text-gradient": "text-gradient 4s linear 0s infinite normal forwards running",
|
||||||
"scrolling-banner": "scrolling-banner var(--duration) linear infinite",
|
"scrolling-banner": "scrolling-banner var(--duration) linear infinite",
|
||||||
"scrolling-banner-vertical": "scrolling-banner-vertical var(--duration) linear infinite",
|
"scrolling-banner-vertical": "scrolling-banner-vertical var(--duration) linear infinite",
|
||||||
|
fadeIn: "fadeIn 0.5s ease-in-out forwards",
|
||||||
},
|
},
|
||||||
maxWidth: {
|
maxWidth: {
|
||||||
"8xl": "90rem", // 1440px
|
"8xl": "90rem", // 1440px
|
||||||
|
|||||||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@ -382,6 +382,9 @@ importers:
|
|||||||
canvas-confetti:
|
canvas-confetti:
|
||||||
specifier: ^1.9.2
|
specifier: ^1.9.2
|
||||||
version: 1.9.3
|
version: 1.9.3
|
||||||
|
clsx:
|
||||||
|
specifier: ^1.2.1
|
||||||
|
version: 1.2.1
|
||||||
cmdk:
|
cmdk:
|
||||||
specifier: ^0.2.0
|
specifier: ^0.2.0
|
||||||
version: 0.2.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
|
version: 0.2.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user