DEV Community: flamrdevs

Introduction to Xignal

flamrdevs — Sun, 13 Jul 2025 08:13:48 +0000

Xignal is a lightweight, reactive state management library that works across multiple UI frameworks. At its core, Xignal provides three simple primitives:

state – creates reactive values
computed – derives new values from state
effect – reacts to changes and runs side effects

Basic Example

import { state, computed, effect } from "xignal";

const count = state(1);
const doubled = computed(() => count.get() * 2);

effect(() => {
  console.log(`doubled ${doubled.get()}`); // "doubled 2"
});

Framework Support

Xignal works with six major frameworks via dedicated packages:

@xignal/react
@xignal/vue
@xignal/svelte
@xignal/solid
@xignal/preact
@xignal/lit

Each integration provides helpful utilities like useSignalValue and useSignalState that match the framework’s style.

Share State Across Frameworks

Xignal’s core is independent of any framework. That means you can:

Share one signal store across React, Vue, etc.
Build components in different frameworks that use the same data
Migrate between frameworks without rewriting state logic

Perfect for hybrid apps or gradual upgrades.

Extra Features

Persistent state via xignal/storage
Schema validation via xignal/standard-schema

These tools help with long-term app stability and data safety.

Conclusion

Xignal is:

Minimal
Reactive
Cross-framework

It helps you manage state cleanly and consistently—whether you're using one UI framework or several. You can write shared logic once and reuse it across React, Vue, Svelte, Solid, and more.

🔧 Note: Xignal is currently under active development on the road to v1.0. While it's already functional and framework-integrated, APIs may still evolve as the library matures.

Now is a great time to explore Xignal and help shape its future by providing feedback or contributing.

Introducing npmxt : npm e-xtended tools

flamrdevs — Sun, 17 Nov 2024 09:20:01 +0000

What is npmxt?

npmxt is a collection of advanced utilities that enhance your development process with ease and efficiency. Built to extend the capabilities of npm, it offers a set of essential tools that improve productivity. npmxt provides developers with the powerful features needed to accelerate development, reduce manual work, and focus on building great applications.

npmxt is a open source project.

Key Features

Package overview : detailed package information
Package downloads : visualize package downloads stats
SVG service : generate svg badge and chart

Quick Start

Let's start with react package overview

Showing information about the React package, cross-platform install command, and bundle size. The Dependencies tab displays a list of dependencies, including peerDependencies. Switch to the Downloads tab for visualized downloads, and to the SVG Service tab for the generated SVG. Also, use the quick share button to share with the community.

Showing visualized downloads for React package. Chart can be customized and then saved in PNG format. Also, use the quick share button to share with the community.

Let's try the others, Here are the quick links :

react
vue
svelte
solid-js
preact

What's Next?

We plan to roll out as many tools as possible to improve the app further. Stay tuned!

Astrolinkt - Link in Bio Template using Astro, React & TailwindCSS

flamrdevs — Mon, 25 Mar 2024 19:38:11 +0000

Introducing the Astrolinkt Link in Bio Template!

Are you looking to showcase your useful links in a visually appealing and interactive way? Look no further than the Astrolinkt Link in Bio Template. Built with Astro, React and TailwindCSS.

Features

Component-based.
Interactive Components.
Handpicked Icons Library.
Fully Customizable.
Typescript.
Minimal Integration.

Explore the Astrolinkt Link in Bio Template on GitHub and take your links to the next level. If you find this template helpful, consider supporting the project with a donation.

Buy Me A Coffee

Start building your professional link in bio today with Astrolinkt. Happy coding!

Astrovehnt - Bento Portfolio Template using Astro, React & TailwindCSS

flamrdevs — Mon, 25 Mar 2024 19:23:30 +0000

Introducing the Astrovehnt Bento Portfolio Template!

Are you looking to showcase your projects in a visually appealing and interactive way? Look no further than the Astrovehnt Bento Portfolio Template. Built with Astro, React and TailwindCSS.

Features

Component-based.
Interactive Components.
Handpicked Icons Library.
Fully Customizable.
Typescript.
Minimal Integration.

Explore the Astrovehnt Bento Portfolio Template on GitHub and take your portfolio to the next level. If you find this template helpful, consider supporting the project with a donation.

Buy Me A Coffee

Start building your professional bento portfolio today with Astrovehnt. Happy coding!

Introduction to Klass

flamrdevs — Fri, 22 Sep 2023 09:57:05 +0000

Introduction

Klass is a class variant utility library that allows elegant and efficient usage of utility-first CSS framework classes, such as TailwindCSS, UnoCSS, and MasterCSS. It also supports responsive variants, grouping, and slots. Klass is framework agnostic, seamlessly working with any framework. Additionally, Klass provides built-in framework integration for Preact, React, and Solid.

Building A Klass Components

Button

import { klass } from '@klass/core';

const button = klass({
  base: [
    'inline-flex items-center justify-center space-x-1.5 shrink-0 border transition',
    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10',
    'disabled:opacity-50 disabled:pointer-events-none',
  ],
  variants: {
    intent: {
      default: ['bg-white hover:bg-neutral-50 text-neutral-900 border-neutral-300 focus:ring-neutral-500'],
      primary: [
        'bg-blue-600 hover:bg-blue-700 text-white border-blue-700/75 focus:ring-blue-600 hover:border-blue-700',
      ],
      secondary: [
        'bg-orange-600 hover:bg-orange-700 text-white border-orange-700/75 focus:ring-orange-600 hover:border-orange-700',
      ],
    },
    size: {
      sm: 'px-3 py-1.5 text-xs font-medium',
      md: 'px-4 py-2 text-sm font-medium',
      lg: 'px-5 py-2.5 text-lg font-semibold',
    },
    radius: {
      md: 'rounded-md',
    },
  },
  defaultVariants: {
    intent: 'default',
    size: 'md',
    radius: 'md',
  },
});

export default button;

Box

import { reklass } from '@klass/core';

const box = reklass({
  conditions: {
    base: '',
    sm: 'sm:',
    md: 'md:',
    lg: 'lg:',
    xl: 'xl:',
    '2xl': '2xl:',
  },
  defaultCondition: 'base',
  variants: {
    d: {
      none: 'hidden',
      block: 'block',
      iblock: 'inline-block',
      flex: 'flex',
      iflex: 'inline-flex',
    },
    ai: {
      start: 'items-start',
      end: 'items-end',
      center: 'items-center',
    },
    jc: {
      start: 'justify-start',
      end: 'justify-end',
      center: 'justify-center',
    },
    gap: {
      none: 'gap-0',
      xs: 'gap-2',
      sm: 'gap-4',
      md: 'gap-6',
      lg: 'gap-8',
      xl: 'gap-10',
    },
    m: {
      none: 'm-0',
      xs: 'm-2',
      sm: 'm-4',
      md: 'm-6',
      lg: 'm-8',
      xl: 'm-10',
    },
    p: {
      none: 'p-0',
      xs: 'p-2',
      sm: 'p-4',
      md: 'p-6',
      lg: 'p-8',
      xl: 'p-10',
    },
    sx: {
      none: 'space-x-0',
      xs: 'space-x-2',
      sm: 'space-x-4',
      md: 'space-x-6',
      lg: 'space-x-8',
      xl: 'space-x-10',
    },
    sy: {
      none: 'space-y-0',
      xs: 'space-y-2',
      sm: 'space-y-4',
      md: 'space-y-6',
      lg: 'space-y-8',
      xl: 'space-y-10',
    },
    tz: {
      xs: 'text-xs',
      sm: 'text-sm',
      md: 'text-base',
      lg: 'text-lg',
      xl: 'text-xl',
    },
    ff: {
      sans: 'fomt-sans',
      mono: 'fomt-mono',
    },
    fw: {
      '3': 'font-light',
      '4': 'font-normal',
      '5': 'font-medium',
      '6': 'font-semibold',
      '7': 'font-bold',
    },
  },
});

export default box;

Usage Of Klass Components

This is an example usage with Astro.

<div class={box({ d:"block", p: "sm", sy: { base: "xs", md: "md", xl: "lg" } })}>
  <div>
    <h2 class={box({ tz: "lg", fw: "7" })}>Intent</h2>
    <div class={box({ d:"flex", ai: "center", gap: "sm", p: "sm" })}>
      <button class={button()}>default</button>
      <button class={button({ intent: "primary" })}>primary</button>
      <button class={button({ intent: "secondary" })}>secondary</button>
    </div>
  </div>

  <div>
    <h2 class={box({ tz: "lg", fw: "7" })}>Size</h2>
    <div class={box({ d:"flex", ai: "center", gap: "sm", p: "sm" })}>
      <button class={button({ size: "sm" })}>small</button>
      <button class={button({ size: "md" })}>medium</button>
      <button class={button({ size: "lg" })}>large</button>
    </div>
  </div>

  <div>
    <h2 class={box({ tz: "lg", fw: "7" })}>Disabled</h2>
    <div class={box({ d:"flex", ai: "center", gap: "sm", p: "sm" })}>
      <button disabled class={button({ size: "sm" })}>small</button>
      <button disabled class={button({ size: "md", intent: "primary" })}>medium</button>
      <button disabled class={button({ size: "lg", intent: "secondary" })}>large</button>
    </div>
  </div>
</div>

There are numerous reusable components available for use, such as cards, forms, and many others.

Conclusion

Building efficient and maintainable applications relies heavily on the use of reusable UI components. When we combine the power of utility-first css and Klass, we unlock the ability to create reusable components that not only save time but also elevate our app's visual appeal. With Klass at our disposal, we can effortlessly craft sleek and professional-looking components, boosting productivity and fostering seamless collaboration among team members. By embracing the concept of reusability, we pave the way for enhanced productivity and smooth integration of new features into our application.

Link to GitHub repository

More examples