UI Package

Structure

theme-provider.tsx

nav-icons.tsx

index.tsx

package.json

Component Organization

Components are organized by role (functional category):

Role	Description	Examples
inputs	User input collection	Button, TextField, Checkbox, Select
layout	Page structure	Container, Stack, Grid, Box
navigation	Navigation elements	Navbar, Tabs, Breadcrumbs, Sidebar
feedback	User feedback	Alert, Toast, Progress, Skeleton
display	Data presentation	Card, List, Table, Avatar
dialog	Modal dialogs	Dialog, Drawer, Modal
popover	Popover elements	Popover, Tooltip, Dropdown
form-fields	Form inputs	FormField, FormLabel, FormError
animation	Animated components	Fade, Slide, Collapse
misc	Utilities	Portal, ClickAwayListener

Creating New Components

Use the Turborepo generator:

pnpm run generate:component

This creates:

packages/ui/components/ui/[role]/[component-name]/
├── [component-name].tsx     # Component implementation
└── index.tsx               # Barrel export

And automatically exports in packages/ui/index.tsx:

export * from "./components/ui/inputs/button"

Component Template

import type { ComponentProps } from 'react';
import { Button as MuiButton } from '@mui/material';

export interface ButtonProps extends ComponentProps<typeof MuiButton> {
  // Additional props
}

export const Button = ({ children, ...props }: ButtonProps) => {
  return (
    <MuiButton {...props}>
      {children}
    </MuiButton>
  );
};

Usage

Importing Components

import { Button, TextField, Card } from '@shared/ui';

export const MyComponent = () => {
  return (
    <Card>
      <TextField label="Name" />
      <Button>Submit</Button>
    </Card>
  );
};

Using Hooks

import { useDialog, usePopover } from '@shared/ui';

export const MyComponent = () => {
  const dialog = useDialog();
  const popover = usePopover();

  return (
    <>
      <Button onClick={dialog.open}>Open Dialog</Button>
      <Dialog {...dialog.props}>Dialog content</Dialog>
    </>
  );
};

Storybook

All UI components are documented in Storybook:

cd apps/storybook
pnpm dev

Access at: http://localhost:6006

Next: Learn about the Lib Package.

On this page