xsreact-ui

XSUI - React UI Library

Welcome to XSUI, a comprehensive React UI library designed to provide developers with a wide array of high-quality components for building modern, responsive, and accessible web applications. Our library is built on React 18, leveraging the latest features and best practices in the ecosystem to ensure your projects are efficient and state-of-the-art.

Features

• Comprehensive Component Set: From basic elements like Buttons and Inputs to complex components such as Accordions, Steppers, and Timelines, XSUI covers a broad spectrum of UI requirements.
• TypeScript Support: Full TypeScript support ensures type safety, autocompletion, and ease of use, enhancing the development experience.
• Tailwind CSS Integration: Styled with Tailwind CSS for easy customization and utility-first styling, making your application look great with minimal effort.
• Accessibility Focused: Accessibility is at the forefront of XSUI, with components designed to be accessible and inclusive.
• Motion Design: Leverage framer-motion for smooth, declarative animations, bringing your UI to life.
• Form Validation: Integrated with Zod for robust form validation, making your forms easier to manage and validate.
• Flexible Theming: Customize and theme your components with our theming capabilities to match your brand identity.

Installation

To get started with XSUI in your project, install the package via npm:

npm install xsui

Or via yarn:

yarn add xsui

Ensure you have the peer dependencies installed:

npm install react react-dom @floating-ui/react framer-motion react-icons zod

Usage

Import the components you need from XSUI and start using them in your project:

import React from 'react';
import { Button, TextField } from 'xsui';

const App = () => {
  return (
    <div className="p-4">
      <Button variant="primary">Click Me</Button>
      <TextField label="Name" placeholder="Enter your name" />
    </div>
  );
};

export default App;

Customizing with Tailwind CSS

XSUI components are styled using Tailwind CSS, making them highly customizable. You can override the styles by using Tailwind's utility classes or configuring your tailwind.config.js to match your design requirements.

Components

XSUI includes a wide range of components categorized into several sections. Here's a brief overview:

• General: Button, Icon, Spinner, Badge...
• Navigation: Navbar, Sidebar, Tabs, Breadcrumbs...
• Data Display: Accordion, Timeline, List, Table, Card...
• Feedback: Snackbar, Alert, Dialog, Progress Stepper...
• Forms: TextField, Checkbox, Radio, Switch, Select, Range...

For detailed documentation on each component, including props, usage examples, and customization options, please refer to the XSUI Documentation.

Contributing

We welcome contributions to XSUI! Whether it's adding new components, fixing bugs, or improving documentation, your help is appreciated. Check out our Contributing Guide for more information on getting started.

License

XSUI is open source and available under the MIT license. Feel free to use it in your projects, and we'd love to hear about your experiences and see what you build!

---

This README provides a starting point for your UI library. Adjust the links, descriptions, and examples according to your actual documentation and repository structure.

• /src/AutoComplete/Item.tsx
• /src/AutoComplete/index.tsx
• /src/Accordion/Context.tsx
• /src/Accordion/Item.tsx
• /src/Accordion/index.tsx
• /src/styles/context.tsx
• /src/styles/ColorContext.tsx
• /src/Alert/index.tsx
• /src/Badge/index.tsx
• /src/Button/index.tsx
• /src/Banner/index.tsx
• /src/Breadcrumbs/index.tsx
• /src/ButtonGroup/index.tsx
• /src/Cards/Card.tsx
• /src/icons/InstallationIcon.tsx
• /src/icons/LightbulbIcon.tsx
• /src/icons/PluginsIcon.tsx
• /src/icons/PresetsIcon.tsx
• /src/icons/ThemingIcon.tsx
• /src/icons/WarningIcon.tsx
• /src/Icon/index.tsx
• /src/Callout/index.tsx
• /src/Carousel/MotionCarousel.tsx
• /src/Carousel/CarouselContext.tsx
• /src/Loader/index.tsx
• /src/Carousel/index.tsx
• /src/Checkbox/index.tsx
• /src/Dialog/DialogContext.tsx
• /src/Dialog/Content.tsx
• /src/Dialog/Title.tsx
• /src/Dialog/Description.tsx
• /src/Dialog/DialogClose.tsx
• /src/Dialog/Button.tsx
• /src/Dialog/index.tsx
• /src/Divider/index.tsx
• /src/Drawer/Context.tsx
• /src/Drawer/DrawerComponent.tsx
• /src/Drawer/index.tsx
• /src/FAB/FABContext.tsx
• /src/FAB/FABItem.tsx
• /src/FAB/FABList.tsx
• /src/FAB/index.tsx
• /src/Forms/FormComponent.tsx
• /src/Forms/index.tsx
• /src/InputFields/EditableTextField.tsx
• /src/InputFields/Email.tsx
• /src/InputFields/InputField.tsx
• /src/InputFields/Keywords.tsx
• /src/Layout/StaticSidebar.tsx
• /src/Layout/index.tsx
• /src/Link/Context.tsx
• /src/Link/LinkComponent.tsx
• /src/Link/index.tsx
• /src/List/ListGroup.tsx
• /src/Menu/MenuContext.tsx
• /src/Menu/MenuTree.tsx
• /src/Menu/MenuItem.tsx
• /src/Menu/MotionMenu.tsx
• /src/Menu/index.tsx
• /src/Navbar/SidebarSlider.tsx
• /src/Navbar/index.tsx
• /src/Notification/index.tsx
• /src/InputFields/Password.tsx
• /src/Radio/index.tsx
• /src/Range/index.tsx
• /src/Rating/index.tsx
• /src/Select/SelectContext.tsx
• /src/Select/Option.tsx
• /src/Select/index.tsx
• /src/Snackbar/index.tsx
• /src/Navbar/Sidebar.tsx
• /src/Spinner/index.tsx
• /src/Switch/index.tsx
• /src/Tab/TabButton.tsx
• /src/Tab/TabContext.tsx
• /src/Tab/TabItem.tsx
• /src/Tab/index.tsx
• /src/Tab/TabComponent.tsx
• /src/InputFields/TextField.tsx
• /src/Timeline/index.tsx
• /src/Views/BoardView.tsx
• /src/Views/ListView.tsx
• /src/Views/GridView.tsx
• /src/Views/TableView.tsx
• /src/common/input.tsx
• /src/Stepper/BulletTextStepper.tsx
• /src/Stepper/CircleSteper.tsx
• /src/Stepper/CircleTextStepper.tsx
• /src/Stepper/DotStepper.tsx
• /src/Stepper/DotTextStepper.tsx
• /src/Stepper/StepperContext.tsx
• /src/Stepper/HorizontalStepper.tsx
• /src/Stepper/PanelStepper.tsx
• /src/Stepper/ProgressStepper.tsx
• /src/Stepper/VerticalStepper.tsx
• /src/Stepper/StepperComponent.tsx