@canceyd/react-npm-starter

A React component library built with TypeScript, Vite, and shadcn/ui. Optimized for tree-shaking and minimal bundle size.

Installation

npm install @canceyd/react-npm-starter
# or
pnpm add @canceyd/react-npm-starter
# or
yarn add @canceyd/react-npm-starter

Usage

Import individual components (recommended for minimal bundle size)

import { Button } from "@canceyd/react-npm-starter/button";
import { Container } from "@canceyd/react-npm-starter/container";

function App() {
  return (
    <Container>
      <Button variant="default">Click me</Button>
    </Container>
  );
}

Import from main entry point

import { Button, Container } from "@canceyd/react-npm-starter";

function App() {
  return (
    <Container>
      <Button variant="default">Click me</Button>
    </Container>
  );
}

Import global styles

To use the global styles (including Tailwind CSS, theme variables, and base styles), import them in your application's entry point:

// In your main.tsx, App.tsx, or root component
import "@canceyd/react-npm-starter/styles/globals.css";

Configure Tailwind CSS v4 to scan library components

Important: For Tailwind CSS v4 to detect and include classes from this library's components, you need to add a @source directive in your main CSS file.

In your consuming project's main CSS file (e.g., src/index.css or src/styles/globals.css), add:

@import "tailwindcss";
@source "../node_modules/@canceyd/react-npm-starter/dist/**/*.{js,ts,tsx}";

This tells Tailwind to scan the library's component files for class names. Without this, the library components won't have their Tailwind styles applied.

Example setup:

/* src/index.css or src/styles/globals.css */
@import "tailwindcss";
@source "../node_modules/@canceyd/react-npm-starter/dist/**/*.{js,ts,tsx}";

/* Your other styles */

Important Notes:

• Make sure you have Tailwind CSS v4 configured in your consuming project, as the global styles depend on it.
• Do NOT include /dist/ in the import path - use @canceyd/react-npm-starter/styles/globals.css (not @canceyd/react-npm-starter/dist/styles/globals.css).
• If you're using a local version of this package (via pnpm link or file: protocol), make sure to rebuild the package after changes: pnpm run build.
• If you encounter import errors, try reinstalling the package in your consuming project.

Components

Button

A flexible button component that can render as either a <button> or <a> element.

import { Button } from "@canceyd/react-npm-starter/button";

<Button variant="default" size="default">Default</Button>
<Button variant="outline" size="sm">Outline</Button>
<Button href="/about" newTab>Link Button</Button>

Container

A responsive container component with size variants.

import { Container } from "@canceyd/react-npm-starter/container";

<Container size="base">Content</Container>
<Container size="wide">Wide Content</Container>

Tree-Shaking

This package is optimized for tree-shaking. When you import individual components, only the code for those components will be included in your bundle.

License

MIT