1 GitHub star = 1 new component.

Star the repo
Navigationtabsnavigationvertical

Side Navigation Tabs

Vertical tab navigation list with corresponding content panels.

Usage

Copy and paste this code into your React component:

tsx
import { VerticalTabs } from 'react-component-kit-ui/navigation';

<VerticalTabs>Content</VerticalTabs>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/VerticalTabs.tsx + VerticalTabs.css:

VerticalTabs.tsx
'use client';

import './VerticalTabs.css';

/** VerticalTabs โ€” ported from astro-component-kit. */
export interface VerticalTabsProps {
}

export function VerticalTabs({}: VerticalTabsProps) {
  return (
    <>
      <div className="v-tabs" data-rk-0ae995="">
        <button className="v-tab active" data-rk-0ae995="">General</button>
        <button className="v-tab" data-rk-0ae995="">Account</button>
        <button className="v-tab" data-rk-0ae995="">Security</button>
        <button className="v-tab" data-rk-0ae995="">Notifications</button>
      </div>
    </>
  );
}

export default VerticalTabs;
VerticalTabs.css
/* VerticalTabs โ€” ported from astro-component-kit (navigation/VerticalTabs.astro) */

.v-tabs:where([data-rk-0ae995]) { display: flex; flex-direction: column; width: 200px; border-left: 2px solid #1e293b; }
.v-tab:where([data-rk-0ae995]) { background: none; border: none; padding: 0.75rem 1.25rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; border-left: 2px solid transparent; margin-left: -2px; }
.v-tab:hover:where([data-rk-0ae995]) { color: #fff; }
.v-tab.active:where([data-rk-0ae995]) { color: #6366f1; border-left-color: #6366f1; background: rgba(99,102,241,0.05); }

Quick Info

Category
Navigation
Filename
VerticalTabs.tsx
Dependencies
None โ€” pure React + CSS
Tags
tabsnavigationvertical