Ultimate Tables: Outlines, Fonts & Scroll Effects
We’ve covered styles and colors. Now, let’s get into the details: Outlines, Fonts, and Scroll Animations.
1. Sketchy Outlines
The sketchy-outline style gives you that hand-drawn border without the messiness of the full sketchy style. It’s clean but organic.
| Phase | Deliverable |
|---|---|
| Discovery | User Research Report |
| Design | Figma Prototypes |
| Dev | Production Code |
2. Sketchy Colorful Outline
Combine the organic border with your theme colors using sketchy-colorful-outline.
| Metric | Value | Trend |
|---|---|---|
| Users | 1,200 | +15% |
| Sessions | 3,400 | +8% |
| Bounce | 45% | -2% |
3. Bold & Colorful
For when you need high contrast and impact. The bold-colorful style combines thick borders, uppercase headers, and vibrant theme colors.
| Rank | Team | Points |
|---|---|---|
| 1 | Red Dragons | 98 |
| 2 | Blue Knights | 95 |
| 3 | Green Giants | 88 |
4. Font Control
You’re not stuck with the hand-drawn font. Use the font prop to switch between hand-drawn, sans, serif, and mono.
Sans-Serif (Clean)
| Name | |
|---|---|
| John Doe | john@example.com |
| Jane Smith | jane@example.com |
Monospace (Code)
| Variable | Type | Default |
|---|---|---|
| isLoading | boolean | false |
| data | object | null |
| error | string | undefined |
5. Scroll-Triggered Animations
By default, animations play on load. Set trigger="visible" to play them when the table scrolls into view.
Scroll down to see these animate in!
Scroll down…
Slide Up on Scroll
Zoom In on Scroll
| Feature | Status |
|---|---|
| Dark Mode | Done |
| API | Pending |
The Ultimate Combo
Sketchy colorful outline, monospace font, purple theme, and a slide-left animation triggered on scroll.
