Noodle Seed UI Kit

Noodle Seed UI Kit is a collection of reusable React components designed to make it easier to build elegant and consistent UIs. It is lightweight, customizable, and designed with scalability in mind, helping developers build fast and modern user interfaces.

Features

• Reusable Components: Collection of customizable, well-documented components.
• TailwindCSS Integration: Uses TailwindCSS for rapid styling and consistent design.
• TypeScript Support: Built with TypeScript to provide type safety and better developer experience.
• Storybook Documentation: Preview and experiment with components interactively using Storybook.

Installation

To install the Noodle Seed UI Kit, use npm or yarn:

npm i noodleseed-ui-kit

or

yarn add noodleseed-ui-kit

Note: This package is available on GitHub Packages. Make sure you are authenticated with GitHub Packages and have the correct registry set in your .npmrc file.

Getting Started

Here is a quick example of how to use the Noodle Seed UI Kit in your project:

Import and Use a Component

import React from "react"
import { Button } from "@noodleseed/ui-kit"

function App() {
  return (
    <div>
      <Button onClick={() => alert("Button clicked!")}>Click Me</Button>
    </div>
  )
}

export default App

Components

The UI kit contains a number of reusable components, such as:

• Button: Simple button with customizable label and click handler.
• Card: Component for displaying content in a card layout.
• Input: Customizable input field for text entry.
• Modal: Pop-up dialog box for displaying information or forms.

Each component is documented with examples in Storybook.

TailwindCSS Integration

Noodle Seed UI Kit comes with TailwindCSS, providing you with utility classes to make customization easy. To integrate TailwindCSS styles, ensure your project has TailwindCSS set up or use the provided styles in @noodleseed/ui-kit by importing:

import "@noodleseed/ui-kit/dist/tailwind.css"

Storybook

To view interactive examples of each component, use Storybook:

1. Install Storybook dependencies (if not already done):

   npx sb init

2. Run Storybook:

   npm run storybook

Storybook allows you to see how the components look and behave, helping you experiment with various configurations.

Contributing

We welcome contributions! If you have an idea for a new component, a bug fix, or an improvement, feel free to fork the repository and create a pull request. Please follow the coding conventions and write tests for any new features.

Versioning

This project follows semantic versioning (MAJOR.MINOR.PATCH). For bug fixes, use patch; for new features, use minor; and for breaking changes, use major.

Contact

For questions or support, feel free to open an issue in the GitHub repository or reach out via email.