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"
|
||||
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
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
<ScriptProviders />
|
||||
|
||||
@ -21,15 +21,23 @@ export default function DocsLayout({children}: DocsLayoutProps) {
|
||||
</main>
|
||||
<div
|
||||
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
|
||||
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>
|
||||
|
||||
<ScriptProviders />
|
||||
|
||||
@ -36,13 +36,21 @@ export default function FigmaPage() {
|
||||
aria-hidden="true"
|
||||
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
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
<ScriptProviders />
|
||||
|
||||
@ -13,7 +13,7 @@ import {Community} from "@/components/marketing/community";
|
||||
import Support from "@/components/marketing/support";
|
||||
import landingContent from "@/content/landing";
|
||||
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() {
|
||||
return (
|
||||
|
||||
@ -9,6 +9,7 @@ import {cn} from "@nextui-org/react";
|
||||
|
||||
interface MarqueeProps {
|
||||
className?: string;
|
||||
wrapperClassName?: string;
|
||||
reverse?: boolean;
|
||||
shadow?: boolean;
|
||||
duration?: number;
|
||||
@ -20,6 +21,7 @@ interface MarqueeProps {
|
||||
|
||||
export const Marquee = ({
|
||||
className,
|
||||
wrapperClassName,
|
||||
reverse,
|
||||
duration = 40,
|
||||
shadow = false,
|
||||
@ -59,14 +61,18 @@ export const Marquee = ({
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn("flex w-max items-stretch gap-[--gap]", {
|
||||
className={cn(
|
||||
"flex w-max items-stretch gap-[--gap]",
|
||||
{
|
||||
"flex-col": vertical,
|
||||
"h-full": vertical,
|
||||
"animate-scrolling-banner": !vertical,
|
||||
"animate-scrolling-banner-vertical": vertical,
|
||||
"[animation-direction:reverse]": reverse,
|
||||
"hover:[animation-play-state:paused]": pauseOnHover,
|
||||
})}
|
||||
},
|
||||
wrapperClassName,
|
||||
)}
|
||||
>
|
||||
{Children.map(children, (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" },
|
||||
"forks": 1566,
|
||||
"subscribers": 83,
|
||||
"openIssues": 406
|
||||
"stars": { "raw": 22380, "formatted": "22.4K" },
|
||||
"forks": 1580,
|
||||
"subscribers": 85,
|
||||
"openIssues": 428
|
||||
}
|
||||
|
||||
@ -129,9 +129,9 @@ in multiple formats into `ZonedDateTime` objects.
|
||||
|
||||
<PackageManagers
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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
|
||||
commands={{
|
||||
npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
|
||||
yarn: "yarn 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.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.4",
|
||||
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)
|
||||
|
||||
If you are starting a new project, you can use the NextUI CLI to create a new project with NextUI pre-configured:
|
||||
|
||||
```bash
|
||||
npm install -g nextui-cli
|
||||
```
|
||||
|
||||
<Spacer y={4}/>
|
||||
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 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
|
||||
|
||||
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={{
|
||||
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',
|
||||
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:
|
||||
|
||||
### 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>
|
||||
|
||||
### Installation
|
||||
### Add dependencies
|
||||
|
||||
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:
|
||||
|
||||
### 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>
|
||||
|
||||
### Installation
|
||||
### Add dependencies
|
||||
|
||||
In your Vite React project, run one of the following command to install NextUI:
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Welcome to the NextUI documentation!
|
||||
|
||||
<NextImage
|
||||
priority
|
||||
src="https://nextui.org/nextui-banner.png"
|
||||
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextui-banner.jpeg"
|
||||
quality={100}
|
||||
width={700}
|
||||
height={350}
|
||||
|
||||
@ -34,6 +34,10 @@ const nextConfig = {
|
||||
protocol: "https",
|
||||
hostname: "nextui.org",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "heroui-assets.nyc3.cdn.digitaloceanspaces.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
"@nextui-org/use-clipboard": "workspace:*",
|
||||
"@nextui-org/use-infinite-scroll": "workspace:*",
|
||||
"@nextui-org/use-is-mobile": "workspace:*",
|
||||
"clsx": "^1.2.1",
|
||||
"@radix-ui/react-scroll-area": "^1.0.5",
|
||||
"@react-aria/focus": "3.19.0",
|
||||
"@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)"},
|
||||
to: {transform: "translateY(calc(-50% - var(--gap)/2))"},
|
||||
},
|
||||
fadeIn: {
|
||||
"0%": { opacity: 0 },
|
||||
"100%": { opacity: 1 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
heartbeat: "heartbeat 1s ease-in-out infinite",
|
||||
@ -336,6 +340,7 @@ module.exports = {
|
||||
"text-gradient": "text-gradient 4s linear 0s infinite normal forwards running",
|
||||
"scrolling-banner": "scrolling-banner var(--duration) linear infinite",
|
||||
"scrolling-banner-vertical": "scrolling-banner-vertical var(--duration) linear infinite",
|
||||
fadeIn: "fadeIn 0.5s ease-in-out forwards",
|
||||
},
|
||||
maxWidth: {
|
||||
"8xl": "90rem", // 1440px
|
||||
|
||||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@ -382,6 +382,9 @@ importers:
|
||||
canvas-confetti:
|
||||
specifier: ^1.9.2
|
||||
version: 1.9.3
|
||||
clsx:
|
||||
specifier: ^1.2.1
|
||||
version: 1.2.1
|
||||
cmdk:
|
||||
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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user