Logos Design

A React design system built with TypeScript and Tailwind CSS, based on shadcn/ui.

Work in progress: Components are fully functional and ready to use, but the final visual identity (colors, spacing, and design tokens) is still being refined. Expect breaking style changes in upcoming releases.

Installation

npm install logos-design

yarn add logos-design

pnpm add logos-design

Tech Stack

• React 19 with React Compiler
• TypeScript with strict mode
• Tailwind CSS 4
• Radix UI headless primitives
• CVA (Class Variance Authority) for style variants
• Zustand for state management
• Zod for schema validation

Quick Start

Import components directly from the atomic level:

import { Button } from "logos-design/atoms/button";
import { Dialog, DialogContent, DialogTitle } from "logos-design/molecules/dialog";
import { Sidebar, SidebarProvider } from "logos-design/organisms/sidebar";

Or use the barrel export:

import { Button, Dialog, Sidebar } from "logos-design";

Available Components

Atoms (26)

Basic, indivisible UI elements.

Alert, Aspect Ratio, Avatar, Badge, Button, Checkbox, Collapsible, Direction, Hover Card, Input, Kbd, Label, Native Select, Popover, Progress, Radio Group, Scroll Area, Separator, Skeleton, Slider, Sonner (Toast), Spinner, Switch, Textarea, Toggle, Tooltip

Molecules (22)

Composed groups of atoms working together.

Accordion, Alert Dialog, Breadcrumb, Button Group, Calendar, Card, Combobox, Command, Dialog, Drawer, Empty, Field, Input Group, Input OTP, Item, Pagination, Resizable, Select, Sheet, Table, Tabs, Toggle Group

Organisms (7)

Complex sections with state management and multiple sub-components.

Carousel, Chart, Context Menu, Dropdown Menu, Menubar, Navigation Menu, Sidebar

Architecture

The project follows Atomic Design combined with the MVVM (Model-View-ViewModel) pattern.

Component Structure

src/components/
├── atoms/          # Basic elements (Button, Input, Label, Badge...)
├── molecules/      # Composed atoms (Dialog, Card, Select, Tabs...)
├── organisms/      # Complex sections (Sidebar, Chart, Carousel, Menubar...)
└── index.ts        # Barrel export for all components

MVVM Pattern

Each component directory follows this structure:

<component>/
├── <component>.model.ts       # Types, interfaces, and props
├── <component>.viewmodel.ts   # Logic, hooks, and handlers
├── <component>.view.tsx       # Pure JSX (no useState/useEffect)
├── <component>.styles.ts      # Tailwind classes and CVA variants
├── <component>.store.ts       # Zustand store (when needed)
├── <component>.scheme.ts      # Zod schemas (when needed)
└── index.ts                   # Barrel export

Development

pnpm install      # Install dependencies
pnpm dev          # Start dev server
pnpm build        # Production build (tsc + vite)
pnpm lint         # Lint with Biome
pnpm format       # Format with Biome
pnpm tscheck      # Type checking
pnpm test         # Run tests (watch mode)
pnpm test:ci      # Run tests in CI

Based on shadcn/ui

This design system uses shadcn/ui as a starting point. Primitives come from Radix UI and styles are built with Tailwind CSS.

The key difference is that components here are organized using Atomic Design with MVVM separation, while the original shadcn/ui uses a flat directory structure.

License

MIT