Nidoe FAQ

Find quick answers to the most common questions about Nidoe, the comprehensive React component library for building modern, accessible user interfaces.

Getting Started

What is Nidoe?

Nidoe is a comprehensive design system and React component library that provides pre-built, accessible, and customizable components for building modern web applications. It includes everything from basic UI elements to complex data visualization components.

Why should I choose Nidoe over other component libraries?

Nidoe offers several unique advantages:

• Complete Design System: Not just components, but a full design language
• Accessibility First: WCAG 2.1 AA compliant out of the box
• TypeScript Native: Built with TypeScript for excellent developer experience
• Highly Customizable: Extensive theming and styling options
• Performance Optimized: Tree-shakable and optimized for production

Is Nidoe free to use?

Yes! Nidoe is completely free and open-source under the MIT license. You can use it in personal projects, commercial applications, or anywhere you need professional UI components.

What frameworks does Nidoe support?

Currently, Nidoe supports:

• ✅ React 16.8+ (Hooks required)
• ✅ Next.js 12+
• ✅ Gatsby
• ✅ Vite
• ✅ Create React App
• ⏳ Vue.js (planned)
• ⏳ Angular (under consideration)

Installation & Setup

How do I install Nidoe?

Install using your preferred package manager:

npm install @nexiloop/nidoe
# or
yarn add @nexiloop/nidoe
# or
pnpm add @nexiloop/nidoe

Do I need to install any peer dependencies?

Yes, Nidoe requires React as a peer dependency:

npm install react react-dom

Optional peer dependencies for specific features:

• framer-motion for advanced animations
• react-hook-form for form validation
• date-fns for date picker components

How do I set up the theme provider?

Wrap your app with the Nidoe theme provider:

import { NidoeProvider } from '@nexiloop/nidoe'

function App() {
  return (
    <NidoeProvider>
      <YourAppContent />
    </NidoeProvider>
  )
}

Can I use Nidoe with Tailwind CSS?

Yes! Nidoe is designed to work alongside Tailwind CSS. Use Nidoe components for complex UI patterns and Tailwind for custom styling and layout.

Components & Usage

Which components are available?

Nidoe includes 50+ components across categories:

Layout: Container, Grid, Stack, Flex, Divider Typography: Heading, Text, Code, Blockquote Forms: Input, Select, Checkbox, Radio, Switch, Textarea Navigation: Menu, Breadcrumb, Pagination, Tabs Feedback: Alert, Toast, Modal, Tooltip, Progress Data Display: Table, Card, Badge, Avatar, List Overlay: Popover, Drawer, Dialog, DropdownMenu

How do I import components?

Use named imports for better tree-shaking:

import { Button, Input, Card } from '@nexiloop/nidoe'

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter text..." />
      <Button>Submit</Button>
    </Card>
  )
}

Can I customize component styles?

Yes! Nidoe offers multiple customization approaches:

CSS Custom Properties:

.nidoe-button {
  --button-bg: #your-color;
  --button-text: #your-text-color;
}

Theme Object:

const customTheme = {
  colors: {
    primary: '#your-brand-color'
  }
}

<NidoeProvider theme={customTheme}>
  <App />
</NidoeProvider>

Styled Components:

import styled from 'styled-components'
import { Button } from '@nexiloop/nidoe'

const CustomButton = styled(Button)`
  background: linear-gradient(45deg, #fe6b8b, #ff8e53);
`

Are components accessible by default?

Yes! All Nidoe components follow WCAG 2.1 AA guidelines:

• Proper ARIA labels and roles
• Keyboard navigation support
• Screen reader compatibility
• Focus management
• Color contrast compliance

Theming & Customization

How does the theming system work?

Nidoe uses a token-based design system with semantic naming:

const theme = {
  colors: {
    background: '#ffffff',
    foreground: '#000000',
    primary: '#0066cc',
    secondary: '#6366f1',
    // ... more tokens
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    // ... more values
  }
}

Can I create my own theme?

Absolutely! Create a custom theme object:

import { createTheme } from '@nexiloop/nidoe'

const myTheme = createTheme({
  colors: {
    primary: '#your-primary-color',
    secondary: '#your-secondary-color'
  },
  fonts: {
    body: 'Inter, sans-serif',
    heading: 'Poppins, sans-serif'
  }
})

<NidoeProvider theme={myTheme}>
  <App />
</NidoeProvider>

How do I support dark mode?

Nidoe includes built-in dark mode support:

import { useTheme } from '@nexiloop/nidoe'

function ThemeToggle() {
  const { colorMode, toggleColorMode } = useTheme()
  
  return (
    <Button onClick={toggleColorMode}>
      {colorMode === 'light' ? 'Dark' : 'Light'} Mode
    </Button>
  )
}

Can I use CSS-in-JS libraries?

Yes! Nidoe works well with:

• Styled Components
• Emotion
• Stitches
• Vanilla Extract
• Any CSS-in-JS solution

Performance

Is Nidoe tree-shakable?

Yes! Nidoe is built with tree-shaking in mind:

• Named exports only
• Modular architecture
• Minimal runtime dependencies
• Bundle analyzers show only used components

What's the bundle size impact?

Nidoe is optimized for minimal bundle impact:

• Core library: ~45KB gzipped
• Individual components: 2-8KB each
• Tree-shaking reduces final bundle size
• Code-splitting friendly

How can I optimize performance?

1. Use named imports: Import only what you need
2. Lazy load components: Use React.lazy for large components
3. Configure bundle analyzer: Monitor bundle size
4. Enable tree-shaking: Ensure your bundler supports it

Browser Support

Which browsers are supported?

Nidoe supports all modern browsers:

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ⚠️ IE 11 (limited support with polyfills)

Do I need polyfills?

For modern browsers, no polyfills are required. For IE11 support, you may need:

• Promise polyfill
• Array.from polyfill
• Object.assign polyfill

TypeScript Support

Does Nidoe have TypeScript support?

Yes! Nidoe is built with TypeScript and includes:

• Full type definitions
• IntelliSense support
• Type-safe prop validation
• Generic component types

How do I get better TypeScript integration?

Use strict TypeScript configuration:

{
  "compilerOptions": {
    "strict": true,
    "exactOptionalPropertyTypes": true,
    "noUncheckedIndexedAccess": true
  }
}

Forms & Validation

How do I handle form validation?

Nidoe integrates seamlessly with form libraries:

React Hook Form:

import { useForm } from 'react-hook-form'
import { Input, Button } from '@nexiloop/nidoe'

function MyForm() {
  const { register, handleSubmit, errors } = useForm()
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input
        {...register('email', { required: true })}
        error={errors.email && 'Email is required'}
      />
      <Button type="submit">Submit</Button>
    </form>
  )
}

Formik:

import { Formik } from 'formik'
import { Input, Button } from '@nexiloop/nidoe'

function MyForm() {
  return (
    <Formik initialValues={{ email: '' }} onSubmit={handleSubmit}>
      {({ values, handleChange, handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <Input
            name="email"
            value={values.email}
            onChange={handleChange}
          />
          <Button type="submit">Submit</Button>
        </form>
      )}
    </Formik>
  )
}

Animation & Motion

Does Nidoe include animations?

Yes! Nidoe includes subtle, accessible animations:

• Component state transitions
• Hover and focus effects
• Loading states
• Page transitions (with Framer Motion)

Can I disable animations?

Yes, respect user preferences:

<NidoeProvider reduceMotion>
  <App />
</NidoeProvider>

Or use CSS:

@media (prefers-reduced-motion: reduce) {
  .nidoe-component {
    animation: none !important;
    transition: none !important;
  }
}

Testing

How do I test components using Nidoe?

Use React Testing Library with Nidoe components:

import { render, screen } from '@testing-library/react'
import { Button } from '@nexiloop/nidoe'

test('renders button with text', () => {
  render(<Button>Click me</Button>)
  expect(screen.getByRole('button')).toHaveTextContent('Click me')
})

Do I need to wrap tests with providers?

For components using theme context, yes:

import { NidoeProvider } from '@nexiloop/nidoe'

function renderWithTheme(component) {
  return render(
    <NidoeProvider>
      {component}
    </NidoeProvider>
  )
}

Migration & Updates

How do I migrate from other component libraries?

We provide migration guides for popular libraries:

• Material-UI → Nidoe
• Ant Design → Nidoe
• Chakra UI → Nidoe
• Bootstrap → Nidoe

How do I stay updated?

• Subscribe to our changelog
• Follow semantic versioning
• Use automated dependency updates
• Test breaking changes in development

Getting Help

Where can I get support?

• Documentation: Comprehensive guides and examples
• GitHub Issues: Bug reports and feature requests
• Discord Community: Real-time help and discussions
• Stack Overflow: Tag questions with nidoe
• Email Support: For enterprise customers

How do I report bugs?

1. Search existing issues first
2. Create a minimal reproduction
3. Use our bug report template
4. Include environment details
5. Add screenshots if relevant

Can I request new components?

Yes! We welcome feature requests:

1. Check our roadmap first
2. Open a GitHub discussion
3. Describe the use case
4. Provide design references
5. Consider contributing!

Need more help? Join our community and get answers from fellow developers and maintainers!