@mrbrunowolff/react-web-components NPM

React Web Components

A library of Shadcn UI components wrapped as Web Components for use in any framework or vanilla JavaScript application.

Features

Use Shadcn UI components in any framework
Consistent styling between React and Web Components
Themeable with CSS variables
Built with React 19, TypeScript, and Tailwind CSS

Installation

npm install react-web-components

Usage

In a vanilla HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Components Demo</title>
  <!-- Import the CSS -->
  <link rel="stylesheet" href="node_modules/react-web-components/dist/web-components/react-web-components.css">
</head>
<body>
  <!-- Use the components -->
  <ui-button variant="default">Click Me</ui-button>
  <ui-button variant="destructive">Delete</ui-button>
  <ui-button variant="outline">Outline</ui-button>

  <!-- Import the JavaScript -->
  <script src="node_modules/react-web-components/dist/web-components/react-web-components.umd.js"></script>
</body>
</html>

In a framework

// Import the components and styles
import 'react-web-components/dist/web-components/react-web-components.css';
import 'react-web-components';

// Then use them in your HTML templates
// <ui-button variant="default">Click Me</ui-button>

Available Components

<ui-button> - A button component with various styles

Button Properties

Property	Type	Default	Description
variant	'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'	'default'	The visual style of the button
size	'default' \| 'sm' \| 'lg'	'default'	The size of the button
disabled	boolean	false	Whether the button is disabled
onClick	function	undefined	Function to call when button is clicked

Theming

The components use CSS variables for theming. You can customize the look by overriding these variables in your CSS:

:root {
  --primary: oklch(0.205 0 0); /* Purple */
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325); /* Red */
  --border: oklch(0.922 0 0);
}

Development

Prerequisites

Node.js 18+
npm 9+

Setup

Clone the repository:

git clone https://github.com/brunowolff/react-web-components.git
cd react-web-components

Install dependencies:

npm install

Start the development server:

npm run dev

Building

# Build the web components
npm run build:wc

# Build the entire library for publishing
npm run build:lib

Testing

# Run unit tests
npm test

# Run end-to-end tests
npm run test:e2e

License

MIT

react web-components shadcn ui components design-system

@hookform/resolvers @r2wc/react-to-web-component @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip @tailwindcss/vite autoprefixer class-variance-authority clsx cmdk date-fns embla-carousel-react input-otp lucide-react next-themes postcss react react-day-picker react-dom react-hook-form react-resizable-panels recharts sonner tailwind-merge tailwindcss tw-animate-css vaul zod

1.0.0

1 year ago