Themer

screenshot of Themer
astro
react
svelte
vue

Themer

Modern theming library for building custom web UIs with tailwindcss and modern Web frameworks

Overview

Tailus Themer is a theming library that provides modern and customizable themes for building your own UI Kit regardless of the Web framework you are using. It is built on top of Tailwind CSS and provides a variety of themes that can be easily customized to match your brand and style.

Features

  • Pre-built themes: Tailus Themer offers a variety of pre-built themes that can be easily customized.
  • Component-level theming: Each component in your application can have its own theme, allowing for easy customization that meets your specific needs.
  • Online customizer: Tailus Themer provides an online customizer for the global theme and specific component themes.
  • Support for multiple JS Frameworks: Tailus Themer supports React, Vue, Svelte, and all modern JS Frameworks.
  • Light mode, dark mode, or both: Generate a specific theme with a specific appearance, choose to build your UI in light mode, dark mode, or both.
  • Consistent customization: Tailus Themer provides a themer plugin to help customize consistently all the components and the look and feel of your website or application.
  • Easy installation: Installing Tailus Themer is simple and can be done by adding the package and the needed component themes to your application.

Installation

To install Tailus Themer, follow these steps:

  1. Install the Tailus Themer package:
npm install tailus-themer
  1. Add the themer as a tailwindcss plugin:
// tailwind.config.js

module.exports = {
  theme: {
    //...
  },
  plugins: [
    require('tailus-themer'),
    //...
  ],
}
  1. Add a path to the @tailus component themes:
// tailwind.config.js

module.exports = {
  theme: {
    //...
  },
  plugins: [
    require('tailus-themer'),
    //...
  ],
  purge: [
    //...
    './node_modules/@tailus/theming/dist/components/**/*.tsx',
    //...
  ],
}
  1. Install the needed component themes packages:
npm install @tailus/theming
  1. Import the needed component themes packages into your application:
// your-app.js

import '@tailus/theme-default';
  1. Add the component themes to the component elements:
// your-app.js

<button className="button-primary">Submit</button>

Summary

Tailus Themer is a powerful theming library that allows for easy customization of themes in web applications. It offers pre-built themes, component-level theming, an online customizer, and support for multiple JS frameworks. Installing Tailus Themer is straightforward, and it provides consistent theming options for creating a unique and branded UI Kit.

astro
Astro

Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.