NextUI - Next move (v2)

[jrgarciadev]

NextUI is making the switch from Stitches to Tailwindcss as our style engine. Stitches is no longer actively maintained and does not support static extraction, so NextUI is moving towards zero-runtime to better support React server components and new versions of Next.js. To make the transition smoother, we are developing Tailwind Variants, a library that will ease the transition from Stitches to TailwindCSS.

The NextUI documentation will be separated into Stitches and TailwindCSS versions, available on different domains, so users can access the legacy documentation. The work ahead is substantial and any assistance with the migration is greatly appreciated.

Thank you for your support 🙏🏻

Will it be backward compatible?

Unfortunately, the switch from Stitches to Tailwindcss will not be backward compatible. The new system requires Tailwindcss to be installed and the styling of components will be different

Will you continue to fix style-related issues?

Yes, we will continue to review and address style-related issues. Our team will make every effort to include fixes in the new version of NextUI using Tailwindcss.

Will the new version fix the Next.js 13 issues?

Yes, the switch to Tailwindcss will address the Next.js 13 compatibility issues in NextUI.

Will this change reduce the bundle size?

The switch to Tailwindcss has the potential to reduce the bundle size compared to the previous version with Stitches, but the exact impact on bundle size will depend on various factors such as the size of the implementation and usage of the library.

Will this change fix all the hydration support?

No, the switch to Tailwindcss will not necessarily fix all hydration support issues. It depends on the updates made by the react-aria team. However, our team is actively analyzing solutions to address these issues on our end.

Important Note:

We understand that this change will require significant effort on your end to refactor the existing NextUI code. However, it is important to us that NextUI remains up-to-date and compatible with the latest features of React and Next.js. For this reason, we cannot continue to work and release components on top of a non-maintained style engine (Stitches). We appreciate your understanding and support as we make this important transition to Tailwindcss.

Roadmap 🚙

https://github.com/orgs/nextui-org/projects/2/views/1?pane=issue&itemId=20037976

Storybook

https://storiesv2.nextui.org/

New Docs (WIP)

https://nextui-docs-v2.vercel.app

Next.js App Directory Template

https://github.com/nextui-org/next-app-template

Next.js Pages Directory Template

https://github.com/nextui-org/next-pages-template

Related Links:

https://beta.nextjs.org/docs/styling/css-in-js
stitchesjs/stitches#1053 (comment)
#979 (comment)
#1031
#849

[zrtsky]

This is AMAZING 🎉🎉🎉🎉

[salvinoto]

Awesome! Is there a time frame around this?

[jrgarciadev]

Hey @salvinoto here's you will be able to see the migrated components https://github.com/orgs/nextui-org/projects/2/views/1?pane=issue&itemId=20037976

[cliffordfajardo]

@jrgarciadev - i think this makes a lot of sense & I'm a fan 🎉

Have you seen typewind?
It makes the tailwind CSS authoring experience nearly identical to writing regular tailwind, 1 of the main difference is the classes are typed
From a component library author perspective it seems interesting

typewind-demo.mp4

Thread from the creator:https://mobile.twitter.com/Mokshit06/status/1617880004846825474

At any rate, I think tailwind css alone is already a big improvement for all the reasons you mentioned in this announcement 🎉

[jrgarciadev]

Hey @cliffordfajardo I'm glad you're a fan 🫶🏻, yes typewind is an amazing library, the creator @Mokshit06 recently join us as a core contributor of NextUI, so stay tuned for great things to come in the NextUI ecosystem 🚀

[mohammed-bahumaish]

love it!

[jaydeepgiri]

I was wondering, why such an excellent project wasn't getting updates. Anyways it's a big news. Will be eagerly waiting for it to be implemented in my next project. All the best guys. 🎉👏🏻

[bluefire2121]

Remix ready?

[jrgarciadev]

We hope so! 🙌🏻

[andrewdoro]

why not use cva instead of a custom solution for variants ?
https://github.com/joe-bell/cva

[jrgarciadev]

@andrewdoro, we attempted to utilize CVA as you can see here (https://github.com/nextui-org/nextui/blob/feat/v2/packages/core/theme/src/utils/cva.ts), however, we found it challenging to create a design system solely using CVA. The creator has stated that the tool is not meant to have all the features we require (https://github.com/joe-bell/cva#how-can-i-create-responsive-variants-like-stitchesjs).

Some of the lacking features include:

• Responsive variants (https://www.tailwind-variants.org/docs/introduction#responsive-variants)
• Split components into multiple slots (https://www.tailwind-variants.org/docs/introduction#split-components-into-multiple-slots)
• Components composition (extending variants, defaultVariants, slots, etc...) (https://www.tailwind-variants.org/docs/introduction#components-composition)
• Automatic TailwindCSS conflict resolution (https://www.tailwind-variants.org/docs/introduction#automatic-conflict-resolution)
• Slots with responsive variants (https://www.tailwind-variants.org/docs/slots#slots-with-responsive-variants)
• Slots with components composition
• More to come...

Therefore, we opted to build Tailwind Variants as a solution. This is not to compete with CVA, and we still suggest using CVA if the above features are not necessary. Our goal is to have all the features we need to migrate NextUI to TailwindCSS.

I hope this clarifies your inquiry. 🙌🏻

Edit: Comparison Page https://www.tailwind-variants.org/docs/comparison

[Dhravya]

This is amazing, very helpful
Kudos to the team 🚀

[porkopek]

This makes a lot of sense! Congrats for the timely decision. It's not easy to make such a big change

[code-with-onye]

Can't wait for the awesome release

[enyelsequeira]

excited to look at this, I think just the API itself will become very useful

[alexandre-dev29]

Really awesome, Thanks to you guys for your hardware work.🔥🔥🔥

[vitalijalbu]

Noo wayy, please don't do it

[wobsoriano]

Why?

[RaulColino]

Noo wayy, please don't do it

If you want an alternative to NextUI you can try theme ui or chakra ui 🙂

[wobsoriano]

Really awesome! Wondering if NextUI v2 will be framework agnostic so the community can port it to Vue, Svelte, etc etc

[jrgarciadev]

Looking at the v2 branch, looks like it is react-locked again 😢

Hi the styles from @nextui-org/theme can be used in any framework

[wobsoriano]

Thanks for making that clear, woohoo!

[wobsoriano]

I also noticed that @nextui-org/theme is exporting incorrect files. Would you like me to open a PR?

It currently exports:

  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.cjs.js"
    },
    "./package.json": "./package.json"
  },

but the dist folder only has index.mjs and index.js files.

[jrgarciadev]

Hey @wobsoriano it was fixed a while ago https://github.com/nextui-org/nextui/blob/feat/v2/packages/core/theme/clean-package.config.json

https://unpkg.com/browse/@nextui-org/[email protected]/package.json

[AlloryDante]

Man, I am also looking for using it with svelte

[ilhamgepe]

I can't wait to try this feature. ganbatte nextui team 🔥

[jaydeepgiri]

Hello @jrgarciadev,

Really commendable work you and all the contributors have done. It's appreciable. I wish this UI framework achieves great success and popularity.

Now, there are few issues which I noticed while checking the docs. And those are related to mobile experience. Certain components are not working on mobile devices like Accordion, Dropdown menu buttons, Group Avtar images and Tabs. These components do not respond on touch (click) event on mobile devices, whereas these are working fine on desktop browsers. In group Avatar case, when on desktop browser, when we hover over any of the Avatar it comes out, the same effect should be applied on mobile browser when we touch hold for longer it should come out.

It would be a great help if we can get this fixed in upcoming updates, so that it becomes perfect UI framework to be used by its lovers like me. I'll be eagerly waiting for the next update with the fix.

Thank you in advance.

[jaydeepgiri]

I tested it in Redmi K20 Pro - Android 11 - Chrome & Firefox Browser and it is not working. Whereas, the same components are working fine on my other device. Do let me know if you need more information!

[camcam2605]

@jaydeepgiri what is the Chrome & Firefox Browser version you are using?

[jaydeepgiri]

Chrome 115.0.5790.136 and Firefox 115.2.1
@camcam2605
All these work fine on other devices.

[abidr]

@jaydeepgiri I'm facing the same issues as yours. My device is Mi 10 Lite 5G with Android 13.

[jaydeepgiri]

Great to know @jrgarciadev and @camcam2605 Above mentioned issues are resolved 🎉

Just last one remaining is Group Avtar, Avatar on touch should be zoom in just like what happens on hover on desktop.

Thanks a ton. 🙏🏻

[kamami]

I cannot use the table component with individual imports, as shown in the v2-docs. I get this error:
Error: Unknown element <[object Object]> in collection.

import React from "react";
import {
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell,
} from "@nextui-org/table";

export function ChargersTable() {
  return (
    <Table aria-label="Example static collection table">
      <TableHeader>
        <TableColumn>NAME</TableColumn>
        <TableColumn>ROLE</TableColumn>
        <TableColumn>STATUS</TableColumn>
      </TableHeader>
      <TableBody>
        <TableRow key="1">
          <TableCell>Tony Reichert</TableCell>
          <TableCell>CEO</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
        <TableRow key="2">
          <TableCell>Zoey Lang</TableCell>
          <TableCell>Technical Lead</TableCell>
          <TableCell>Paused</TableCell>
        </TableRow>
        <TableRow key="3">
          <TableCell>Jane Fisher</TableCell>
          <TableCell>Senior Developer</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
        <TableRow key="4">
          <TableCell>William Howard</TableCell>
          <TableCell>Community Manager</TableCell>
          <TableCell>Vacation</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

[RnbWd]

some components need to be used with use client;

[trinhthinh388]

Hey team!
I just found a bug relating to Chip component when use it along with onClose and just contains 1 character

[camcam2605]

This PR can resolve this issue: #1214

[trinhthinh388]

Lol love to see VN guy here
Thanks mate

[jieuncodes]

I discovered an issue with the Card component. When the Card has the prop isPressable set to true and also uses the onPress={customClickFunction}, the following warning appears:

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
I suspect that the isPressable property causes the Card component to render as a button. When combined with onPress, this leads to the error.

[camcam2605]

I don't see any issue with button Card.
https://codesandbox.io/p/sandbox/recursing-swirles-jdf4s9?utm_medium=sandpack&file=%2FApp.jsx%3A51%2C51

[grafisaholic]

Really awesome, Can't wait for release 🔥🔥🔥

[gpraneeth22]

Hey Buddy,
When can we expect the release?

[AntonAndreevichMoroz]

I am using useSWR to get data for a table. I pass the isLoading state from useSWR to the Table component.
Until useSWR has loaded the data, items are empty, which I get an error that items is undefinde. I did the trick by passing an empty array until the real data arrives, but then I have both loadingContent and emptyContent displayed at the same time. It also turned out to be bypassed by an additional check of isLoading.
I think it's necessary to add an extra check and not try to render Rows while isLoading is true to avoid this error.

I will give an example in which form the Table component worked for me with the expected behavior.

      <Table aria-label='Example table with dynamic content' isStriped>
        <TableHeader columns={tableColumns}>
          {column => <TableColumn key={column.key} align={column.key === "actions" ? "center" : "start"}>{column.label}</TableColumn>}
        </TableHeader>
        <TableBody
          items={items ? items : []}
          emptyContent={isLoading ? null : 'Elements not found'}
          loadingContent={<Spinner/>}
          isLoading={isLoading}
        >
          {item => (
            <TableRow key={item.id}>
              {columnKey => (
                <TableCell>{renderCell(item, columnKey)}</TableCell>
              )}
            </TableRow>
          )}
        </TableBody>
      </Table>

[camcam2605]

can you provide a reproduction (codesandbox) about this case?

[AntonAndreevichMoroz]

https://codesandbox.io/p/sandbox/cocky-tu-tm7k3l?welcome=true
Yes, sure. I have created a project. The error is reproduced. The commented lines are my temporary fix.

[jrgarciadev]

Hey @AntonAndreevichMoroz as initially the items is undefined, you need to declare an empty array, try by using this code

  <TableBody
    items={items ?? []}
    emptyContent={'Elements not found'}
    loadingContent={<Spinner />}
    isLoading={isLoading && !items}
  >

[AntonAndreevichMoroz]

I found a solution for myself. It's in the commented lines. Your version isn't bad either. I just thought that it would not be bad to add an additional check to the component so that in the release version such a check would be transparent to the developer. For example, with isLoading =True, it did not try to render items, then the component would not receive an error and would work more intuitively according to the documentation.

[kamami]

Tooltip is not working in the docs.

[jrgarciadev]

Fixed 👍🏻 https://nextui-docs-v2.vercel.app/docs/components/tooltip

[sbc640964]

What happens with autocomplete and select?

[kamami]

I used the NextUI with NextJS App Directory Template from the new docs. But when trying to deploy everything to Vercel, I get this error:

Type error: Type '{ children: Element; hideSymbol: true; hideCopyButton: true; variant: string; }' is not assignable to type 'IntrinsicAttributes & SnippetProps & RefAttributes<HTMLDivElement>'.
--
Property 'variant' does not exist on type 'IntrinsicAttributes & SnippetProps & RefAttributes<HTMLDivElement>'.
 

 			<div className="mt-8">
				<Snippet hideSymbol hideCopyButton variant="bordered">
				                                   ^
					<span>
						Get started by editing <Code color="primary">app/page.tsx</Code>
					</span>
Error: Command "npm run build" exited with 1

[marian2js]

It seems the latest version broke some typescript definitions. It also happens with Button and Chip. If you ignore the ts errors they work.

[jrgarciadev]

Hey guys, please install the latest snapshot

[lukasmaxim]

Hey there, thanks for the great work! Found an issue: Tabs has child "Tab" in the v2 docs, but the export member of @nextui-org/tabs is called TabItem. However, also seeing errors trying to use "TabItem" instead of Tab.

[jrgarciadev]

Hey @lukasmaxim I don't see any issues with Tabs/Tab export

https://codesandbox.io/p/sandbox/s3zfw4?file=%2FApp.jsx%3A1%2C1&utm_medium=sandpack

[saguirre]

Hey @jrgarciadev was wondering if you wanted contributors to the V2 project. Happy to help in any way I can!

[amauryfischer]

@sapkra oh okay my bad sorry.
Then i nearly agree with you, haha.

But next-ui goes quite indepth with animations, and react-aria also provide atoms, so...

[sapkra]

@amauryfischer I see react-aria as a accessibility helper library for react components. For some cases they need to provide unstyled components but it far away from a design system component library. I would also not call them atoms, they are more like helper components to use in your own component lib aka. Next UI in this case.

[saguirre]

Hey, I'm currently building a sidebar for my application, was just wondering (as NextUI povides a TopNavbar component) if the roadmap had a sidebar included 😄 . However, I'm interested on that sidebar code! Where can I reach you at? Is your discord sapkra as well?

[sapkra]

@saguirre Yes, just message me on Discord. :)

I also think that the Navbar component is way to opinionated for a general component lib and should basically not be part of NextUI, but that's just my opinion regarding separation of concerns. 👀

[saguirre]

You know I can't really find you on Discord sadly. I just followed you on Twitter, maybe we can talk through there!

[jrgarciadev]

Beyond excited to announce NextUI v2! 🎉

https://github.com/nextui-org/nextui/releases/tag/v2.0.0

Blog post: https://nextui.org/blog/nextui-v2

[Moe03]

Congrats! Was already using the dev version of V2 on a project for about 2 months now, glad it now has everything documented and with fewer bugs, appreciate all the contributers hard work 🤍

[sanjivsmoke]

while coping NextUI exports navbar-related components form the page , the "NavbarMenuToggle. " ends with fullStop " . " , it should comma " , " .

[jrgarciadev]

Good catch, fixed 👍🏻 ec2ed20, should be deployed in few minutes

[sanjivsmoke]

[jrgarciadev]

Did you install @nextui-org/react ?

[Infinitay]

I'm not understanding why I'm getting different results now after migrating. Was effectively all styling removed in v2?

NextUI v1

Preview

<Button.Group>
	<Button onClick={handleUploadButton}>Upload Image</Button>
	<input ref={fileUploadInputRef} hidden type="file" accept=".png, .jpg, .jpeg" onChange={handleFileUpload} />
	<Button animated={false} disabled={!uploadedImage} onClick={handleClearFileUpload}>
		x
	</Button>
</Button.Group>
<Spacer y={0.5}></Spacer>
<Input ref={urlInputRef} type={"url"} clearable placeholder="Image from URL" onChange={(e) => updateImageURL(e.target.value)}></Input>

NextUI v2

Preview

<ButtonGroup>
	<Button color="primary" onClick={handleUploadButton}>Upload Image</Button>
	<input ref={fileUploadInputRef} hidden type="file" accept=".png, .jpg, .jpeg" onChange={handleFileUpload} />
	<Button disableAnimation={false} isDisabled={!uploadedImage} onClick={handleClearFileUpload}>
		x
	</Button>
</ButtonGroup>
<Spacer y={0.5}></Spacer>
<Input ref={urlInputRef} type={"url"} isClearable placeholder="Image from URL" onChange={(e) => updateImageURL(e.target.value)}></Input>

The differences I noticed after migrating to v2

• Styling, fixed by now defining color prop
• Font styling is different, different weight and maybe even font family?
• The button group layout differs, on v1 the sizing is to my liking by default but now the layout behaves weirdly where the first button is only slightly larger than the second. If anything I would expect them to be the same size, but they're not
• Spacer spacing is smaller
• The last input's width is now suddenly the full page width

[jrgarciadev]

Hey @Infinitay yes we change a lot of things in the design system.

1. NextUI v2 doesn't add a default font family you should add yours using https://tailwindcss.com/docs/font-family, we use DM Sans in the docs
2. Button Group changes a bit in v2, check the Figma https://www.figma.com/community/file/1267584376234254760, remember that you can use the extendVariants function to add any size variant you like most https://nextui.org/docs/customization/custom-variants in v2 modifying the default styles is really easy.
3. Spacer component in v2 follows the TailwindCSS spacing tokens https://tailwindcss.com/docs/customizing-spacing
4. Input components are now fullWidth by default you can disable it by passing fullWidth={false}

[Infinitay]

Thank you for all the information. I appreciate it.

EDIT: I set the fullWidth prop to false and it still seemed to be full width. I suppose I have to modify the layout myself, but it doesn't seem to be an issue for the button group.