A React component library styled with Stitches, designed specifically for HostStack's internal projects and design system.
This library is built specifically for HostStack's design system and internal use cases. While it's open-sourced for transparency and potential inspiration, it's not intended as a general-purpose component library for public consumption.
- ✅ Use if: You're working on HostStack projects or want to study the implementation
- ❌ Consider alternatives if: You need a general-purpose UI library for your own projects
For general-purpose React component libraries, consider Chakra UI, Mantine, Ant Design, or Material-UI instead.
- 🎨 Modern Design System - Carefully crafted components with consistent theming
- 🏗️ Built for React - Compatible with React 19+
- 🎯 TypeScript First - Full type safety with comprehensive TypeScript definitions
- 📱 Responsive - Mobile-first design with flexible breakpoint system
- 🎭 Theming - Light/dark mode support with Stitches CSS-in-JS
- ⚡ Performance - Tree-shakeable with minimal runtime overhead
- 📖 Well Documented - Auto-generated API documentation from TypeScript interfaces
# Using pnpm (recommended)
pnpm add @hoststack/ui
# Using npm
npm install @hoststack/ui
# Using yarn
yarn add @hoststack/uiEnsure you have the required peer dependencies:
pnpm add react react-dom nextimport { Provider, Button, Text, Stack } from '@hoststack/ui';
function App() {
return (
<Provider>
<Stack direction="column" align="center" css={{ padding: '$large' }}>
<Text as="h1">Welcome to HostStack UI</Text>
<Button theme="solid" onClick={() => alert('Hello!')}>
Get Started
</Button>
</Stack>
</Provider>
);
}To work on components locally:
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Run linting and formatting
pnpm tidy
# Build the library
pnpm build
# Generate documentation
pnpm docssrc/
├── components/ # React components
├── hooks/ # Custom React hooks
├── types.ts # TypeScript interfaces (auto-documented)
├── stitches.config.ts # Design system configuration
└── index.ts # Main entry point
docs/ # Auto-generated API documentation
playground/ # Component demos and examples
Detailed TypeScript interfaces, props, and examples are available in the docs/interfaces/ directory. All documentation is auto-generated from TSDoc comments in the source code.
The library uses Stitches for styling with a comprehensive design system:
import { Provider } from '@hoststack/ui';
// Enable dark mode
<Provider dark>
<YourApp />
</Provider>
// Custom CSS with theme tokens
<Button css={{
backgroundColor: '$purple',
color: '$background',
}}>
Custom Button
</Button>- Colors:
$background,$text,$purple,$blue,$orange,$yellow,$border,$borderLight,$overlay,$surface,$surfaceHover,$surfaceLight - Spacing:
$none,$smallest,$smaller,$small,$medium,$large,$larger,$largest,$excess - Radii:
$small,$medium,$large - Font Sizes:
$small,$default,$h6,$h5,$h4,$h3,$h2,$h1 - Breakpoints:
phone,phoneX,tablet,tabletX,laptop,laptopX,desktop,desktopX,wide
- Responsive:
phone(),phoneX(),tablet(),tabletX(),laptop(),laptopX(),desktop(),desktopX(),wide(),micro(),print(),retina() - Visibility:
hidden(),hiddenInline(),hiddenSpecial(),visible(),visibleInline(),visibleSpecial() - Theme-aware:
darkOnly(),lightOnly()
// Example usage of utils
<Button css={{
phone: { fontSize: '$small' }, // Responsive
hidden: 'tablet', // Hide on tablet
darkOnly: { color: '$yellow' } // Dark mode specific
}}>
Responsive Button
</Button>This library is built on top of excellent open source projects:
- @stitches/react - CSS-in-JS library with near-zero runtime
- @radix-ui/react-icons - Clean, consistent icon family for interfaces
- react-hot-toast - Smoking hot React notifications
- fast-sort - Blazing fast array sorting
This library includes the following components with full TypeScript support and comprehensive documentation:
- Accordion - Collapsible content sections with multiple expansion support
- Avatar - User profile image with fallback text display
- Badge - Small status indicators and informational labels
- Box - Versatile container with optional image, header, and footer
- Button - Interactive element for user actions with multiple themes
- Divider - Visual separator line with customizable spacing
- Field - Multi-line textarea input with validation and actions
- Form - Form wrapper with validation and submission handling
- Icon - Consistent icon wrapper with theming support
- Input - Single-line form input with validation and actions
- Loading - Animated loading spinner with customizable appearance
- LoadingOverlay - Full-screen loading overlay with message display
- Maps - Component for maps functionality
- Menu - Dropdown menu with nested options and keyboard navigation
- Modal - Centered overlay dialog for important interactions
- Places - Component for places functionality
- Popover - Floating content overlay triggered by user interaction
- Portal - Render content outside normal DOM hierarchy
- Provider - Theme and context provider for the entire UI system
- Select - Dropdown selection with filtering and positioning options
- SelectMulti - Multi-selection dropdown with limits and batch operations
- Stack - Responsive layout container with flexible spacing and alignment
- Table - Data table with sorting, pagination, and nested rows
- Text - Versatile text element with multiple sizes, styles, and link support
- Toast - Component for toast functionality
- View - Main layout container with hero styling and responsive behavior
📖 Full API Documentation: Detailed TypeScript interfaces, props, and examples are available in the
docs/components/interfaces/directory. All documentation is auto-generated from TSDoc comments in the source code.