jem-ui-components

Document @jem-open/jem-ui React component props, variants, and design tokens.

3|1|Updated Mar 9, 2026

Search Tags:#documentation #react #props #design-tokens #variants #component-reference #jem-ui

Ready to run

npx skills add https://github.com/Jem-Open/jem-agent-skills --skill jem-ui-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: jem-ui-components
Source: https://github.com/Jem-Open/jem-agent-skills/tree/main/skills/jem-ui-components
Command: npx skills add https://github.com/Jem-Open/jem-agent-skills --skill jem-ui-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive reference for the jem-ui component library, including prop definitions, component variants, design tokens, setup steps, and common mistakes to avoid re-implementing UI elements.

Core Features & Use Cases

Detailed component catalog covering forms, navigation, data display, and feedback with examples and token references.
Setup and integration guidance for React projects using jem-ui, including style imports and Tailwind preset configuration.
Practical usage scenarios and best practices to ensure consistent UI implementation across projects.

Quick Start

Provide ready-to-use React snippets and guidance for common jem-ui components.

Frequently Asked Questions about jem-ui-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement React UI components using design tokens and variants?▼

To implement React UI components using design tokens and variants, reference the component catalog for prop definitions, style imports, and practical usage examples. It covers forms, navigation, data display, and feedback elements to ensure consistent adoption.

What is the setup process for integrating a React component library with Tailwind?▼

The setup process involves configuring the Tailwind preset and importing the necessary stylesheets into your React project. This ensures the design tokens render correctly across all UI elements.

Can I use these React components for forms and navigation simultaneously?▼

Yes, you can use these React components for forms and navigation simultaneously. The reference covers multiple categories including forms, navigation, data display, and feedback, providing practical usage scenarios for each.

What's the best way to avoid re-implementing UI elements in React projects?▼

The best way to avoid re-implementing UI elements is to follow the component reference for accurate prop definitions, variants, and design tokens. Adopting these usage patterns prevents duplicate UI code.

Why does my React component styling break after importing the UI library?▼

React component styling breaks when the Tailwind preset configuration is incomplete or style imports are missing. Verify your setup steps against the integration guidance to ensure tokens apply correctly.