Neo Brutal UI

Neo Brutal UI is a high-contrast component library for React applications. It includes CSS tokens, typed React components, optional app widgets, and documentation examples for common product interfaces.

Packages

• nbrutalist: all-in-one package with CSS tokens, React components, and extras subpath exports.
• nbrutalist/react: core React component entry.
• nbrutalist/extras: optional widgets for calendars, charts, toast messages, command palettes, and kanban boards.
• neo-brutal-ui-react and neo-brutal-ui-extras: standalone compatibility packages.

React Quick Start

npm install nbrutalist react react-dom

import { Button, Card, Grid, TextField } from 'nbrutalist/react'
import { Calendar, BarChart, ToastStack } from 'nbrutalist/extras'

export function App() {
  return (
    <>
      <Grid columns={2}>
        <Card title="Campaign" actions={<Button variant="primary">Publish</Button>}>
          <TextField label="Name" defaultValue="High contrast kit" />
        </Card>
      </Grid>
      <Calendar selectedDate={new Date()} />
      <BarChart data={[{ label: 'Mon', value: 12 }, { label: 'Tue', value: 18 }]} />
      <ToastStack placement="bottom-right" toasts={[]} />
    </>
  )
}

Component Families

• Layout: Theme, Box, Container, Stack, Grid, Paper, Divider
• Inputs: Button, IconButton, ButtonGroup, TextField, Textarea, Select, Checkbox, Radio, Switch, Slider, Rating
• Navigation: AppBar, Toolbar, Tabs, Breadcrumbs, Pagination, Menu, Drawer, Accordion, Stepper
• Data display: Avatar, Badge, Chip, Tooltip, Table, List, TreeView, Timeline, Stat, Card
• Feedback and overlays: Alert, Snackbar, Dialog, Modal, Popover, Progress, CircularProgress, Skeleton
• Extras: Calendar, EventAgenda, BarChart, LineChart, DonutChart, Sparkline, Toast, ToastStack, CommandPalette, KanbanBoard

Theme

The theme is driven by CSS variables such as --nb-primary, --nb-secondary, --nb-accent, --nb-border, and --nb-shadow.