smartly-ui

Lightweight React UI component library with native CSS and modern design system.

Installation

Install the package and its peer dependencies:

# Install the package
npm install smartly-ui

# Install peer dependencies
npm install react react-dom @emotion/react @emotion/styled lucide-react

Available Components

• Button - Various button styles and variants
• Card - Container component for content
• Input - Form input field
• Typography - Text components with consistent styling
• SmartlyHeader - Application header component
• SmartlyFooter - Application footer component
• SmartlySideBar - Side navigation component
• SmartlyLogin - Login form component
• SmartlyProfileCard - User profile card
• SmartlyAppsCard - Application cards for dashboard

Basic Usage

Import and use components in your React components:

Button Component

import { Button } from 'smartly-ui';

function App() {
  return (
    <div className="flex gap-4 p-4">
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button disabled>Disabled</Button>
    </div>
  );
}

Card Component

import { Card, CardHeader, CardContent, CardFooter } from 'smartly-ui';

function UserProfile() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <h2 className="text-2xl font-bold">User Profile</h2>
      </CardHeader>
      <CardContent>
        <p>Welcome back, John Doe!</p>
        <p className="text-gray-600">Last login: Today at 10:30 AM</p>
      </CardContent>
      <CardFooter>
        <Button variant="primary">View Profile</Button>
      </CardFooter>
    </Card>
  );
}

Input Component

import { Input } from 'smartly-ui';

function SearchBar() {
  return (
    <div className="w-full max-w-md">
      <Input 
        placeholder="Search..."
        // Other props: type, disabled, value, onChange, etc.
      />
    </div>
  );
}

Layout Components

import { SmartlyHeader, SmartlySideBar, SmartlyFooter } from 'smartly-ui';

function AppLayout({ children }) {
  return (
    <div className="min-h-screen flex flex-col">
      <SmartlyHeader 
        title="My Application"
        user={{ name: 'John Doe', email: '[email protected]' }}
      />
      <div className="flex flex-1">
        <SmartlySideBar 
          items={[
            { label: 'Dashboard', icon: 'home', href: '/dashboard' },
            { label: 'Profile', icon: 'user', href: '/profile' },
            { label: 'Settings', icon: 'settings', href: '/settings' }
          ]} 
        />
        <main className="flex-1 p-6">
          {children}
        </main>
      </div>
      <SmartlyFooter 
        links={[
          { label: 'Terms', href: '/terms' },
          { label: 'Privacy', href: '/privacy' },
          { label: 'Contact', href: '/contact' }
        ]}
      />
    </div>
  );
}

Styling

Components come with built-in styling that follows a consistent design system. For custom styling, you can use standard CSS or CSS-in-JS solutions to override the component styles as needed.

Using Components

import { Button, Card, CardHeader, CardContent } from "smartly-ui";

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <h2 className="text-xl font-semibold">Hello</h2>
      </CardHeader>
      <CardContent>
        <Button variant="primary">Click me</Button>
      </CardContent>
    </Card>
  );
}

Development

Local Development Setup

To test the package locally during development, you can use npm link:

1. In the smartly-ui directory, run:

   npm link

2. In your project that uses smartly-ui, link to the local package:

   npm link smartly-ui

3. Start the development build with watch mode:

   npm run dev

   This will automatically rebuild the package when you make changes.

Other Commands

• Build: npm run build
• Typecheck: npm run typecheck

License

MIT