https://github.com/supreeth-kashyap/pada

Pada

For standing, aims to deliver a foundational and stable design system for scale.

Objective

Build a headless design system that provides super flexibility to use for any web apps yet gives global and local control

<aside>

Library: React.js

Language: Typescript

Figma: Design file

GitHub: Code link

</aside>

Problems with traditional DS

• Existing DS requires lot of dependency package installations
• Raising potential vulnerability concerns and difficult maintenance
• No flexibility for styling and theming.
• Styling a headless library would consume months of effort

How Pada solves it?

• Inheritance of styling with global, semantic and component tokenization
• Native CSS styling with no dependency packages
• Separation of form and function giving a clean code
• Easy maintenance and flexible to update

<aside>

Clean file structure for easy access and maintenance

</aside>

<aside>

Separation of styles from component giving clean code

</aside>

<aside>

Clean functional component

import React from 'react';
import './Checkbox.css';

export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
}

export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((
  { label, ...props },
  ref
) => {
  const id = React.useId();
  return (
    <div className="checkbox-wrapper">
      <input
        ref={ref}
        id={id}
        type="checkbox"
        className="checkbox"
        {...props}
      />
      {label && <label htmlFor={id} className="checkbox-label">{label}</label>}
    </div>
  );
});

</aside>