React Component Library with tsup

This is a React component library built with TypeScript and bundled with tsup. It includes reusable UI components based on Radix UI primitives.

Components

• NavigationTabs: A tabbed navigation component built with Radix UI Tabs.
• SettingsDialog: A configurable settings dialog component built with Radix UI Dialog.
• InfoHoverCard: A hover card component for displaying additional information.
• Guide: A documentation component to display step-by-step guides.

🚀 Getting Started

Installation

npm install @aleksxt24/radix-ui-react-components

Usage

import { NavigationTabs, SettingsDialog } from '@aleksxt24/radix-ui-react-components';
import '@aleksxt24/radix-ui-react-components/dist/index.css'; // Import styles

function App() {
  const [darkMode, setDarkMode] = React.useState(false);
  
  return (
    <div className="App">
      <NavigationTabs 
        tabs={[
          { id: 'tab1', title: 'Dashboard', content: 'Dashboard content here' },
          { id: 'tab2', title: 'Settings', content: 'Settings content here' },
        ]} 
      />
      
      <SettingsDialog 
        darkMode={darkMode} 
        onDarkModeChange={setDarkMode}
      />
    </div>
  );
}

Setup Process

This section guides you through setting up your own React component library with tsup.

1. Create a new React project with Vite

npm create vite@latest my-component-library -- --template react-ts
cd my-component-library
npm install

2. Install tsup and necessary dependencies

npm install --save-dev tsup
npm install @radix-ui/react-tabs @radix-ui/react-dialog @radix-ui/react-hover-card @radix-ui/react-switch @radix-ui/react-slider @radix-ui/react-checkbox @radix-ui/react-icons

3. Create component directory structure

src/
  components/
    NavigationTabs/
      NavigationTabs.tsx
      NavigationTabs.css
      index.ts
    SettingsDialog/
      SettingsDialog.tsx
      SettingsDialog.css
      index.ts
    InfoHoverCard/
      InfoHoverCard.tsx
      InfoHoverCard.css
      index.ts
    Guide/
      Guide.tsx
      index.ts
    index.ts  # Main export file

4. Create a barrel file for exporting components

In src/components/index.ts:

// Export all components
export * from './NavigationTabs';
export * from './Guide';
export * from './InfoHoverCard';
export { SettingsDialog } from './SettingsDialog';

5. Create a tsup configuration file

Create tsup.config.ts in the root directory:

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/components/index.ts'],
  format: ['esm', 'cjs'],
  dts: true, // generates TypeScript types
  sourcemap: true,
  clean: true,
  outDir: 'dist',
  tsconfig: 'tsconfig.build.json',
  treeshake: true,
  minify: true,
  splitting: true,
  external: ['react', 'react-dom'],
});

6. Create a specialized tsconfig for building the library

Create tsconfig.build.json in the root directory:

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "outDir": "dist",
    "declaration": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src/components/**/*.ts", "src/components/**/*.tsx"],
  "exclude": ["node_modules"]
}

7. Update package.json for publishing

{
  "name": "@yourusername/your-component-library",
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "lint": "eslint .",
    "preview": "vite preview",
    "build": "tsup",
    "build:app": "vite build"
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "files": ["dist"]
}

8. Create a .npmignore file

# Source files
src/
public/

# Development files
node_modules/
.vscode/
.idea/
.github/
.git/

# Config files
*.config.js
*.config.ts
tsconfig*.json
vite.config.ts
eslint.config.js

# Logs and local files
*.log
*.local
.DS_Store
.env*
.npmrc

# Test files
test/
tests/
__tests__/
coverage/

# Build files
index.html

9. Build the library

npm run build

10. Publish to npm

# Login to npm
npm login

# Publish as public package
npm publish --access public

Key Points for Library Development

1. Component Export Strategy:

   • Use barrel files (index.ts) to simplify imports
   • Export only what you want to be public API

2. Build Configuration:

   • Use external: ['react', 'react-dom'] to avoid bundling React

3. Package.json Configuration:

   • Set up main, module, and types fields correctly
   • Use the exports field for modern resolution
   • Include only necessary files with the files field

4. CSS Handling:

   • Include component CSS files alongside component code
   • Import styles in component files for easier usage

5. Dependency Management:

   • List Radix UI components as direct dependencies
   • Keep React and React DOM as peer dependencies