shadcn/ui
zustand
shadcn/ui | zustand | |
---|---|---|
165 | 254 | |
60,675 | 43,832 | |
5.4% | 3.0% | |
9.1 | 8.8 | |
4 days ago | 2 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
shadcn/ui
-
Shadcn UI: Must-Have Tools & Resources
A curated list of awesome things related to shadcn/ui
-
Tailwind CSS vs. Shadcn: Which Should You Choose for Your Next Project?
A component library called Shadcn provides pre-made, usable components. Consider it as a toolbox full of interchangeable construction pieces that you can add to your project, such as buttons, cards, and modals.
-
shadcn-ui/ui codebase analysis: examples route explained.
This is how you are able to see the Mail example with out any change in the URL when you visit ui.shadcn.com, it just directly loads MailPage component. Interesting.
- Shadcn/ui codebase analysis: site-header.tsx explained.
-
Shadcn-ui codebase analysis: How is the hero section built on ui.shadcn.com website?
I wanted to find out how the hero section is developed on ui.shadcn.com, so I looked at its source code. Because shadcn-ui is built using app router, the files I was interested in were Layout.tsx and page.tsx.
-
Shadcn-ui codebase analysis: Perfect Next.js dark mode in 2 lines of code with next-themes.
So I wanted to figure out how ui.shadcn.com implemented dark mode on their website. I looked at its source code. These things usually lie in providers.
- โMailโ example in shadcn-ui/ui manages state using Jotai.
-
app/(app) route group in shadcn-ui/ui
You can tell shadcn-ui/ui is built using app router by looking at its folder structure inside apps/www.
-
Mysterious /sink route in ui.shadcn.com
All these folders in the above image are pages that can be navigated to via the header on https://ui.shadcn.com/ website. However, I could not find the header link that points to /sink in the header
-
OpenAI Assistant with NextJS
I assume you know how to create a NextJS project. In this project, I use NextJS with Shadcn UI.
zustand
-
NEXT JS STARTER PACK
Documentation
-
Building Your First Browser Game with Three.js and React: Part 4 - Adding Game Mechanics
First, we're going to use Zustand to manage our game score. Zustand is a lightweight, fast, and scalable state management solution for React.
-
โMailโ example in shadcn-ui/ui manages state using Jotai.
Jotai is a primitive and flexible state management library for React and is written by Daishi Kato, also the maintainer of zustand. Jotai takes an atomic approach, meaning you will create primitive and derived atoms to build state.
-
State Management with Zustand
As we all know state management can be challenging, especially when we have parent with nested children and passing props down from a parent component to children..and normally in the past I would use context from React together with a provider..but it happened that somewhere in the middle between the children the state wasn't updating correctly. So I was looking around for an alternative and came across with zustand
-
Why is my React Component re-rendering?
For large-scale applications with frequently changing state, dedicated state management libraries like Redux, MobX, Zustand, etc. are generally better choices. These libraries offer efficient ways to handle state updates and minimize unnecessary re-renders.
-
Integrate Copilot feature into your React applications using CopilotKit
State Management: Zustand
-
How to optimise React Apps?
For our case, points 1 and 2 can help us provide a better way of handling updates in our rapidly updating application. I have used zustand for the application.
-
React Server Components Example with Next.js
Daishi Kato, creator of Zustand and Jotai, says there are a few things we need to support RSC serialization:
-
A Comprehensive Guide to React State Management
Zustand
-
Best Next.js Libraries and Tools in 2024
Link: https://zustand-demo.pmnd.rs/
What are some alternatives?
daisyui - ๐ผ ๐ผ ๐ผ ๐ผ ๐ผ โThe most popular, free and open-source Tailwind CSS component library
redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
nextui - ๐ Beautiful, fast and modern React UI library.
redux - A JS library for predictable global state management
material-ui-docs - โ ๏ธ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:
react-query - ๐ค Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]
flowbite - Open-source UI component library and front-end development framework based on Tailwind CSS
MobX - Simple, scalable state management.
mantine - A fully featured React components library
Recoil - Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
antd - An enterprise-class UI design language and React UI library
redux-devtools-extension - Redux DevTools extension.