Solarpunk Component Library

A React component library with theming inspired by solarpunk aesthetics. This library provides a collection of unique, eco-futuristic UI components to give your application a distinct, nature-inspired look.

Installation

To install the Solarpunk Component Library along with its peer dependencies, run the following command:

npm install @mkcp/solarpunk react react-dom framer-motion lucide-react react-icons

Or if you're using yarn:

yarn add @mkcp/solarpunk react react-dom framer-motion lucide-react react-icons

After installation, make sure to set up Tailwind CSS in your project by following the official Tailwind CSS installation guide.

Components

Accordion

An expandable accordion component with smooth animations and a nature-inspired design.

Usage:

import { Accordion } from "@mkcp/solarpunk";

const items = [
  { title: "Section 1", content: "Content for section 1" },
  { title: "Section 2", content: "Content for section 2", defaultOpen: true },
];

function MyComponent() {
  return <Accordion items={items} />;
}

Button

A customizable button component with organic shapes and hover effects, perfect for call-to-action elements.

Usage:

import { Button } from "@mkcp/solarpunk";

function MyComponent() {
  return (
    <Button size="medium" onClick={() => console.log("Button clicked")}>
      Click me
    </Button>
  );
}

Dropdown

A stylish dropdown component with a solarpunk-inspired design, featuring soft colors and smooth transitions.

Usage:

import { Dropdown } from "@mkcp/solarpunk";

function MyComponent() {
  return <Dropdown onClick={() => console.log("Dropdown clicked")} />;
}

ProgressBar

A progress bar component with a natural, flowing design that represents completion or loading states.

Usage:

import { ProgressBar } from "@mkcp/solarpunk";

function MyComponent() {
  return <ProgressBar progressValue={75} />;
}

TextInput

A text input component with a solarpunk aesthetic, featuring dynamic resizing and eco-friendly visuals.

Usage:

import { TextInput } from "@mkcp/solarpunk";

function MyComponent() {
  return (
    <TextInput
      label="Enter your name"
      placeholder="John Doe"
      onSubmit={(value) => console.log("Submitted:", value)}
    />
  );
}

SkeletonScreen

A visually appealing loading screen that depicts a city skyline gradually coming to life. It features buildings rising up, followed by an animated sun that brings color and vitality to the scene.

Usage:

import { SkeletonScreen } from "@mkcp/solarpunk";

function LoadingPage() {
  return <SkeletonScreen />;
}

Key features:

• Animated cityscape with buildings of varying heights
• Gradual reveal of buildings to create a loading effect
• Animated sun that appears after the cityscape is fully revealed
• Color transition effect, simulating the spread of greenery through the city

This component is perfect for creating engaging loading experiences that align with the solarpunk theme of harmony between technology and nature.

Colors/Theme

The aesthetic themes are: life, nature, trees, breaking through a cityscape, urban environment

The colour palette is primarily: Tailwind-base colours:

• Green-400
• Slate-100, 200, 600
• Pink-100
• Rose-50, 100
• Sky-50, 100
• Yellow-100

Custom colours:

• 'custom-green': '#00A86B',
• 'custom-pale-green' : '#ACE1AF'

Customization

All components use Tailwind CSS classes for styling. You can customize the appearance by overriding these classes or by providing your own CSS. The components use a solarpunk-inspired color palette, including shades of green, sky blue, and rose.

Browser Compatibility

Solarpunk Component Library is designed to work with modern browsers that support ES6+ and CSS3. For optimal visual effects, we recommend using the latest versions of Chrome, Firefox, Safari, or Edge.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License.