Theming

Rowstack is designed to look premium and fit perfectly into any modern SaaS application. It comes with full support for light and dark modes.

#Color Modes

You can toggle between light and dark themes via the config prop:

const config = {
  theme: {
    color: "dark" // or "light"
  }
};

#Syncing with Your Application

Most applications use a global theme state (e.g., Tailwind's .dark class or a React Context). You should pass this value to Rowstack to ensure visual consistency.

const { theme } = useTheme(); // Your app's theme hook

<Table 
  data={data} 
  columns={columns} 
  config={{ theme: { color: theme } }} 
/>

#Styling Customization

Rowstack uses Tailwind CSS internally. While the core styles are encapsulated, you can override specific visual elements using the .rs-table class prefix in your CSS.

#Custom Fonts

Rowstack inherits the font from its parent container. We recommend using modern sans-serif fonts like Inter, Roboto, or Outfit for the best experience.

#Pixel-Perfect Design

Rowstack's design system includes:

• Glassmorphism: Subtle backgrounds and blurs in popups.
• Harmonious Palettes: Carefully curated colors for badges and focus states.
• Micro-animations: Smooth transitions during sorting and filtering.