Forem: KeenThemes

ReUI v1.0.16 - 🚀 Just shipped our biggest update since launch!

KeenThemes — Thu, 26 Jun 2025 10:51:28 +0000

ReUI v1.0.16: Massive Component Library Expansion with animation effects.

🌍 About ReUI

ReUI is an open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui.

🧩 New UI Components

Core Interface Elements

Stepper Component - Guide users through multi-step processes with our intuitive stepper component
File Upload Component - Drag-and-drop file uploads with progress indicators and validation
Tree Component - Display hierarchical data with expandable/collapsible nodes

Enhanced Existing Components

Badge Component - Now supports extended theming options for greater customization
Alert Component - Updated with extended theming capabilities for better brand alignment

✨ Special Effects Components

Transform your UI with these eye-catching components:

Marquee Component - Smooth scrolling text and content animations
GitHub Button Component - Ready-to-use GitHub integration buttons
Avatar Group Component - Stack user avatars with overflow indicators

📝 Text Animation Components

Bring your text to life with our comprehensive text animation library:

Typing Text Component - Simulate real-time typing effects
Word Rotate Component - Smooth word transitions and rotations
Video Text Component - Text effects that play like video animations
SVG Text Component - Vector-based text animations
Counting Number Component - Animated number counting effects
Sliding Number Component - Smooth number transitions
Shimmering Text Component - Elegant shimmer effects for loading states
Text Reveal Component - Progressive text reveals with animations

🌈 Background Effects

Create stunning visual backdrops:

Gradient Background Component - Dynamic gradient backgrounds with customizable colors
Grid Background Component - Dotted and line grid patterns
Hover Background Component - Interactive background effects on hover

Check out the video preview in our X Post

Introducing KtUI

KeenThemes — Fri, 30 May 2025 08:17:54 +0000

Introducing KtUI – A New Open Source UI Library for Tailwind CSS & Vanilla JS

We’re excited to introduce KtUI – open-source UI component library built with Tailwind CSS and Vanilla JavaScript. It draws inspiration from the elegant and accessible design philosophy of shadcn/ui, but is designed to work without a JavaScript framework.

KtUI helps developers build polished user interfaces quickly using just HTML, Tailwind CSS, and plain JavaScript — no frameworks, no build tools, just clean components that work out of the box.

Why KTUI?

shadcn/ui offers a fantastic design system but is tailored specifically for React. KTUI brings similar design principles to developers who want to build using pure HTML and JavaScript. It’s an ideal solution for those looking for a lightweight, framework-agnostic approach.

KTUI delivers composable, accessible components with full control over styling through Tailwind utility classes.

What’s Included?

KTUI includes a comprehensive and growing set of UI components. Below is a selection of what’s currently available:

Base Components

Avatar – User image or placeholder initials.
Alert – Dismissible alerts with optional icons.
Badge – Status indicators and tags.
Breadcrumbs – Navigation hierarchy indicators.
Button – Multiple styles, states, and icons.
Skeleton – Placeholder elements for loading states.
Card – Structured content containers.
Kbd – Inline keyboard key display.
Link – Styled anchor elements.
Pagination – Page navigation controls.
Progress – Visual indicators for loading or steps.
Separator – Horizontal or vertical dividers.

Interactive Elements

Input Fields – Text inputs with validation and styling.
Textarea – Multiline input with Tailwind support.
Switch – Toggle switches with accessibility features.
Checkboxes & Radios – Custom-styled, accessible inputs.
Accordion – Expandable/collapsible sections.
Modal – Dialogs with transitions and focus trapping.
Toast – Temporary notification messages.
Select – Custom dropdowns with search and keyboard nav.
Drawer – Off-canvas panels for side content.
Dropdown – Toggleable action menus.
Tabs – Content panels with switchable navigation.
Tooltip – Contextual popups for hints or info.
ScrollTo – Smooth scroll behavior on click.
ScrollSpy – Auto-highlight sections in view.
Toggle Password – Show/hide password functionality.
Sticky – Elements that stick to the viewport.
ReParent – Dynamically move DOM elements between containers.
Dismiss – Close any element on trigger.
Collapse – Simple content toggling.
Datatable – Interactive tables with sorting, filtering, and pagination.
Stepper – Multi-step form navigation and progress tracking.

Getting Started

KTUI offers multiple ways to integrate into your project. You can use CDN links, install via npm, or include with Tailwind CLI.

Refer to the official installation guide for full setup instructions:

https://ktui.io/docs/installation

Explore the Documentation

Browse components, examples, and usage tips:

https://ktui.io/docs

Used By Metronic

KTUI powers Metronic, the world’s most popular Bootstrap, Tailwind, HTML, React, Next.js admin dashboard template, trusted by over 117,000 developers. If you're building complex UIs like dashboards or admin panels, Metronic shows the full potential of KtUI in production environments.

Roadmap

We're actively working on the following:

More advanced components
Layouts for real world use cases
Theme Customizer
Expanded accessibility and customization options

Feedback and contributions are welcome.

Contribute or Support

KTUI is open-source under the MIT license. Visit the GitHub repository to follow development, contribute, or report issues:

https://github.com/ktui/ktui

Regards,
The Keenthemes Team

Why Bootstrap Users Should Consider Tailwind CSS for Their Next Project ?

KeenThemes — Wed, 18 Sep 2024 14:45:52 +0000

A Bootstrap User’s Guide to Getting Started with Tailwind CSS

Hey everyone! 👋 If you’re a long-time Bootstrap user and are curious about transitioning to Tailwind CSS, this guide is for you. Tailwind is a utility-first CSS framework that offers a radically different approach compared to Bootstrap’s component-based structure. Let’s dive into how you can easily get started with Tailwind as a Bootstrap user!

This improved version ensures that all code blocks are properly formatted and indented, making the guide easier to read and follow.

📌 Why Tailwind CSS?

Before jumping into the tutorial, here’s a quick comparison between Bootstrap and Tailwind:

Bootstrap: A component-based framework that provides pre-built UI components with opinionated design.
Tailwind: A utility-first framework that allows you to style components with low-level utility classes, offering more flexibility and control.

Tailwind shines when you need a highly customized design, but it can feel unfamiliar if you’re used to Bootstrap. So let’s break it down step by step.

1. Setting Up Tailwind in a Project

Step 1: Install Tailwind CSS

To begin using Tailwind CSS, you’ll need to install it in your project. Follow these steps:

Install Tailwind via npm:

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

In your tailwind.config.js file, set up the content array to ensure Tailwind scans your project for classes:

  module.exports = {
    content: [
      './public/**/*.html',
      './src/**/*.{html,js}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

Step 2: Create Your CSS File

Now, create a styles.css file in your project with the following Tailwind directives:

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

Step 3: Include Tailwind in Your HTML

In your HTML files, link the generated CSS file:

<link href="/path-to-your-styles.css" rel="stylesheet">

You’re now ready to start using Tailwind in your project!

2. Understanding the Tailwind Philosophy

If you’re used to Bootstrap’s classes like .container, .row, and .col-6, switching to Tailwind might feel like a big change. In Bootstrap, layout and design decisions are abstracted into components, while in Tailwind, you’re in full control of the design using utility classes.

Example: Creating a Grid Layout

Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Tailwind:

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

In Tailwind, the grid and grid-cols-2 classes replace Bootstrap’s row and col system. The gap-4 class adds spacing between the grid items, and you can adjust everything as needed by tweaking utility classes.

3. Typography and Spacing with Tailwind

One major difference between Bootstrap and Tailwind is how typography and spacing are handled.

Example: Adding Typography and Padding

Bootstrap:

<h1 class="display-4">Hello, Bootstrap!</h1>
<p class="lead">This is a lead paragraph.</p>
<button class="btn btn-primary">Click Me</button>

Tailwind:

<h1 class="text-4xl font-bold">Hello, Tailwind!</h1>
<p class="text-lg">This is a lead paragraph.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded">Click Me</button>

In Tailwind, there are no pre-defined button or heading styles. Instead, you directly apply utility classes (text-4xl, bg-blue-500, px-4, etc.) to build your design exactly the way you want it.

4. Responsive Design

One thing Bootstrap users love is the responsive grid system. Tailwind also has great responsive utilities, but instead of relying on pre-defined breakpoints, you can control styles for different screen sizes using Tailwind's responsive prefixes.

Example: Making an Element Responsive

Bootstrap:

<div class="col-sm-12 col-md-6">Responsive Column</div>

Tailwind:

<div class="w-full md:w-1/2">Responsive Column</div>

In Tailwind, w-full ensures the element takes up the full width on smaller screens, and md:w-1/2 applies the 50% width starting from the md breakpoint (medium screen size).

5. Customizing Tailwind

Just like you may have customized Bootstrap variables, you can extend Tailwind’s utility classes or create your own custom design system. In your tailwind.config.js, you can extend or modify the default theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
}

With this configuration, you can use your custom colors like so:

<button class="bg-primary text-white">Custom Button</button>

6. Migrating Bootstrap Components to Tailwind

If you want to recreate common Bootstrap components (like buttons, navbars, and modals) in Tailwind, it’s all about using the right utilities. Here are a few examples:

Button Component

Bootstrap:

<button class="btn btn-primary">Submit</button>

Tailwind:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Submit
</button>

Navbar Component

Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

Tailwind:

<nav class="flex items-center justify-between p-6 bg-gray-100">
  <a class="text-xl font-bold" href="#">Brand</a>
</nav>

By learning Tailwind's utility classes, you can build complex components with greater flexibility than Bootstrap’s pre-built styles.

7. Using Tailwind Plugins

Tailwind has a rich ecosystem of plugins that extend its functionality. For example, you can easily add forms, typography, or aspect-ratio utilities:

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

In your tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

8. Level Up with Metronic 9 – All-in-One Tailwind UI Toolkit

If you're looking for a Tailwind CSS experience that combines the simplicity and familiarity of Bootstrap, look no further than Metronic 9!

Metronic 9 is an all-in-one Tailwind UI toolkit that brings the best of both worlds: the utility-first power of Tailwind CSS, paired with the structured and component-driven approach you're familiar with from Bootstrap.

Why Choose Metronic 9 for Your Tailwind Projects?

Popular & Trusted: Released back in 2013, Metronic became the number one Admin Dashboard Template on Envato Market with 115,000 sales, and 8000 5-star reviews powering over 3000 SaaS projects worldwide.
Pre-Built Components: Just like Bootstrap, Metronic 9 comes with hundreds of ready-to-use components like buttons, navbars, modals, forms, and more — all powered by Tailwind CSS utilities. This allows you to quickly build modern, responsive UIs without writing custom styles from scratch.
Tailwind + Bootstrap Experience: You get the flexibility of Tailwind with the structured feel of Bootstrap. Whether you’re migrating from Bootstrap or starting fresh, you’ll find the learning curve minimal.
Multiple Layouts: With over 5 app layout demos and 1000+ UI elements, Metronic 9 lets you build complex applications quickly and easily, whether you're working on a SaaS dashboard, admin panel, or a general web app.
Seamless Integration: Metronic 9 integrates perfectly with modern frameworks like React, Next.js, and Angular, giving you a head start on your Tailwind journey with a Bootstrap-like ease of use.

Get Started with Metronic 9 Today!

If you’re transitioning from Bootstrap and want a familiar, feature-packed environment to work with Tailwind, Metronic 9 is the perfect solution. It's designed to save you time and effort, letting you focus on building great products, without getting bogged down by design details.

👉 Check out Metronic 9 here and start creating beautiful UIs with Tailwind’s flexibility and Bootstrap’s simplicity!

9. Conclusion: Is Tailwind the Right Choice for You?

If you’re looking for more customization and control over your design without being restricted by pre-built components,
Tailwind CSS is a great choice. It may take some time to adjust if you’re used to Bootstrap, but once you get comfortable with the utility-first approach, the possibilities are endless!

Feel free to ask any questions or share your experiences in the comments below. Happy coding! 🎉