Components
The design system provides a collection of reusable and customizable components to help you build consistent and efficient user interfaces. These components are available for import from the library, but the recommended approach is to follow the shadcn/ui convention by placing them in a components/ui directory. This allows for better customization and maintainability.
Key Features
- Reusable Components: Prebuilt components like buttons, inputs, cards, and more.
- Customizable: Components can be easily customized to fit your project's needs.
- Best Practices: Follow the components/ui convention for better organization and scalability.
- Default Aura Components: If you prefer to use the default styling, you can directly import and re-export components.
Importing Components
You can import components directly from the library, but the recommended approach is to follow the components/ui convention.
Direct Import (Not Recommended)
jsx
Recommended Approach: Using components/ui
- Create a components/ui directory in your project.
- Add the component files to this directory.
- Customize the components as needed.
Example: Adding a Button Component
- Create a file at components/ui/button.tsx.
- Import the component from the library and re-export it:
jsx
jsx
Customizing Components
To customize a component, copy it to the components/ui directory and modify it as needed.
jsx