Getting Started
Learn how to install and use Twigs React component library built with Radix UI and Stitches
Overview
Twigs is designed to be the perfect foundation for building modern web applications. Our component library combines the power of Radix UI's accessibility-first approach with Stitches' powerful CSS-in-JS capabilities to deliver components that are both developer-friendly and user-accessible.
Installation
Install the Package
Install Twigs React components using your preferred package manager
npm install @sparrowengg/twigs-react @sparrowengg/twigs-react-iconsyarn add @sparrowengg/twigs-react @sparrowengg/twigs-react-iconspnpm add @sparrowengg/twigs-react @sparrowengg/twigs-react-iconsInstall Editor (Optional)
Editor provides rich text editing capabilities
npm install @sparrowengg/twigs-editor-reactyarn add @sparrowengg/twigs-editor-reactpnpm add @sparrowengg/twigs-editor-reactThemeProvider
Setting up the ThemeProvider in your root file
import { ThemeProvider, defaultTheme } from '@sparrowengg/twigs-react'
function App() {
return (
<ThemeProvider theme={defaultTheme}>
<YourApp />
</ThemeProvider>
)
}For the best experience, wrap ThemeProvider in your main.jsx or main.tsx file at the root of your application. This ensures all components have access to the theme.
Quick Start
Here's a simple example to get you started:
Framework Integration
Architecture
CSS Props Support: Every component in Twigs supports CSS props thanks to Stitches. You can style any component directly through the css prop, making customization effortless and intuitive.
Next Steps
Now that you have Twigs installed, explore our components:
- Theming - Learn how to customize themes and design tokens
- Components - Browse our comprehensive component library
- Icons - Discover our icon library and usage patterns