Introduction
An accessible React component library, built with a focus on keyboard navigation, focus management, and ARIA correctness.
neelam-ui is a set of 46 React components styled with Tailwind CSS v4.
It is not a design system you configure and adopt wholesale — it is a set of
primitives that behave correctly, which you restyle as far as you like.
The distinguishing choice is that accessibility is the specification, not a review step. Every interactive component implements the WAI-ARIA Authoring Practices Guide pattern for its widget type, and every Storybook story is asserted against axe-core in CI, so a regression fails the build before it can merge.
Principles#
Semantic HTML first#
Native elements are used wherever one exists. Custom ARIA widgets are built
only where the platform offers no equivalent. Dialog is a real <dialog>
driven by showModal(), so the focus trap, Escape-to-close, and top-layer
stacking come from the browser rather than from JavaScript that approximates
them.
Composition over configuration#
Components are compound by default. Rather than a Dialog with a dozen props
describing its parts, you compose DialogTrigger, DialogContent,
DialogHeader, DialogTitle, and DialogFooter — so you can put anything you
want in any slot without the library anticipating it.
Styling stays yours#
Nothing ships a stylesheet. Components are Tailwind utility classes on real
elements, and every one accepts className, which is merged so your classes
win. There is no theme object, no CSS-in-JS runtime, and no build step beyond
the Tailwind you already run.
Scope is deliberate
Some components stop short of what a full framework would offer — DataTable
has no row selection or server-side data, for instance. The reasoning for each
omission is recorded per component in DECISIONS.md in the repository.
Try it#
Everything on this site is rendered with the published package. This is the real component, keyboard and all:
What's in the box#
Forms9
- ButtonA versatile button with variants, sizes, icons, and a loading state.
- CheckboxA binary control supporting an indeterminate state.
- ComboboxA text input paired with a filterable listbox, per the APG combobox pattern.
- InputA single-line text field with label, description, and error wiring.
- Radio GroupA set of mutually exclusive options with roving focus.
- SelectA listbox for choosing one option from a list.
- SwitchAn on/off control for settings that apply immediately.
- TextareaA multi-line text field that can grow with its content.
- ToggleA two-state button that stays pressed.
Overlays6
- Alert DialogA modal that interrupts to confirm a destructive or irreversible action.
- DialogA modal window built on the native <dialog> element.
- DrawerA panel that slides in from an edge of the screen.
- PopoverRich floating content anchored to a trigger.
- ToastBrief, non-blocking messages announced to assistive tech.
- TooltipA short label revealed on hover or focus.
Navigation6
- BreadcrumbA trail showing the current page's place in the hierarchy.
- CommandA searchable command palette for fast keyboard navigation.
- Context MenuA menu opened by right-click or the context-menu key.
- Dropdown MenuA menu of actions triggered by a button.
- PaginationNavigation across a paged set of results.
- TabsSwitch between panels of related content.
Data Display15
- AccordionVertically stacked sections that expand and collapse.
- AvatarA user image with a graceful initials fallback.
- Avatar GroupOverlapping avatars with an overflow count.
- BadgeA small label for status, counts, or categories.
- CalendarA date grid with full keyboard navigation.
- CarouselA slideshow of content panels.
- ChartAn accessible shell around a plot you supply, with a data table fallback.
- Data TableA sortable, filterable table over a set of rows.
- Date Range PickerTwo linked calendars plus presets for choosing a range.
- Empty StateA placeholder for when there is nothing to show yet.
- ProgressA determinate or indeterminate progress indicator.
- SkeletonA shimmering placeholder shown while content loads.
- SparklineA compact inline trend line.
- Stat CardA single headline metric with supporting context.
- TableA styled semantic table.
Layout6
- Aspect RatioConstrains content to a fixed width-to-height ratio.
- CardA surface for grouping related content and actions.
- ResizablePanels a user can resize by dragging or with the keyboard.
- SeparatorA semantic or decorative divider between content.
- SidebarA collapsible application navigation region.
- ToolbarA floating, icon-only rail of actions docked to a viewport edge.
AI & Chat5
Blocks#
A component page shows one component on its own. Blocks show several working together as a finished screen — a dashboard, a settings page, a sign-in card, a chat panel — each running live with its source beside it.
A block is not something you install. There is no Block component and no
registry: it is a single file built from the components above, written to be
copied into your own app and changed.
Next steps#
Install the package and wire up Tailwind in Installation, then read Accessibility for what the library guarantees and what remains your responsibility. Blocks is the fastest way to see the components composed at the scale of a real screen.