📦 ui-elements-ts

A modern React component library styled with Tailwind CSS. Easy to use, tree-shakable, and styleable.

✨ Features

• ⚛️ Built with React + TypeScript
• 🎨 Styled using Tailwind CSS
• 💅 Prebuilt CSS included (dist/index.css)
• 🔧 Supports Theming with Tailwind
• 🧠 Reusable components like Snackbar, Header, ThemeSwitch, TextInput, Radio, TextArea, and more
• 🌙 Built-in dark mode support
• 🧩 Easy integration in Next.js, Vite, CRA, and more
• 🔌 Peer dependency externalization for smaller bundle size
• 🛡️ Type-safe with full TypeScript support

🚀 Installation

npm install ui-elements-ts
# or
yarn add ui-elements-ts

🛠️ Steps to Use

1. Import CSS In your entry file (e.g. index.tsx, main.tsx, or _app.tsx for Next.js):

import 'ui-elements-ts/dist/index.css';

2. Changes in tailwind.config.js, make sure that you add darkmode:class

module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Use Component In your entry file (e.g. index.tsx, main.tsx, or _app.tsx for Next.js):

import React, { useContext } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Header, SnackBarWrapper, ThemeContext, ThemeProvider } from 'ui-elements-ts';
import 'ui-elements-ts/dist/index.css' // Import css from the ui-elements-ts library
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
const AppWrapper = () => {
  const { theme, toggleTheme } = useContext(ThemeContext)
  return (
    <React.Fragment>
      <Header theme={theme} handleThemeChange={toggleTheme} />
      <App />
    </React.Fragment>
  )
}
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <SnackBarWrapper toastPosition='top'>{/* User can change the snackbar position in any of the directions such as top | left | right | bottom */}
        <AppWrapper />
      </SnackBarWrapper>
    </ThemeProvider>
  </React.StrictMode>
);

reportWebVitals();

3. Using multiple libraries such as TextInput,TextArea,Button user can directly import them from the ui-elements-ts:

import { Header, SnackBarWrapper, ThemeContext, ThemeProvider,Button,TextInput,toast,TextArea,ThemeSwitch,Radio,Each,Select } from 'ui-elements-ts';