sima-styling

What problem does it solve?

Guidance for building reusable, Radix-based UI components with consistent theming and responsive styling using styled-components, ensuring reliability and maintainability across a codebase.

Core Features & Use Cases

• Always use Radix UI components
• Always use Radix UI theme and colors system
• Always use Radix UI icons
• For any other additional styling, please use styled components
• When creating a component, the name of the component always starts with a big letter and .tsx format; for example: Header.tsx
• When creating a styled component, it will have the same component name following by .styles.ts - for example: Header.styles.ts
• When creating a styled component, please check first if Radix UI has this element already. For example, it has a Box, so you can do styled(Box) instead of creating a div
• Critical: use client directive at the top of ALL .styles.ts files that use styled-components. This is required because styled-components uses React Context internally which only works in Client Components.
• Always add "use client" directive at the top of ALL .styles.ts files that use styled-components
• Breakpoints and Radix responsive pattern guidelines should be followed to ensure consistency.

Quick Start

Use the sima styling guidelines to kick off a new UI component:

• Create a new component file with a capitalized name and .tsx extension, e.g., Header.tsx
• Create a corresponding styled component file named Header.styles.ts with "use client" as the first line
• Import and extend Radix primitives where possible (e.g., styled(Box))
• Reference Radix CSS variables for theming (e.g., var(--accent-a3), var(--radius-4))
• Apply responsive props from Radix UI where available, falling back to minimal CSS only when necessary
• Verify there is no duplicate element creation by reusing existing Radix primitives when possible