TmpTech UI

A modern React UI component library built for the Frappe Framework, inspired by frappe-ui and based on frappe-ui-react.

Features

• 📦 50+ React Components - Comprehensive UI component library
• 🎨 TailwindCSS Powered - Utility-first CSS styling
• 📖 Storybook Documentation - Interactive component documentation
• 🔧 TypeScript Support - Full type safety and IDE support
• 🚀 Vite Build System - Fast and optimized builds
• 🎯 Frappe Framework Ready - Built specifically for Frappe integration

Installation

npm install @tmptech/ui
# or
yarn add @tmptech/ui
# or
pnpm add @tmptech/ui

Quick Start

import { Button, Card, Input } from '@tmptech/ui';
import '@tmptech/ui/css';

export default function App() {
  return (
    <Card>
      <Input label="Name" placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Available Components

Form Components

• Input - Text input field
• Select - Dropdown select
• Textarea - Multi-line text input
• Checkbox - Checkbox control
• Switch - Toggle switch
• DatePicker - Date selection
• FileUploader - File upload

Display Components

• Button - Action button
• Card - Container component
• Badge - Status badge
• Alert - Alert message
• Avatar - User avatar
• Breadcrumbs - Navigation breadcrumbs
• Divider - Divider line
• Typography - Text components

Interactive Components

• Dropdown - Dropdown menu
• Modal - Modal dialog
• Dialog - Dialog box
• Tooltip - Tooltip popover
• Popover - Popover component
• Tabs - Tab navigation
• Toast - Toast notification

Feedback Components

• Spinner - Loading spinner
• Progress - Progress bar
• Toast - Toast notifications

Development

Setup

npm install

Development Server

npm run dev

Storybook

npm run storybook

Build

npm run build

Type Check

npm run type-check

Lint

npm run lint

Project Structure

tmptech-ui/
├── src/
│   ├── components/        # React components
│   ├── icons/             # Icon components
│   ├── utils/             # Utility functions
│   ├── @types/            # TypeScript type definitions
│   ├── style.css          # Global styles
│   └── index.ts           # Main export file
├── .storybook/            # Storybook configuration
├── public/                # Static assets
├── vite.config.ts         # Vite configuration
├── tailwind.config.js     # TailwindCSS configuration
└── package.json

Integration with Frappe

To use tmptech-ui in your Frappe application:

1. Install the package in your Frappe app:

npm install @tmptech/ui

2. Import the library and styles in your main React component:

import { Button, Card } from '@tmptech/ui';
import '@tmptech/ui/css';

3. Use components in your Frappe DocType forms or pages.

Contributing

See CONTRIBUTING.md for guidelines on how to contribute.

License

MIT

Support

For issues and feature requests, please open an issue on GitHub.