LX-UI

Based on Radix UI and Tailwind CSS. Works great with Next.js!

English / 简体中文

Document

Introduction

LX-UI is a set of React component library developed based on Radix UI and Tailwind CSS.

The purpose of creating this project is to solve the issue of UI consistency for my personal development project, Le-AI. The initial version may be relatively simple 🤣🤣, but it will gradually iterate and improve in the future.

Features

• 💎 Based on Radix UI, it enriches and extends some components
• 🔥 Utilizes Tailwind CSS for easy customization of styles in the future
• 🎉 Supports Typescript
• 📱 Responsive design support

Setup

Environment

• It is recommended to use pnpm for installation (although npm or yarn can also be used)

  npm i -g pnpm

• Installing Tailwind CSS

  Since LX-UI is based on Tailwind CSS, you need to install and configure Tailwind CSS in your project in order to use it properly. Tailwind CSS installation guide

Install

pnpm add @ltopx/lx-ui

Configuring

Since LX-UI is developed based on Tailwind CSS, you need to modify the tailwind.config.js file in your project and add the relevant configurations for LX-UI.

• Add presets configuration.
• Configure content path to resolve LX-UI components.

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("@ltopx/lx-ui/dist/presets")],
  content: ["./node_modules/@ltopx/lx-ui/dist/**/*.{mjs,js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Usage

import { Select } from "@ltopx/lx-ui";

export default function Home() {
  return <Select placeholder="请选择" options={[1, 2, 3]} />;
}

License

MIT License © 2023 Powered by LTopx