Skip to content

Commit

Permalink
new Readme with sponsors
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbohlender
bbohlender committed Jun 4, 2024
1 parent 0c25264 commit f2380ba
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 36 deletions.
63 changes: 41 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
<h1>uikit</h1>

[![Version](https://img.shields.io/npm/v/@react-three/uikit?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/uikit)
[![Downloads](https://img.shields.io/npm/dt/@react-three/uikit.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/uikit)
[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)
[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)

![uikit banner](./docs/getting-started/banner.jpg)

Build performant 3D user interfaces for **Three.js** using **@react-three/fiber** and **yoga** with support for nested scrolling, buttons, inputs, dropdowns, tabs, checkboxes, and more.
<p align="center">
<img src="./docs/getting-started/logo.svg" width="100" />
</p>

<h1 align="center">uikit</h1>
<h3 align="center">Build performant 3D user interfaces for<br/> threejs using R3F and yoga.</h3>
<br>

<p align="center">
<a href="https://npmjs.com/package/@react-three/uikit" target="_blank">
<img src="https://img.shields.io/npm/v/@react-three/uikit?style=flat&colorA=000000&colorB=000000" alt="NPM" />
</a>
<a href="https://npmjs.com/package/@react-three/uikit" target="_blank">
<img src="https://img.shields.io/npm/dt/@react-three/uikit.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" />
</a>
<a href="https://twitter.com/pmndrs" target="_blank">
<img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter">
</a>
<a href="https://discord.gg/ZZjjNvJ" target="_blank">
<img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord">
</a>
</p>

> Perfect for games, XR (VR/AR), and any web-based Spatial Computing App.
Expand Down Expand Up @@ -36,18 +48,6 @@ createRoot(document.getElementById('root')).render(
)
```

## Pre-styled component kits

We provide multiple kits containing **themable pre-styled components**. Inspired by shadcn, you can use our CLI to install the source code of any component to your desired loaction with one command.

> For example, to add the button from the default kit, run: `npx uikit component add default Button`
| <h3>default</h3> _based on [Shadcn](https://github.com/shadcn-ui/ui)_ | <h3>apfel</h3> _inspired by AVP_ |
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| ![Overview over all default components](./docs/getting-started/default-overview.jpg) | ![Overview over all apfel components](./docs/getting-started/apfel-overview.jpg) |
| [View All Components](https://docs.pmnd.rs/uikit/kits/default) | [View All Components](https://docs.pmnd.rs/uikit/kits/apfel) |
| `npx uikit component add default Button` | `npx uikit component add apfel Button` |

## How to get started

> Some familiarity with
Expand All @@ -66,8 +66,27 @@ Get started with **[building your first layout](https://docs.pmnd.rs/uikit/getti
- [Optimize performance](https://docs.pmnd.rs/uikit/advanced/performance)
- [Theming components](https://docs.pmnd.rs/uikit/kits/theming)


## Pre-styled component kits

We provide multiple kits containing **themable pre-styled components**. Inspired by shadcn, you can use our CLI to install the source code of any component to your desired loaction with one command.

> For example, to add the button from the default kit, run: `npx uikit component add default Button`
| <h3>default</h3> _based on [Shadcn](https://github.com/shadcn-ui/ui)_ | <h3>apfel</h3> _inspired by AVP_ |
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| ![Overview over all default components](./docs/getting-started/default-overview.jpg) | ![Overview over all apfel components](./docs/getting-started/apfel-overview.jpg) |
| [View All Components](https://docs.pmnd.rs/uikit/kits/default) | [View All Components](https://docs.pmnd.rs/uikit/kits/apfel) |
| `npx uikit component add default Button` | `npx uikit component add apfel Button` |

## Migration guides

- from [Koestlich](https://docs.pmnd.rs/uikit/migration/from-koestlich)
- from [HTML/CSS](https://docs.pmnd.rs/uikit/migration/from-html-css)
- from [Tailwind](https://docs.pmnd.rs/uikit/migration/from-tailwind)

## Sponsors

This project is support by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!

![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)
54 changes: 40 additions & 14 deletions docs/getting-started/introduction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,28 @@ description: uikit brings user interfaces to @react-three/fiber
nav: 0
---

![uikit banner](./banner.jpg)

Build performant 3D user interfaces for **Three.js** using **@react-three/fiber** and **yoga** with support for nested scrolling, buttons, inputs, dropdowns, tabs, checkboxes, and more.
<p align="center">
<img src="logo.svg" width="100" />
</p>

<h1 align="center">uikit</h1>
<h3 align="center">Build performant 3D user interfaces for<br/> threejs using R3F and yoga.</h3>
<br>

<p align="center">
<a href="https://npmjs.com/package/@react-three/uikit" target="_blank">
<img src="https://img.shields.io/npm/v/@react-three/uikit?style=flat&colorA=000000&colorB=000000" alt="NPM" />
</a>
<a href="https://npmjs.com/package/@react-three/uikit" target="_blank">
<img src="https://img.shields.io/npm/dt/@react-three/uikit.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" />
</a>
<a href="https://twitter.com/pmndrs" target="_blank">
<img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter">
</a>
<a href="https://discord.gg/ZZjjNvJ" target="_blank">
<img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord">
</a>
</p>

> Perfect for games, XR (VR/AR), and any web-based Spatial Computing App.
Expand Down Expand Up @@ -35,17 +54,6 @@ createRoot(document.getElementById('root')).render(
)
```

## Pre-styled component kits

We provide multiple kits containing **themable pre-styled components**. Inspired by shadcn, you can use our CLI to install the source code of any component to your desired loaction with one command.
> For example, to add the button from the default kit, run: `npx uikit component add default Button`
| <h3>default</h3> _based on [Shadcn](https://github.com/shadcn-ui/ui)_ | <h3>apfel</h3> _inspired by AVP_ |
| --------------------------------------------------------------------- | ----------------------------------------------------------- |
| ![Overview over all default components](./default-overview.jpg) | ![Overview over all apfel components](./apfel-overview.jpg) |
| [View All Components](../kits/default.md) | [View All Components](../kits/apfel.md) |
| `npx uikit component add default Button` | `npx uikit component add apfel Button` |

## How to get started

> Some familiarity with
Expand All @@ -64,8 +72,26 @@ Get started with **[building your first layout](./first-layout.md)**, take a loo
- [Optimize performance](../advanced/performance.md)
- [Theming components](../kits/theming.md)

## Pre-styled component kits

We provide multiple kits containing **themable pre-styled components**. Inspired by shadcn, you can use our CLI to install the source code of any component to your desired loaction with one command.
> For example, to add the button from the default kit, run: `npx uikit component add default Button`
| <h3>default</h3> _based on [Shadcn](https://github.com/shadcn-ui/ui)_ | <h3>apfel</h3> _inspired by AVP_ |
| --------------------------------------------------------------------- | ----------------------------------------------------------- |
| ![Overview over all default components](./default-overview.jpg) | ![Overview over all apfel components](./apfel-overview.jpg) |
| [View All Components](../kits/default.md) | [View All Components](../kits/apfel.md) |
| `npx uikit component add default Button` | `npx uikit component add apfel Button` |

## Migration guides

- from [Koestlich](../migration/from-koestlich.md)
- from [HTML/CSS](../migration/from-html-css.md)
- from [Tailwind](../migration/from-tailwind.md)


## Sponsors

This project is support by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!

![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)
28 changes: 28 additions & 0 deletions docs/getting-started/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f2380ba

Please sign in to comment.