PHPackages                             studiometa/ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. studiometa/ui

ActiveComposer-plugin[Templating & Views](/categories/templating)

studiometa/ui
=============

A set of opiniated, unstyled and accessible components.

1.8.0(1mo ago)1113.8k↓38.1%1[17 issues](https://github.com/studiometa/ui/issues)[6 PRs](https://github.com/studiometa/ui/pulls)2MITTypeScriptPHP ^8.3CI passing

Since Feb 1Pushed 1mo ago8 watchersCompare

[ Source](https://github.com/studiometa/ui)[ Packagist](https://packagist.org/packages/studiometa/ui)[ RSS](/packages/studiometa-ui/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (21)Versions (120)Used By (2)

@studiometa/ui
==============

[](#studiometaui)

[![NPM Version](https://camo.githubusercontent.com/6d9d736ed24f45f54394a93b74a5ebc6b31d63b315936c35fb2f7158b9fbaf85/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4073747564696f6d6574612f75692e7376673f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533)](https://www.npmjs.com/package/@studiometa/ui/)[![Downloads](https://camo.githubusercontent.com/5848a329317847adc172a4cacc467f6e6243ce94ecf4ab964a32d55bd43172a0/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f4073747564696f6d6574612f75693f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533)](https://www.npmjs.com/package/@studiometa/ui/)[![Size](https://camo.githubusercontent.com/4809cd21444d4d17c00396d02952d107ca520c08f18202ea730ef08be606faba/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e7a69702f4073747564696f6d6574612f75693f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533266c6162656c3d73697a65)](https://bundlephobia.com/package/@studiometa/ui)[![Codecov](https://camo.githubusercontent.com/e2efc3f4fecc45b79f3286fc63605ffedab4ec589da0523432f91117e5cf5a54/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f6769746875622f73747564696f6d6574612f75693f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533)](https://camo.githubusercontent.com/e2efc3f4fecc45b79f3286fc63605ffedab4ec589da0523432f91117e5cf5a54/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f6769746875622f73747564696f6d6574612f75693f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533)

> A set of JS and Twig components powered by [@studiometa/js-toolkit](https://github.com/studiometa/js-toolkit), [Tailwind CSS](https://tailwindcss.com/) and [studiometa/twig-toolkit](https://github.com/studiometa/twig-toolkit).

Installation
------------

[](#installation)

Install the latest version via NPM:

```
npm install @studiometa/ui
```

If you need the Twig templates as well, install the Twig extension via Composer and load it in your application:

```
composer require studiometa/ui
```

Usage
-----

[](#usage)

Import the components from the package as needed:

```
import { Base, createApp } from '@studiometa/js-toolkit';
import { Action, Frame, Modal, ScrollAnimation, ScrollReveal, Slider } from '@studiometa/ui';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Action,
      Frame,
      Modal,
      ScrollAnimation,
      ScrollReveal,
      Slider,
    },
  };
}

export default createApp(App);
```

Heads up to [ui.studiometa.dev](https://ui.studiometa.dev) for more informations.

Contributing
------------

[](#contributing)

Please read the [contribution docs](https://ui.studiometa.dev/guide/contributing/).

[![Open in Gitpod](https://camo.githubusercontent.com/6a4edb76a7e92e0faad09a11e42cba7c39803ee6723f8cb1b801f91113d59695/68747470733a2f2f676974706f642e696f2f627574746f6e2f6f70656e2d696e2d676974706f642e737667)](https://gitpod.io/#https://github.com/studiometa/ui)

###  Health Score

55

—

FairBetter than 98% of packages

Maintenance70

Regular maintenance activity

Popularity32

Limited adoption so far

Community23

Small or concentrated contributor base

Maturity81

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 84.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~17 days

Recently: every ~34 days

Total

89

Last Release

54d ago

Major Versions

0.2.53 → 1.0.0-alpha.02024-07-29

0.2.54 → 1.0.0-alpha.12024-07-31

PHP version history (3 changes)0.2.0PHP ^7.3|^8.0

1.0.0-alpha.13PHP ^8.1

1.8.0PHP ^8.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/7e88435dae9fed57464c2668f35d4c7dd7f874e55e9727972369538d639d6373?d=identicon)[titouanmathis](/maintainers/titouanmathis)

---

Top Contributors

[![titouanmathis](https://avatars.githubusercontent.com/u/250145?v=4)](https://github.com/titouanmathis "titouanmathis (1589 commits)")[![renovate-bot](https://avatars.githubusercontent.com/u/25180681?v=4)](https://github.com/renovate-bot "renovate-bot (85 commits)")[![antoine4livre](https://avatars.githubusercontent.com/u/32898457?v=4)](https://github.com/antoine4livre "antoine4livre (62 commits)")[![Liax](https://avatars.githubusercontent.com/u/10088171?v=4)](https://github.com/Liax "Liax (54 commits)")[![perruche](https://avatars.githubusercontent.com/u/11503190?v=4)](https://github.com/perruche "perruche (47 commits)")[![depfu[bot]](https://avatars.githubusercontent.com/in/715?v=4)](https://github.com/depfu[bot] "depfu[bot] (17 commits)")[![KeziahMoselle](https://avatars.githubusercontent.com/u/9168097?v=4)](https://github.com/KeziahMoselle "KeziahMoselle (14 commits)")[![jeremschelb](https://avatars.githubusercontent.com/u/55983109?v=4)](https://github.com/jeremschelb "jeremschelb (13 commits)")[![Guillaume-meta](https://avatars.githubusercontent.com/u/5331746?v=4)](https://github.com/Guillaume-meta "Guillaume-meta (5 commits)")[![jverneaut](https://avatars.githubusercontent.com/u/16637472?v=4)](https://github.com/jverneaut "jverneaut (2 commits)")[![coraliebach](https://avatars.githubusercontent.com/u/65704746?v=4)](https://github.com/coraliebach "coraliebach (1 commits)")

---

Tags

componentsdesign-systemfront-endjavascripttwigui-kit

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StylePHP\_CodeSniffer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/studiometa-ui/health.svg)

```
[![Health](https://phpackages.com/badges/studiometa-ui/health.svg)](https://phpackages.com/packages/studiometa-ui)
```

###  Alternatives

[twig/intl-extra

A Twig extension for Intl

36763.2M221](/packages/twig-intl-extra)[rcrowe/twigbridge

Adds the power of Twig to Laravel

9105.9M50](/packages/rcrowe-twigbridge)[twig/string-extra

A Twig extension for Symfony String

22046.0M133](/packages/twig-string-extra)[twig/cssinliner-extra

A Twig extension to allow inlining CSS

22918.5M55](/packages/twig-cssinliner-extra)[symfony/ux-twig-component

Twig components for Symfony

21914.8M162](/packages/symfony-ux-twig-component)[twig/markdown-extra

A Twig extension for Markdown

12114.3M83](/packages/twig-markdown-extra)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)