Aurora Data Table
A rich analytics data table with a northern lights aesthetic — deep navy background with teal and purple accents.
Features
- Sortable column headers with visual sort indicators
- Search & filter bar for quick page lookup
- Alternating row colors for readability
- Color-coded badges for bounce rate severity (green/purple/red)
- Trend indicators with up/down arrows and conversion percentages
- Pagination controls at the bottom
- Summary stat cards below the table with key metrics
- Monospace typography via JetBrains Mono for data clarity
- Dark mode support with
dark: Tailwind variants
- WCAG AA contrast compliant
Usage
import AuroraDataTable from '@/registry/aurora-data-table/registry-item';
export default function Page() {
return <AuroraDataTable />;
}
Customization
- Data: Replace the
trafficData array with your own analytics data
- Columns: Add or remove columns in the
columns array
- Colors: Adjust teal (
#2dd4bf) and purple (#a78bfa) accent values
- Font: Swap JetBrains Mono for another monospace font
- Pagination: Wire up real pagination logic with state management
