Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 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: mit
- Created: 2022-11-27T22:50:52.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-24T23:22:15.000Z (28 days ago)
- Last Synced: 2025-02-12T02:26:04.209Z (9 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.78 MB
- Stars: 55
- Watchers: 3
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
Untitled UI Icons
The Universal JavaScript Icon Library for Untitled UI
Full SVG Support for React, Vue, Solid, and Qwik
## Overview
`untitledui-js` is the officially sanctioned JavaScript implementation of the Untitled UI icon system, developed with direct approval from Jordan Hughes (Untitled UI founder). This library provides:
- Full SVG compliance with all standard attributes and methods
- Framework-specific implementations for:
- React (v17+)
- Vue (v3+)
- SolidJS (v1+)
- Qwik (v1+)
- TypeScript-first architecture
- Motion integration (React only)
- Tree-shaking support
- Semantic versioning
**Official Design System**: [Untitled UI](http://untitledui.com)
---
## Installation
```bash
# Base installation (framework-agnostic)
npm install untitledui-js
# React with motion support
npm install untitledui-js motion
```
---
## Version Compatibility
| Framework | Supported Versions | Motion Support |
| --------- | ------------------ | -------------- |
| React | 17.x, 18.x, 19.x | Yes |
| Vue | 3.x | No |
| Solid | 1.x | No |
| Qwik | 1.x | No |
---
## Core Principles
### 1. SVG Compliance
All icons are pure SVG components supporting:
- Standard SVG attributes (`viewBox`, `fill`, `stroke`, etc.)
- Direct DOM manipulation
- Class-based styling
- Inline style overrides
- Accessibility attributes (`aria-*`, `role`, etc.)
### 2. Framework Consistency
Identical API surface across frameworks:
```tsx
// React/Solid/Qwik
```
### 3. Motion Integration (React Only)
```tsx
import { motion } from "motion/react";
;
```
---
## React Migration Guide (v2.3.0+)
### Before: Legacy Pattern
```tsx
import { Activity } from "untitledui-js";
function App() {
return (
);
}
```
### After: Modern Pattern
```tsx
import { Activity } from "untitledui-js/react";
import { motion } from "motion/react";
function App() {
return (
);
}
```
**Key Changes:**
- Separate SVG/path animations
- Explicit motion library declaration
- Type-safe animation properties
- No side effects in static implementations
---
## Framework Implementations
### Vue 3
```html
import { Activity } from "untitledui-js/vue";
```
### Qwik
```tsx
import { component$ } from "@builder.io/qwik";
import { Activity } from "untitledui-js/qwik";
export default component$(() => {
return ;
});
```
### SolidJS
```tsx
import { Activity } from "untitledui-js/solid";
function App() {
return ;
}
```
---
## SVG Customization
All SVG properties and methods are fully supported:
### Class-Based Styling
```tsx
```
### Inline Styles
```tsx
```
### Direct Attribute Access
```tsx
```
---
## Contribution Guidelines
1. **Icon Updates**: Submit SVG files through PRs to `src/raw-icons`
2. **Version Bumps**: Use `npm run version` (semantic versioning enforced)
3. **Type Safety**: All icons must pass `tsc --strict` checks
4. **Framework Parity**: Changes must be implemented across all frameworks
---
## License
MIT License
Copyright (c) 2023 Untitled UI & Contributors
See [LICENSE.md](./LICENSE.md) for full text.
[GitHub Repository](https://github.com/techwithmanuel/untitledui-js)