Installation

To integrate components into your project, simply execute the following steps and configure the plugin:

Configuration

Tailwind css

Set up Tailwind CSS: If you haven't already, follow the Tailwind CSS installation instructions to set up your project.

Plugin

Configure @typeweave/plugin in config file:

tailwind.config.ts

import { typeweave } from '@typeweave/plugin';

export default {
  content: ['./node_modules/@typeweave/react/dist/**/*.styles.js'],
  plugins: [typeweave()],
};

Important Note:

When importing styles, please be aware of the following distinction:

```
./node_modules/@typeweave/react/dist/COMPONENT_NAME/COMPONENT_NAME.styles.js
```
Use above to only include one component styles, allowing TailwindCSS to generate optimized CSS for that specific component. Each component's documentation specifies its style paths.
```
./node_modules/@typeweave/react/dist/**/*.styles.js
```
Use above to include styles for all components. Note that this approach will result in a significantly larger CSS file size, as it includes styles for all components, even if you're only using the one component. This may impact page load times and performance. Choose the appropriate import to optimize your TailwindCSS setup and minimize CSS file size!

For example, this tailwind.config.ts includes styles for Button, dialog and Input components.

tailwind.config.ts

import { typeweave } from '@typeweave/plugin';

export default {
  content: [
    './node_modules/@typeweave/react/dist/button/button.styles.js',
    './node_modules/@typeweave/react/dist/dialog/dialog.styles.js',
    './node_modules/@typeweave/react/dist/input/input.styles.js',
  ],
  plugins: [typeweave()],
};

and apply bg-background and text-foreground classes to the body tag using any method, assuming you're working with Next.js.

layout.tsx

import "./globals.css';

interface RootLayoutProps {
  children?: React.ReactNode;
}

export default function RootLayout(props: RootLayoutProps) {
  const { children } = props;

  return (
    <html lang="en" dir="ltr">
      <body className="bg-background text-foreground">
        {children}
      </body>
    </html>
  );
}

Usage

import

Import components from @typeweave/react

import { Button } from '@typeweave/react/button';
import { Input } from '@typeweave/react/input';

Important Note:

@typeweave/react does not provide a main export. Instead, i recommend importing components directly from their respective files to leverage tree shaking and optimize bundle size. Each component's documentation specifies its import details.

Incorrect import

import { COMPONENT_NAME } from '@typeweave/react';

Correct:

import { COMPONENT_NAME } from '@typeweave/react/COMPONENT_NAME';

By importing components directly, you can take advantage of tree shaking and only include the components you need in your build, reducing unnecessary code and optimizing performance.

Use Components:

page.tsx

import { Button } from '@typeweave/react/button';

export default function RootPage() {
  return <Button>Press me</Button>;
}

Edit this page

introduction

theme