A minimal, educational template for building a Design System using React, TypeScript, and Vite. This template is specifically designed for students learning about component libraries and design systems.
npm install @neroli/design-system2A minimal, educational template for building a Design System using React, TypeScript, and Vite. This template is specifically designed for students learning about component libraries and design systems.
This template provides a foundation for:
- Learning how to build a component library
- Understanding Design System principles
- Practicing component development with React and TypeScript
- Exploring documentation with Storybook
Clone this repository:
``bash`
git clone [repository-url]
cd ds-template
Install dependencies:
`bash`
npm install
Start Storybook to view components:
`bash`
npm run storybook
Build the library:
`bash`
npm run build
`txt`
ds-template/
āāā src/
ā āāā components/ # React components
ā ā āāā divider/ # Example component
ā āāā index.ts # Main export file
āāā .storybook/ # Storybook configuration
āāā vite.config.ts # Build configuration
- React - UI library
- TypeScript - Type safety and better developer experience
- Vite - Build tool
- Storybook - Component documentation and development
- ESLint - Code linting
- CSS Modules - Scoped styling
- npm run dev - Builds the library in watch modenpm run build
- - Builds the library for productionnpm run storybook
- - Starts Storybook development servernpm run build-storybook
- - Builds Storybook for productionnpm run lint
- - Runs ESLint
1. Create a new directory under src/components.tsx
2. Add your component files (, .module.css).stories.tsx
3. Create a story file ()src/index.ts
4. Export the component in
Example component structure:
`txt``
component-name/
āāā component-name.tsx
āāā component-name.module.css
āāā component-name.stories.tsx
āāā index.ts
- React Documentation
- Storybook Tutorials
- Design Systems Handbook
This template is meant for educational purposes. Feel free to fork it and adapt it to your needs!