Usage Guide

After installing Sistent, you can immediately start using components in your React application. The most important step is wrapping your application with the SistentThemeProvider to ensure all components have access to the theme context.

Quick Start Example

Here's the minimal setup to get started with Sistent:

The SistentThemeProvider is the foundation of your Sistent application. It provides theme context, manages color modes, and ensures consistent styling across all components.

Theme Configuration

Configure your theme provider with various options:

Component Examples

Explore practical examples of Sistent components with different configurations and use cases.

Button Variations

Sistent provides multiple button variants, colors, and sizes to fit different design needs:

Interactive Form Example

A complete form example showcasing multiple components working together:

Theme Customization

Create custom themes and use the theme hook for advanced styling:

Import Strategies

Optimize your bundle size with smart import strategies:

Working with Icons

Integrate Sistent's comprehensive icon library:

Responsive Design

Build responsive layouts with Sistent's grid system and breakpoint utilities:

• Theme Provider: Always wrap your application root with SistentThemeProvider. Place it as high as possible in your component tree to ensure all components have access to the theme context.
• Import Optimization: Import only the components you need to keep your bundle size minimal. Use individual imports or group related components together rather than importing everything.
• Consistent Design: Use consistent component variants, colors, and sizing throughout your application. Create reusable component wrappers for commonly used patterns.
• Mobile-First: Leverage Sistent's responsive utilities and breakpoints to create mobile-first designs. Test your components across different screen sizes.
• Accessibility: Take advantage of Sistent's built-in accessibility features. Always provide proper labels, ARIA attributes, and ensure adequate color contrast.
• Theme Customization: Use design tokens and theme customization for styling rather than overriding CSS directly. This ensures consistency and easier maintenance.