nyxb-ui

The Dynamic Portfolio Template is a sophisticated, customizable template designed to showcase professional journeys, skills, and achievements. It is built with a modern tech stack and includes several pre-built sections for a complete professional presence.

Key Features

• Hero & About Sections: Eye-catching introductions and personal summaries.
• Experience & Education: Dedicated showcases for work history and educational timelines.
• Project & Achievement Galleries: Dynamic displays for projects and hackathon highlights.
• Contact & Blog: Integrated sections for professional outreach and sharing insights.

Tech Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• Framer Motion
• nyxbui

The nyxb-ui library provides a collection of specialized UI components designed for landing pages and high-impact visual effects. These components include animations, particle systems, and decorative borders.

Available component demos include:

• Animations & Lists: animated-list-demo
• Beam Effects: animated-beam-demo, animated-beam-multiple-inputs, animated-beam-multiple-outputs
• Particle & Background Effects: particles-demo, retro-grid-demo
• Border & Edge Effects: border-beam-demo, shine-border-demo
• Transitions & Text: blur-fade-demo, blur-fade-text-demo
• Interactive & Decorative: magic-card-demo, orbiting-circles-demo, ripple-demo, confetti-demo

Instead of a single monolithic component, this project provides a guide to building custom data tables using TanStack Table and the base <Table /> UI components. This approach leverages headless UI to provide maximum flexibility for different sorting, filtering, and data source requirements.

To build a table, you typically follow this pattern:

1. Define Columns: Create a columns.tsx file using ColumnDef to specify data accessors, headers, and cell rendering.
2. Create a DataTable Component: Build a wrapper component (e.g., data-table.tsx) that uses the useReactTable hook to manage table state and logic.
3. Render the Table: Fetch your data in a page component and pass the columns and data to your <DataTable /> component.

// Example of the high-level pattern
<DataTable columns={columns} data={data} />

Registry items can depend on both NPM packages and other registry items.

NPM Dependencies

Use the dependencies array to list required NPM packages. You can specify versions using the @version syntax.

Registry Dependencies

Use the registryDependencies array for other registry items:

• For nyxb/ui items (like button, input, select), use the item name.
• For custom registry items, use the full URL of the registry item JSON.

The CLI automatically resolves remote registry dependencies.

{
  "dependencies": [
    "@radix-ui/react-accordion",
    "zod",
    "lucide-react",
    "name@1.0.2"
  ],
  "registryDependencies": [
    "button",
    "input",
    "select",
    "https://example.com/r/editor.json"
  ]
}

The Sidebar is a composable component built from several specialized parts. Understanding this hierarchy is key to building custom layouts:

• SidebarProvider: The root context provider that manages the collapsible state.
• Sidebar: The main container for the sidebar content.
• SidebarHeader: A sticky section at the top of the sidebar.
• SidebarFooter: A sticky section at the bottom of the sidebar.
• SidebarContent: The main scrollable area of the sidebar.
• SidebarGroup: A logical section within SidebarContent used to organize items.
• SidebarTrigger: A component used to toggle the sidebar's visibility/collapse state.

The by prop determines the granularity of the animation by defining how the text content is split into segments. This allows you to create different visual effects like animating individual characters or entire lines.

Supported values for by:

• "text": Animates the entire text block as one unit.
• "word": Animates each word individually (Default).
• "character": Animates each character individually.
• "line": Animates each line of text individually.

A complete sidebar is typically composed of several structural components:

• SidebarHeader: A sticky top section for branding or workspace selection.
• SidebarContent: The main scrollable area where SidebarGroup components reside.
• SidebarFooter: A sticky bottom section for user profiles or settings.

Example Structure

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      {/* Header content like DropdownMenus */}
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup />
    </SidebarContent>
    <SidebarFooter>
      {/* Footer content like User menus */}
    </SidebarFooter>
  </Sidebar>
</SidebarProvider>