UI component library for React based on shadcn ui.
Note: This library is built for our internal use case, however feel free to use it in your project if needed.
$ npm install @edge-ui/reactEdgeUI is RSC compatible. It comes with shadcn ui components with theme and layout components as well as some hooks. You can use it however you like.
-
EdgeUI exports typescript files without compiled javascript code. Therefore, you may need to tell your bundler to transpile
@edge-ui/reactpackage. Here is an example with next.js:/** @type {import('next').NextConfig} */ const nextConfig = { transpilePackages: ['@edge-ui/react'] }; module.exports = nextConfig;
-
You need to register edge-ui tailwindcss plugin in your tailwind config file.
// tailwind.config.ts import { Config } from 'tailwindcss'; import twedge from '@edge-ui/react/tailwind-plugin'; const config: Config = { content: [ './src/**/*.{js,jsx,ts,tsx}', // include edge-ui components in the content path twedge.getContentPath() ], // register the plugin plugins: [twedge()] }; export default config;
-
You can then start using edge-ui components in your project. The
ThemeProviderorPageLayoutis not required to use the components.// app/layout.jsx import './globals.css'; import { PageLayout, ThemeProvider } from '@edge-ui/react'; export default function RootLayout(children) { return ( <html lang="en" suppressHydrationWarning> <body> <ThemeProvider attribute="class" defaultTheme="system" enableSystem={false} disableTransitionOnChange > <PageLayout>{children}</PageLayout> </ThemeProvider> </body> </html> ); }