https://github.com/studiometa/ui

📦 A set of opiniated, unstyled and accessible components
https://github.com/studiometa/ui

components design-system twig ui-kit

Last synced: 3 months ago
JSON representation

📦 A set of opiniated, unstyled and accessible components

• Host: GitHub
• URL: https://github.com/studiometa/ui
• Owner: studiometa
• License: mit
• Created: 2021-09-27T09:08:44.000Z (over 4 years ago)
• Default Branch: develop
• Last Pushed: 2025-03-14T08:56:27.000Z (10 months ago)
• Last Synced: 2025-03-14T09:37:25.363Z (10 months ago)
• Topics: components, design-system, twig, ui-kit
• Language: TypeScript
• Homepage: https://ui.studiometa.dev/-/
• Size: 8.22 MB
• Stars: 10
• Watchers: 10
• Forks: 1
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# @studiometa/ui

[![NPM Version](https://img.shields.io/npm/v/@studiometa/ui.svg?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/)

[![Downloads](https://img.shields.io/npm/dm/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/)

[![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853&label=size)](https://bundlephobia.com/package/@studiometa/ui)

![Codecov](https://img.shields.io/codecov/c/github/studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)

> 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

Install the latest version via NPM:

```bash

npm install @studiometa/ui

```

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

```bash

composer require studiometa/ui

```

## Usage

Import the components from the package as needed:

```js

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

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

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/studiometa/ui)