https://github.com/bobbychan/alice-ui
React Aria Components + Tailwindcss + Tailwind Variants = Alice UI
https://github.com/bobbychan/alice-ui
react-aria react-aria-components tailwind-variants tailwindcss typescript
Last synced: 4 months ago
JSON representation
React Aria Components + Tailwindcss + Tailwind Variants = Alice UI
- Host: GitHub
- URL: https://github.com/bobbychan/alice-ui
- Owner: bobbychan
- License: mit
- Created: 2023-09-03T16:37:34.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-13T08:56:10.000Z (over 1 year ago)
- Last Synced: 2025-02-01T16:02:24.971Z (about 1 year ago)
- Topics: react-aria, react-aria-components, tailwind-variants, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://alice-ui.vercel.app
- Size: 1.41 MB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AliceUI
React Aria Components + Tailwindcss + Tailwind Variants = Alice UI
## Installation
Requirements:
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3](https://tailwindcss.com/) or later
---
To use AliceUI in your project, you need to follow the following steps:
### Install Packages
Run the following command:
```sh
pnpm add @alice-ui/react
```
### Tailwind CSS Setup
AliceUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the officia [installation guide](https://tailwindcss.com/docs/installation) to install Tailwind CSS. Then you need to add the following code to your `tailwind.config.js` file:
```js
// tailwind.config.js
const { aliceui } = require('@alice-ui/react');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
'./node_modules/@alice-ui/theme/dist/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
darkMode: 'selector',
plugins: [aliceui()],
};
```
### Provider Setup
It is essential to add the `AliceUIProvider` at the `root` of your application.
```jsx
import React from 'react';
// 1. import `AliceUIProvider` component
import { AliceUIProvider } from '@alice-ui/react';
function App() {
// 2. Wrap AliceUIProvider at the root of your app
return (
);
}
```
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```bash
public-hoist-pattern[]=*@alice-ui/*
```
After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
## Useful Links
- [NextUI](https://nextui.org)
- [TailwindCSS](https://tailwindcss.com)
- [Tailwind Variants](https://www.tailwind-variants.org)
- [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html)
This project is tested with BrowserStack