React
The same system, typed. barua-ui is a thin React layer over
the CSS — every component renders the exact markup documented on these
pages, so nothing behaves differently for having been imported. Every
example in these docs has a React tab showing the JSX
that produces it.
Install
One package, one stylesheet. The CSS is the system; the components only spare you from typing class names.
npm install barua-uiImport the stylesheet once, at the root of the app. Everything else is a component import.
import "barua-ui/css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}The first component
Props are the modifiers you already know. b-btn--primary is
variant="primary"; there is nothing else to learn.
Open the React tab above. That JSX is generated from this very demo, so it cannot fall out of step with the HTML beside it.
Server Components
The bundle carries its own "use client", so importing from
a Server Component works. Components that hold state — the provider,
toasts, the command palette — still need a client boundary of their own,
which is ordinary React, not a quirk of this library.
0.1.0 and wrote a client-boundary file to work around it,
you can delete that file.
Theme
Light and dark come from light-dark() in the CSS, so the
system already follows the operating system with no JavaScript at all.
Reach for the provider only to override that choice, and add
ThemeScript to stop the first paint flashing the wrong way.
"use client";
import { BaruaProvider, ToastProvider } from "barua-ui";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<BaruaProvider theme="auto" accent="blue">
<ToastProvider>{children}</ToastProvider>
</BaruaProvider>
);
}Icons
The glyph library ships as a component, generated from
the icons page — the same 59 glyphs, by name,
with the sizes on the .b-icon scale.
import { Icon } from "barua-ui";
<Icon name="check" />
<Icon name="search" size="sm" />
<Icon name="bell" title="Notifications" /> {/* labelled when it stands alone */}When a component is in the way
Nothing here is compulsory. Every component forwards
className and its ref, so a class the props do not cover
can always be added by hand — and any element can carry a system class
directly. The React layer is a convenience, never a gate.
<Card compact className="b-span-4">…</Card>
<article className="b-card b-card--compact b-span-4">…</article>What is exported
278 components and hooks, covering every block in the system. The list is generated from the package, so it never claims more than it ships.
| Area | Exports |
|---|---|
| Theme | BaruaProvider, ThemeScript, useBaruaTheme |
| Toast | ToastProvider, useToast |
| Actions | Button, ButtonLink, Fab, Toolbar, buttonClasses |
| Forms | Checkbox, Field, Input, OtpInput, Radio, Select, Slider, Switch, Textarea |
| Content | Avatar, AvatarGroup, Badge, Card, CardBody, CardEyebrow, CardFooter, CardHeader, CardSubtitle, CardTitle, Chip, EmptyState, GroupBox, IconTile, Labeled, List, ListFooter, ListHeader, ListItem, Stat, StoryCard, Tag |
| Feedback | Alert, LinearGauge, Progress, Skeleton, Spinner, StatusDot, Tip |
| Overlays | ActionSheet, AlertDialog, BottomSheet, Modal, Popover, Sheet, Tooltip |
| Navigation | Breadcrumbs, Segmented, TabPanel, Tabs |
| Icons | Icon, iconNames |
| Primitive | block |
| Layout | Bento, CardGrid, Container, Dashboard, Divider, Grid, Grow, HStack, Inspector, SafeArea, ScrollArea, Section, Sidebar, SidebarGroup, SidebarHeading, SidebarItem, SkipLink, Spacer, Span, Split, Stack, Stage, VStack, Workspace, WorkspaceMain |
| Typography | CodeBlock, DescriptionList, Footnote, Footnotes, Kbd, Link, LinkGroup, Overline, Quote, Text |
| Data | Bars, Chart, ChartTip, Columns, Donut, Gauge, Heatmap, Legend, Sparkline, Table, TableNum, TableSortHeader, TableWrap |
| Navigation — chrome | BackButton, BottomNav, BottomNavItem, Dock, DockItem, DockTray, Drawer, DrawerBody, DrawerHeader, Dropdown, MarketingNav, MarketingNavBrand, MarketingNavLinks, Menu, MenuItem, MenuLabel, MenuSeparator, PillNav, StatusBar, StatusBarItem, Steps, TopNav, TopNavBrand, TopNavLink, TopNavLinks |
| Forms — structure | Dropzone, ErrorText, Fieldset, FilterBar, FilterChip, Form, FormActions, FormRow, FormSection, Help, InputGroup, Label, Optional, Range, SearchField, StepperInput, Swatch, Swatches, Upload, UploadItem |
| Productivity | BulkActions, DataGrid, DragHandle, Feed, FileBrowser, FileGrid, FileTile, Kanban, KanbanColumn, KanbanList, Log, Resizable, ResizeHandle, SelectionCount, Task, TaskList, TaskRow, Timeline, Tree, TreeItem |
| Marketing | CardRail, Chapter, FeatureRow, Figure, Hero, Landing, PromoBand, SiteFooter, SiteFooterGroup, SiteFooterGroups, SiteFooterHeading, SiteFooterLegal, SpecStrip |
| System | AppGrid, AppTile, Auth, AuthCard, Banner, Callout, GlassContainer, Notification, Onboarding, OnboardingHero, Result, SysPage, Wall |
| Command palette | CommandFooter, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPalette, HoverCard |
| Extras | Accordion, Account, AccountSwitcher, ButtonGroup, Calendar, CalendarDay, CalendarGrid, CalendarHeader, CalendarMonth, CalendarView, CalendarViewCell, CalendarViewHead, CalendarWeekday, Carousel, CarouselDots, CarouselSlide, CarouselTrack, Combobox, ComboboxEmpty, ComboboxList, ComboboxOption, CommandCenter, DatePicker, Disclosure, Event, Gallery, Gantt, GanttBar, GanttRow, GlassInteractive, HoverCardHost, ImageViewer, ImageViewerBar, Lightbox, OnboardingFeature, Rail, RailItem, SearchResult, SearchResults, Share, SortControl, SplitButton, ToggleButton, UploadPreview, UploadPreviews |
| Media | AreaChart, AsyncImage, Audio, Axis, CircularProgress, CommandCenterLabel, CommandCenterStatus, CommandCenterTile, GridLines, ImageLens, LineChart, LiquidToggle, MediaPlaceholder, MenuBar, MenuBarItem, Pagination, PaginationEllipsis, PaginationItem, RadarChart, ScatterChart, Thumb, Video, Waveform, Web |