🚀 Klip Components

A modern, flexible, and reusable React component library built with TypeScript and Vite.

✨ Features

• 🎨 Modern Design: Clean and professional UI components
• 🔧 TypeScript: Full TypeScript support with comprehensive type definitions
• 📱 Responsive: Mobile-first design approach
• ♿ Accessible: Built with accessibility best practices in mind
• 🎯 Flexible: Highly customizable with variants and properties
• 📦 Tree Shakable: Import only what you need
• 📚 Well Documented: Complete Storybook documentation

📦 Installation

npm install klip-components
# or
yarn add klip-components
# or
bun add klip-components

🔧 Quick Start

Here's how to import and use some of the components from klip-components.

Button

import { Button } from 'klip-components';

function App() {
  return (
    <Button variant="primary" onClick={() => alert('Button clicked!')}>
      Click Me
    </Button>
  );
}

Input

import { Input } from 'klip-components';
import { useState } from 'react';

function App() {
  const [value, setValue] = useState('');

  return (
    <Input
      label="Username"
      placeholder="Enter your username"
      value={value}
      onChange={setValue}
      helperText="This is a hint for the user."
    />
  );
}

Toggle Switch

import { Toggle } from 'klip-components';
import { useState } from 'react';

function App() {
  const [isEnabled, setIsEnabled] = useState(false);

  return <Toggle label="Enable Feature" checked={isEnabled} onChange={setIsEnabled} />;
}

Button Select

import { ButtonSelect } from 'klip-components';
import { useState } from 'react';

function App() {
  const [selectedValue, setSelectedValue] = useState('option1');
  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  return <ButtonSelect options={options} value={selectedValue} onChange={setSelectedValue} />;
}

📖 Documentation

Explore all components and their variants in our Storybook documentation:

# Clone the repository
git clone https://github.com/deleonagencyorg/klip_components
cd klip-components

# Install dependencies
bun install

# Start Storybook
bun run storybook

Visit http://localhost:6006 to see the interactive component documentation.

🛠️ Development

Prerequisites

• Node.js 22+ or Bun
• React 18+

Setup

# Clone the repository
git clone <repository-url>
cd klip-components

# Install dependencies
bun install

# Start development server
bun run dev

# Start Storybook
bun run storybook

# Build the library
bun run build

# Run linting
bun run lint

Scripts

| Script | Description | | ----------------- | ---------------------------------- | | dev | Start development server | | build | Build the library for production | | storybook | Start Storybook development server | | build-storybook | Build Storybook for production | | lint | Run ESLint | | preview | Preview production build |

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Write TypeScript for all components
• Include proper JSDoc documentation
• Add Storybook stories for new components
• Follow the existing code style
• Test your changes thoroughly

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• npm Package
• Storybook Documentation
• GitHub Issues

🙏 Acknowledgments

• Built with React
• Bundled with Vite
• Documented with Storybook
• Styled with plain CSS and CSS Variables

Made with ❤️ by the Klip team