Tangible UI

A collection of reusable UI components built with Tailwind CSS.

Installation

To install the package, run:

npm install tangible-ui

Setup

Tailwind CSS Configuration Ensure your project is set up with Tailwind CSS. If not, follow these steps:

1- Install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

2- Update your tailwind.config.js file to include the paths for the Tangible UI package:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/tangible-ui/dist/**/*.{js,jsx,ts,tsx}"  // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3- Create and import a tailwind.css file in your project:

Create a tailwind.css file in your src directory with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

4- Import this CSS file in your index.tsx or index.js file:

import './tailwind.css';

Usage

Once you have set up Tailwind CSS, you can use the components from Tangible UI:

import { PrimaryButton, SecondaryButton } from 'tangible-ui';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Test Tangible UI Buttons</h1>
        <PrimaryButton value="Primary Button" onClick={() => alert('Primary Button Clicked!')} />
        <SecondaryButton value="Secondary Button" onClick={() => alert('Secondary Button Clicked!')} />
      </header>
    </div>
  );
};

License

MIT