Tables with a Twist: Hand-Drawn & Animated

Tables are essential for data, but they don’t have to be boring. We’ve created a <CustomTable /> component that brings life to your grids.

1. Hand-Drawn Style

Perfect for that “notebook” feel. It uses the Kalam font and sketchy borders.

2. Bold Style

For when you need to make a statement. High contrast, thick borders.

3. Colorful Style

Add a splash of color to differentiate your data.

4. Animations

You can animate the table entry with fade or slide-up.

5. Mix & Match

Combine styles and animations for a unique look. Here’s a Hand-Drawn table with Slide-Up animation.

Usage

Pass headers (array of strings) and rows (array of arrays of strings).

<CustomTable 
  headers={['A', 'B']}
  rows={[
    ['1', '2'],
    ['3', '4']
  ]}
  style="hand-drawn"
/>