@vetaui/organisms

Sectional components built from atoms + molecules. Ready-to-use marketing sections, dashboard shells, data tables, auth flows, and animated blocks — all themed via @vetaui/foundations tokens.

Install

pnpm add @vetaui/foundations @vetaui/atoms @vetaui/molecules @vetaui/organisms

Usage

import { Hero, Navbar, Pricing, SiteFooter } from "@vetaui/organisms";

export default function LandingPage() {
  return (
    <>
      <Navbar logo={<Logo />} links={navLinks} />
      <Hero
        title="Ship faster with Veta"
        subtitle="The atomic design system for Next.js 2026."
        cta={{ label: "Get started", href: "/docs" }}
      />
      <Pricing plans={pricingPlans} />
      <SiteFooter links={footerLinks} />
    </>
  );
}

Component catalog

Marketing

| Component | Description | | --- | --- | | Hero | Full-bleed hero section with title, subtitle, CTA and optional visual | | Navbar | Top navigation bar with logo, links, mobile hamburger | | SiteFooter | Multi-column footer with links, social icons | | FeatureGrid | 2–4 column grid of feature cards | | Pricing / PricingToggle | Pricing table with monthly/annual toggle | | Cta | Standalone call-to-action band | | NewsletterCta | Email subscription section | | Banner | Dismissible announcement banner | | Faq | Accordion-based FAQ section | | LogoMarquee | Auto-scrolling logo strip | | TestimonialMarquee | Scrolling testimonial cards |

Animated (require motion)

| Component | Description | | --- | --- | | AnimatedHero | Hero with entrance animations | | GradientText | Text with animated OKLCH gradient | | BorderBeam | Rotating border glow effect | | AnimatedCounter | Number that counts up on enter | | FloatingIcons | Orbiting icons around a center element | | BentoGrid | Asymmetric feature grid | | KanbanBoard | Drag-and-drop Kanban with @dnd-kit |

Data

| Component | Description | | --- | --- | | DataTable | Full-featured table — sorting, filtering, pagination, row selection, column visibility |

Dashboard

| Component | Description | | --- | --- | | DashboardShell | Two-column sidebar + content layout | | Sidebar / SidebarItem | Collapsible vertical nav | | CommandMenu | ⌘K command palette |

Auth

| Component | Description | | --- | --- | | AuthForm | Login / register / forgot-password form cards | | OAuthButtons | Social login button row |

Tree-shaking sub-paths

import { Hero } from "@vetaui/organisms/marketing";
import { DataTable } from "@vetaui/organisms/data-table";
import { DashboardShell } from "@vetaui/organisms/dashboard";
import { AnimatedHero } from "@vetaui/organisms/animated";

License

MIT — Dambert Munoz