A React UI component library compatible with Next13.
Many of my own projects are developed with this UI library. Components in this library are heavily scoped to those specific projects and hence are not suitable for general use.
Credits to shadcn/ui for the initial inspiration.
Dependencies
- Tailwind (required)
- Zustand (required)
- RadixUI (required)
- NextJS 13
- Supabase
- Tanstack query
- Tanstack table
- Framer motion
i18next
&react-i18next
(not usingnext-i18next
or NextJS's built-in i18n features)- React-hook-form (required for forms)
See package.json
for exhaustive list of required/optional peer dependencies
- Setup Git submodules e.g.
git submodule add https://github.com/<user>/<repo> <dest-dir>
For NextJS
Add configurations as follows:
/** @type {import('next').NextConfig} */
module.exports = {
experimental: {
serverActions: true,
},
webpack: (config) => {
config.resolve.symlinks = false;
return config;
},
typescript: {
ignoreBuildErrors: true,
},
};
Add path aliases to tsconfig.json
as follows:
{
"paths": {
"@@/*": ["<path-to-ui>/src/*"]
}
}
For Tailwind (required)
Copy example configuration from samsze1/ui-demo
In package.json
{
"scripts": {
"build": "pnpm submodule && next build",
"submodule": "git submodule update --init --recursive --remote"
}
}
For other package bundlers
Setup path resolvers similar to the tsconfig
above.
Change UI lib version
cd
into submodulegit checkout <ref>
- Stage/commit the submodule reference
Not working?
See example project in samsze1/ui-demo
Advantages
- Unified build pipeline
- Minus the headaches of dependency management (peer dependencies, optional dependencies)
Disadvantages
- More complex to deploy (e.g. for edge)
This step is optional. Developing within the submodule rather can make things simpler for multi projects setup.
- Clone the UI lib to local
- Replace the submodule with a symbolic link to that repo.
โ ๏ธ Don't stage/commit the symbolic link
If you accidentally stage/commit the symlink
- Remove
.git/modules/<xxx>
- Remove entry from
.git/config
Still doesn't work?
- Try
git rm --cache -r <xxx>
- As the last resort, do
git reset --hard
MIT