Project README

Overview

This repository contains Leap's component library using the Atomic Design methodology. The project leverages shadcn for base styled components, which are further customized using TailwindCSS based on Figma designs.

Table of Contents

• Project README
  • Overview
  • Table of Contents
  • Atomic Design System
  • Best Practices
  • Running Locally
  • Technologies Used

Atomic Design System

Atomic Design is a methodology for creating design systems. It consists of five distinct levels:

1. Atoms: Basic building blocks of matter, such as buttons, inputs, and labels.
2. Molecules: Groups of atoms bonded together, e.g., a form group with a label, input, and button.
3. Organisms: Complex UI components composed of molecules and/or atoms, like a navigation bar.
4. Templates: Page-level objects that place components into a layout and articulate the design’s underlying content structure.
5. Pages: Specific instances of templates that show what a UI looks like with real content.

Best Practices

• Component Reusability: Create reusable components to maintain consistency and reduce redundancy.
• TailwindCSS Customization: Use TailwindCSS utility classes to style components according to Figma designs.
• Consistent Naming: Follow a consistent naming convention for components and CSS classes.
• Documentation: Document components and their usage to facilitate collaboration and maintenance.

Running Locally

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-repo/project-name.git
   cd project-name

2. Install dependencies:

   bun install

3. Run the development server:

   bun run storybook

4. Open your browser and navigate to http://localhost:6006 to see the application in action.

5. Share live local preview:

   bun run build-storybook && bunx http-server ./path/to/build

Technologies Used

• React: A JavaScript library for building user interfaces.
• Next.js: A React framework for server-side rendering and static site generation.
• TailwindCSS: A utility-first CSS framework for rapid UI development.
• ShadCN: A component library providing base styled components.
• Storybook: A tool for developing UI components in isolation.