); } `})}),` `,(0,n.jsx)(e.h3,{id:"custom-themes-layouts-and-colors",children:"Custom Themes, Layouts and Colors"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"nextui"}),` TailwindCSS plugin allows you to customize the default themes, layouts and colors tokens. It also allows you to add new themes and customize them.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`module.exports = { plugins: [ nextui({ themes: { light: { layout: {}, // light theme layout tokens colors: {}, // light theme colors }, dark: { layout: {}, // dark theme layout tokens colors: {}, // dark theme colors }, custom: { layout: { // custom theme layout tokens extend: "light" / "dark", // extend from light or dark theme }, colors: {}, // custom theme colors }, // ... custom themes }, }), ], }; `})}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["Check out the ",(0,n.jsx)(e.a,{href:"/docs/customization/layout",children:"Layout"})," and ",(0,n.jsx)(e.a,{href:"/docs/customization/colors",children:"Colors"}),` documentation for better understanding of the layout and colors tokens.`]}),` `]}),` `,(0,n.jsx)(e.h3,{id:"enhanced-documentation",children:"Enhanced Documentation"}),` `,(0,n.jsx)(e.p,{children:`We've built our new documentation on top of Next.js 13 using the App directory, making it simpler, more robust, and more helpful than ever before. Additionally, we've improved the structure by placing useful links at the top of each component documentation, such as the component storybook, npm, react-aria hooks, and links to the source code and styles source code.`}),` `,(0,n.jsx)(o,{src:"https://d2u8k2ocievbld.cloudfront.net/new-docs.mp4",poster:"https://d2u8k2ocievbld.cloudfront.net/new-docs-poster.png",width:700,height:350}),` `,(0,n.jsx)(e.h3,{id:"new-templates-and-guides",children:"New Templates and Guides"}),` `,(0,n.jsx)(e.p,{children:`Two Next.js templates for App and Pages directories, alongside Vite, Remix, and Astro installation guides, are introduced to aid your app creation process.`}),` `,(0,n.jsx)(e.h4,{id:"nextjs-templates",children:"Next.js Templates"}),` `,(0,n.jsx)(r,{}),` `,(0,n.jsx)(e.h4,{id:"frameworks",children:"Frameworks"}),` `,(0,n.jsx)(s,{}),` `,(0,n.jsx)(e.h3,{id:"custom-variants",children:"Custom Variants"}),` `,(0,n.jsxs)(e.p,{children:["We've added a new function, ",(0,n.jsx)(e.code,{children:"extendVariants"}),", that allows you to customize any NextUI components's variants."]}),` `,(0,n.jsx)(o,{src:"https://d2u8k2ocievbld.cloudfront.net/custom-variants.mp4",poster:"https://d2u8k2ocievbld.cloudfront.net/custom-variants-poster.png",width:700,height:350}),` `,(0,n.jsxs)(e.p,{children:["You can create or override the component ",(0,n.jsx)(e.code,{children:"variants"}),", ",(0,n.jsx)(e.code,{children:"defaultVariants"})," and ",(0,n.jsx)(e.code,{children:"compoundVariants"}),"."]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["Check out the ",(0,n.jsx)(e.a,{href:"/docs/customization/custom-variants",children:"Custom Variants"})," documentation for more information."]}),` `]}),` `,(0,n.jsx)(e.h3,{id:"enhanced-styling-model",children:"Enhanced Styling Model"}),` `,(0,n.jsx)(e.p,{children:"With the new slots model, you can style every part of your components effortlessly."}),` `,(0,n.jsx)(o,{src:"https://d2u8k2ocievbld.cloudfront.net/override-styles.mp4",poster:"https://d2u8k2ocievbld.cloudfront.net/override-styles-poster.png",width:700,height:350}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["Check out the ",(0,n.jsx)(e.a,{href:"/docs/customization/override-styles",children:"Override Styles"})," documentation for more information."]}),` `]}),` `,(0,n.jsx)(e.h3,{id:"tailwind-variants",children:"Tailwind Variants"}),` `,(0,n.jsxs)(e.p,{children:["Our new library, ",(0,n.jsx)(e.a,{href:"https://tailwind-variants.org",children:"Tailwind Variants"}),`, allows you to write TailwindCSS for large components in a reusable and clear way. It automatically handles TailwindCSS class conflicts and all NextUI components are built on top of it.`]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["Check out the ",(0,n.jsx)(e.a,{href:"https://tailwind-variants.org",children:"Tailwind Variants"})," documentation for more information."]}),` `]}),` `,(0,n.jsx)(e.h3,{id:"revamped-components",children:"Revamped Components"}),` `,(0,n.jsxs)(e.p,{children:["All components are written from scratch and integrated with ",(0,n.jsx)(e.a,{href:"https://react-spectrum.adobe.com/react-aria/index.html",children:"react-aria"}),` hooks, ensuring enhanced performance and better accessibility.`]}),` `,(0,n.jsx)(e.h3,{id:"optimized-animations",children:"Optimized Animations"}),` `,(0,n.jsxs)(e.p,{children:["Thanks to ",(0,n.jsx)(e.a,{href:"https://www.framer.com/motion/",children:"framer-motion"}),`, we've significantly improved and optimized animations to make your app feel more fluid and smooth.`]}),` `,(0,n.jsx)(o,{src:"https://d2u8k2ocievbld.cloudfront.net/dropdown-animation.mp4",poster:"https://d2u8k2ocievbld.cloudfront.net/dropdown-animation-poster.png",width:700,height:350}),` `,(0,n.jsx)(e.h3,{id:"individual-packages-support",children:"Individual Packages Support"}),` `,(0,n.jsx)(e.p,{children:`Install only what you need, reducing CSS bundle as it will only include styles for the components you're actually using.`}),` `,(0,n.jsx)(l,{commands:{npm:"npm i @nextui-org/button",yarn:"yarn add @nextui-org/button",pnpm:"pnpm add @nextui-org/button"}}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["Check out the ",(0,n.jsx)(e.a,{href:"/docs/guide/installation#individual-installation",children:"Individual Packages"})," documentation for more information."]}),` `]}),` `,(0,n.jsx)(e.h3,{id:"dark-mode-support",children:"Dark Mode Support"}),` `,(0,n.jsxs)(e.p,{children:["Implementing dark mode has never been easier. Thanks to the ",(0,n.jsx)(e.code,{children:"nextui"})," TailwindCSS plugin, you can now use the ",(0,n.jsx)(e.code,{children:"dark"}),` theme by just adding the `,(0,n.jsx)(e.code,{children:"dark"})," class to the ",(0,n.jsx)(e.code,{children:"body"})," / ",(0,n.jsx)(e.code,{children:"html"})," or ",(0,n.jsx)(e.code,{children:"main"})," tag."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",meta:"{11}",children:`// main.tsx or main.jsx import React from "react"; import ReactDOM from "react-dom/client"; import {NextUIProvider} from "@nextui-org/react"; import App from "./App"; import "./index.css"; ReactDOM.createRoot(document.getElementById("root")).render(

, ); `})}),` `,(0,n.jsx)(o,{src:"https://d2u8k2ocievbld.cloudfront.net/dark-mode.mp4",poster:"https://d2u8k2ocievbld.cloudfront.net/dark-mode-poster.png",width:700,height:350}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Note"}),": ",(0,n.jsx)(e.strong,{children:"text-foreground"})," and ",(0,n.jsx)(e.strong,{children:"bg-background"})," changes the text and background colors to the current theme."]}),` `]}),` `,(0,n.jsx)(e.h3,{id:"new-components",children:"New Components"}),` `,(0,n.jsx)(e.p,{children:"We've added 6 new components, expanding the possibilities of what you can create."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:"/docs/components/chip",children:"Chip"}),": Small block of essential information that represent an input, attribute, or action."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:"/docs/components/divider",children:"Divider"}),": A line that separates content in a page."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:"/docs/components/kbd",children:"Kbd"}),": Displays which ",(0,n.jsx)(e.code,{children:"key"})," or combination of keys performs a given action."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:"/docs/components/skeleton",children:"Skeleton"}),": Placeholder for loading content."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:"/docs/components/snippet",children:"Snippet"}),": Displays a code snippet."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:"/docs/components/tabs",children:"Tabs"}),": Organize content into separate views where only one view is visible at a time."]}),` `]}),` `,(0,n.jsx)(e.h2,{id:"figma-community-file",children:"Figma Community File"}),` `,(0,n.jsxs)(e.p,{children:["We're excited to also announce our ",(0,n.jsx)(e.strong,{children:"Figma Community File"}),`. This file will enable you to easily translate your designs into NextUI components. Whether you're a solo developer or working with a design team, our Figma file helps streamline the process of transforming design ideas into functioning UI components.`]}),` `,(0,n.jsx)(c,{color:"warning",children:(0,n.jsx)(e.p,{children:"This file is still in development and will be continuously updated."})}),` `,(0,n.jsx)("iframe",{height:"600",width:"800",src:"https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=nextui",className:"aspect-video w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"}),` `,(0,n.jsx)(i,{y:10}),` `,(0,n.jsx)(h,{color:"default",variant:"bordered",children:(0,n.jsx)(m,{isExternal:!0,showAnchorIcon:!0,className:"text-current",href:"https://www.figma.com/community/file/1267584376234254760",children:(0,n.jsx)(e.p,{children:"Open in Figma"})})}),` `,(0,n.jsx)(e.h2,{id:"get-started",children:"Get Started"}),` `,(0,n.jsxs)(e.p,{children:["To start using ",(0,n.jsx)(e.strong,{children:"NextUI v2.0"}),", head over to our ",(0,n.jsx)(e.a,{href:"/docs/guide/installation",children:"installation guide"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["We can't wait to see the amazing things you'll build with ",(0,n.jsx)(e.strong,{children:"NextUI v2.0"}),"!"]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(f,t)})):f(t)}var I=j;function a(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(z);})(); ;return Component;

NextUI Latest Updates

All the latest news about NextUI.