Legion UI Kit - React Core is a library UI components that built to make your life easier when building web applications with React. It provides a set of reusable and customizable components that follow the token from Legion Design System.

Installation

To install the package into your project:

npm install @legion-ui-kit/react-core

How to Use

1. Import the main css file in your root layout / page project:

   import '@legion-ui-kit/react-core/styles/core-styles.css'

2. Add the token styles from Legion Design System to your project.

   a. Copy paste the css Legion style token to your global / main css file:

   :root {
     --color-base-white: #ffffffff;
     --color-base-black: #212121ff;
     --color-base-transparent: #ffffff00;
     ...
   }

   b. Then import the css file in your root layout / page project:

   import './path/to/your/css/global.css'

   c. You can also add the default Legion token by importing the css file from @legion-ui-kit/react-core/styles package:

   import '@legion-ui-kit/react-core/styles/legion.css'

3. Your Legion components is ready to use inside your project!

   import { Button } from '@legion-ui-kit/react-core';
      
   function App() {
     return (
       <div>
         <Button>Click Me</Button>
       </div>
     );
   }
   export default App;

React Server and Client Components

Legion UI Kit - React Core supports both React Server and Client Components. You can use the components in either type of component without any issues. But for framework that strictly differentiate between Server and Client Components, you need to import the components from different paths.

The main path @legion-ui-kit/react-core contains all of Legion components that can be used in both Server and Client Components but it will trigger a warning if used in a strictly RSC framework like Next.js. To avoid this warning, here are the specific import paths you can use:

import { Button } from '@legion-ui-kit/react-core'; // For both Server and Client Components
import { Button } from '@legion-ui-kit/react-core/client'; // For Client Components
import { Button } from '@legion-ui-kit/react-core/server'; // For Server Components

And here are the list of components that are available in each path:

| Component | Main | Server | Client* | |-----------|------|--------|--------| | Accordion | ✅ | | ✅ | | Alert | ✅ | ✅ | | | Anchor | ✅ | ✅ | | | Avatar | ✅ | ✅ | | | Badge | ✅ | ✅ | | | Breadcrumb | ✅ | ✅ | | | Button | ✅ | ✅ | | | Card | ✅ | ✅ | | | Checkbox | ✅ | ✅ | | | Chip | ✅ | ✅ | | | Divider | ✅ | ✅ | | | Dropdown | ✅ | | ✅ | | Modal | ✅ | | ✅ | | Navbar | ✅ | ✅ | | | Pagination | ✅ | | ✅ | | Progress Bar | ✅ | ✅ | | | Radio | ✅ | ✅ | | | Rating | ✅ | ✅ | | | Select | ✅ | | ✅ | | Sidebar | ✅ | | ✅ | | Snackbar | ✅ | | ✅ | | Spinner | ✅ | ✅ | | | Stepper | ✅ | ✅ | | | Switch | ✅ | ✅ | | | Table | ✅ | ✅ | | | Tabs | ✅ | | ✅ | | Text | ✅ | ✅ | | | TextArea | ✅ | ✅ | | | TextField | ✅ | ✅ | | | Tooltip | ✅ | | ✅ |

*Main: The main path @legion-ui-kit/react-core *Server: The path for Server Components @legion-ui-kit/react-core/server *Client: The path for Client Components @legion-ui-kit/react-core/client