Skip to content

Latest commit

 

History

History
89 lines (63 loc) · 2.22 KB

README.md

File metadata and controls

89 lines (63 loc) · 2.22 KB

Here’s a sample README for your GitHub repo:

Headless UI Combobox Components Example

This repository showcases examples of Combobox components developed using the Headless UI Library. The project leverages modern front-end technologies to build accessible, customizable, and reusable UI components.

🚀 Technologies Used

  • TypeScript: For robust and type-safe JavaScript development.
  • Next.js: As the React framework for building the project.
  • React: For building component-based user interfaces.
  • Tailwind CSS: To style the application with utility-first CSS.
  • Headless UI: For accessible, unstyled UI components.
  • Storybook: For documenting and testing the Combobox components in isolation.

📂 Project Structure

The repository is organized as follows:

/components
    Combobox/    # Combobox component implementations
/pages
    index.tsx    # Example implementation of the Combobox components
/stories
    Combobox.stories.tsx # Storybook stories for the Combobox components

🧩 Features

  • Accessible Combobox: Developed with Headless UI, ensuring accessibility out-of-the-box.
  • Customizable and Reusable: Designed with Tailwind CSS for easy customization and integration.
  • Type-Safe: Implemented in TypeScript to prevent runtime errors.
  • Isolated Testing: Combobox components are documented and tested using Storybook.

🔧 Getting Started

Follow these steps to run the project locally:

Prerequisites

Ensure you have the following installed:

  • Node.js (>= 16.x)
  • npm or yarn

Installation

  1. Clone the repository: 
    git clone https://github.com/username/headless-ui-combobox-example.git
  2. Navigate to the project directory: 
    cd headless-ui-combobox-example
  3. Install dependencies: 
    npm install
# or
yarn install

Running the Application

Start the Next.js development server:

npm run dev
# or
yarn dev

Visit http://localhost:3000 to see the project in action.

Storybook

To view the components in isolation:

npm run storybook
# or
yarn storybook

Visit http://localhost:6006 to explore the Storybook interface.