darksea-ui

Dark HUD terminal-style component library for React 19. Built with Tailwind CSS 4, CVA, and Motion.

The shadcn/ui for hackers.

Design inspired by MAHORAGA — autonomous trading agent with HUD terminal aesthetics.

Documentation | npm | Storybook

Install

pnpm add darksea-ui

Peer dependencies:

pnpm add react react-dom tailwindcss

Quick Start

/* app.css */
@import "darksea-ui/styles";

import { ThemeProvider, Button } from 'darksea-ui'

function App() {
  return (
    <ThemeProvider defaultTheme="dark">
      <Button variant="default">EXECUTE</Button>
    </ThemeProvider>
  )
}

Add @source in your CSS if using Tailwind 4 to scan darksea-ui components:

@source "../node_modules/darksea-ui/src";

Theming

Dark / Light / System

<ThemeProvider defaultTheme="system">
  <App />
</ThemeProvider>

Custom Colors

<ThemeProvider
  defaultTheme="dark"
  colors={{ primary: '#ff6b00' }}
  typography={{ fontMono: "'Fira Code', monospace" }}
>
  <App />
</ThemeProvider>

useTheme Hook

import { useTheme } from 'darksea-ui'

function Toggle() {
  const { resolvedTheme, setTheme } = useTheme()
  return (
    <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
      {resolvedTheme === 'dark' ? 'LIGHT' : 'DARK'}
    </button>
  )
}

57+ Components

Foundation

Button, Input, Label, Badge, Separator, Kbd, Spinner, Typography (H1-H6, P, Code, BlockQuote, Lead), Skeleton, Avatar, Progress

Forms

Checkbox, Switch, RadioGroup, Slider, Textarea, Toggle, ToggleGroup, NativeSelect, Field, InputGroup, ButtonGroup, Alert, Empty, Item, InputOTP

Overlays

Tooltip, Popover, HoverCard, Dialog, AlertDialog, Sheet, Drawer, Toast

Navigation

DropdownMenu, ContextMenu, Menubar, NavigationMenu, Command, Tabs, Breadcrumb, Pagination, ScrollArea

Data Display

Card, Accordion, Collapsible, Table, DataTable, Select, Combobox, Calendar, DatePicker, Carousel, Chart (LineChart, Sparkline, BarChart, AreaChart), Resizable, AspectRatio, Sidebar

Primitives

Portal, FocusTrap, Dismissable, Popper

Design Tokens

| Token | Dark | Light | |-------|------|-------| | background | #11161d | #ffffff | | background-panel | #0e1217 | #f8f9fa | | primary | #07edc7 | #0891b2 | | foreground | #96a8c0 | #1f2937 | | border | rgba(7,237,199,0.12) | #e5e7eb | | success | #5cffcc | #10b981 | | warning | #eab308 | #f59e0b | | error | #ff6b6b | #ef4444 | | accent-cyan | #0ae5f5 | #06b6d4 | | accent-purple | #2c4df0 | #8b5cf6 |

Storybook

pnpm storybook

License

MIT