https://github.com/techwithmanuel/untitledui-js

Explore over 1100+ icons with the Untitled UI style, fully customizable and animated with Framer Motion integration. Free. Open Source.
https://github.com/techwithmanuel/untitledui-js

icons javascript library react react-components react-hooks react-libraries react-library reactjs typescript ui-components ui-design ui-library uikit

Last synced: 7 days ago
JSON representation

Explore over 1100+ icons with the Untitled UI style, fully customizable and animated with Framer Motion integration. Free. Open Source.

• Host: GitHub
• URL: https://github.com/techwithmanuel/untitledui-js
• Owner: techwithmanuel
• License: other
• Created: 2022-11-27T22:50:52.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-09-12T09:41:16.000Z (4 months ago)
• Last Synced: 2025-01-07T03:43:36.395Z (14 days ago)
• Topics: icons, javascript, library, react, react-components, react-hooks, react-libraries, react-library, reactjs, typescript, ui-components, ui-design, ui-library, uikit
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/untitledui-js?activeTab=readme
• Size: 4.22 MB
• Stars: 53
• Watchers: 3
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



Untitled UI Icons




  The official library for using Untitled UI icons with JavaScript. 


  Supports Vue JS, React JS, Solid JS, and Qwik JS.



---

## Preface

`untitledui-js` is now the official library for using Untitled UI icons in JavaScript. This change was approved by Jordan Hughes from Untitled UI, ensuring the legality and long-term safety of the library.

To support this transition, the library has been rewritten from the ground up for consistency across frameworks. The new version emphasizes type safety and an improved developer experience. Moving forward, the current syntax and system are designed to avoid breaking changes.

A notable change is that `untitledui-js` is now the primary library for both animated and non-animated icons. As a result, `untitledui-js-base` will no longer be supported.

Official link: [Untitled UI Icons](http://untitledui.com)

---

## Upgrade to v2.3.0 for React JS

### Key Changes

If you previously used `pathProps` to animate icons, note that a new animation pattern is now required. While the new approach no longer directly adjusts path properties, it introduces more robust options for animating both the path properties and the SVG itself.

### Previous React Versions:

```tsx

import { Activity } from "untitledui-js";

function App() {

  return (

    

  );

}

```

### New Pattern (v2.3.0+):

The new pattern introduces the motion library as an argument for animations, making animations conditional.

```tsx

import { Activity } from "untitledui-js/react";

import { motion } from "motion/react";

function App() {

  return (

    

  );

}

```

## Usage in other frameworks

### Vue JS (motion not supported)

```html

  

  import { Activity } from "untitledui-js/vue";

  export default {

    components: {

      Activity,

    },

  };

```

### Qwik JS (motion not supported)

```tsx

import { component$ } from "@builder.io/qwik";

import { Activity } from "untitledui-js/qwik";

export default component$(() => {

  return (

    


      

    

  );

});

```


### Solid JS (motion not supported)

```tsx

import { Activity } from "untitledui-js/solid";

function App() {

  return ;

}

```