basscode-extrude

A compact, elegant 3D extruded UI component library for React with TypeScript support. Perfect for Next.js Tailwind projects, but uses modular CSS internally for maximum compatibility.

✨ Features

• Compact & Elegant: Clean 3D extruded design with consistent styling
• TypeScript: Full TypeScript support with exported prop types
• Modular CSS: No external dependencies, works with any CSS framework
• Next.js Ready: Optimized for Next.js applications
• Tree Shakeable: Import only what you need

📦 Installation

npm install basscode-extrude
# or
yarn add basscode-extrude
# or
pnpm add basscode-extrude

🚀 Usage

1. Import Components and Styles

// Import the CSS styles (required for proper styling)
import 'basscode-extrude/extrude.css';

// Import components
import { Button, Card, Input } from 'basscode-extrude';

function MyComponent() {
  return (
    <Card padding="medium">
      <h2>Login Form</h2>
      <Input 
        placeholder="Enter your email" 
        type="email"
        onChange={(e) => console.log(e.target.value)}
      />
      <Input 
        placeholder="Enter your password" 
        type="password"
      />
      <Button onClick={() => console.log('Login clicked')}>
        Login
      </Button>
    </Card>
  );
}

2. Alternative CSS Import

You can also import the CSS in your main CSS file or globals.css:

@import 'basscode-extrude/extrude.css';

🧩 Components

Button

Compact button with fully rounded corners and 3D effect.

<Button 
  variant="primary" // or "secondary"
  onClick={() => {}}
  disabled={false}
>
  Click me
</Button>

Props:

• children: React.ReactNode
• onClick?: () => void
• variant?: 'primary' | 'secondary' (default: 'primary')
• disabled?: boolean (default: false)
• type?: 'button' | 'submit' | 'reset' (default: 'button')
• className?: string

Card

Light 3D card container with consistent border radius.

<Card 
  padding="medium" // "none" | "small" | "medium" | "large"
  shadow="light"   // "light" | "medium" | "heavy"
>
  Card content goes here
</Card>

Props:

• children: React.ReactNode
• className?: string
• padding?: 'none' | 'small' | 'medium' | 'large' (default: 'medium')
• shadow?: 'light' | 'medium' | 'heavy' (default: 'light')

Input

Clean 3D input field with focus states.

<Input 
  placeholder="Enter text..."
  value={value}
  onChange={(e) => setValue(e.target.value)}
  size="medium" // "small" | "medium" | "large"
/>

Props:

• value?: string
• onChange?: (e: React.ChangeEvent) => void
• placeholder?: string
• type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' (default: 'text')
• disabled?: boolean (default: false)
• required?: boolean (default: false)
• className?: string
• size?: 'small' | 'medium' | 'large' (default: 'medium')
• id?: string
• name?: string

🎨 Design System

The components follow a consistent design system with:

• Button radius: Fully rounded (9999px)
• Card/Input radius: 12px
• Colors: CSS custom properties for easy theming
• Shadows: Layered shadows for depth
• Transitions: Smooth 200ms cubic-bezier animations

🛠️ Development

To build the package:

npm run build

To clean the dist folder:

npm run clean

📄 License

MIT