Design System

A modern, scalable, and accessible UI component library built to streamline frontend development.

View Documentation (Storybook)

Tech Stack & Tools

This project leverages a modern ecosystem to ensure performance, type safety, and developer experience:

• React 19: Library for building the component-based UI architecture.
• TypeScript: Provides static typing to catch errors early and improve code maintainability.
• Vite: Next-generation frontend tooling for ultra-fast development and optimized builds.
• Tailwind CSS (v3): A utility-first CSS framework for rapid, responsive, and consistent styling without leaving the HTML.
• Storybook: An isolated environment to build, test, and document UI components independently from the main app.
• GitHub Pages: Automated hosting for the static documentation via CI/CD pipelines.

Architecture: Atomic Design

The library is organized following the Atomic Design methodology to ensure modularity:

• Atoms: Basic building blocks (Buttons, Inputs, Typography).
• Molecules: Groups of atoms functioning together (Project Cards, Form Groups).
• Organisms: Complex UI sections (Responsive Grids, Navbars).

Local Installation

To clone and run this project on your local machine:

1. Clone the repository:

   git clone https://github.com/IniguezMarc/design-system.git
   cd design-system

2. Install dependencies:

   npm install

   npm run ds

   Visit http://localhost:6006 to view the library.

3. Build the library:

   npm run build

Usage as a Package

1. Install the package:

   npm install @iniguezmarc/design-system

2. Import styles: Import the CSS in your main entry file (e.g., main.tsx or App.tsx):

   import '@iniguezmarc/design-system/dist/style.css';

3. Use components:

   import { Button } from '@iniguezmarc/design-system';
   
   function App() {
     return <Button label="Click Me" />;
   }

4. Configure Tailwind (optional): Add the design system preset to your tailwind.config.js:

   module.exports = {
     presets: [require('@iniguezmarc/design-system/tailwind.preset')],
     // ... your config
   }

Created by Marc Iñiguez.